How to realize the DRAWING processing in Processing?

General Discussion Other

karenpunk

How to realize the DRAWING processing in Processing?

in General Discussion • Other • 1 year ago

We all know how to draw a line in Processing.

But when we draw a line, the line is shown immediately.

What if i want to witness the drawing process, namely, to see the line moving forward, gradually completes a whole line.

Here's what i want to realize: to DRAW several lines and curves which finally turn into some pattern.

So how to make that happen? Using array?

Many thanks.

btw, there was a guy casting doubt on my question, i accidentally delete the question instead of editing it, so i rewrite this one, sorry >_<

Replies(7)

demiguel...

Re: How to realize the DRAWING processing in Processing?

1 year ago

u could use pixels[] to draw ur lines pixel by pixel (that could look really nice), or break ur lines and curves into very small segements of lines so that u get a similar effect.

http://processing.org/reference/set_.html

http://processing.org/reference/pixels.html

btw it was me, no worries

karenpunk

Re: How to realize the DRAWING processing in Processing?

1 year ago

Thank you Demiguel,

But still i don't really get your idea. Could you post some code? I'm a beginner,so...

Many thanks.

demiguel...

Re: Re: How to realize the DRAWING processing in Processing?

1 year ago

Sure, here u go:

void setup() {
size(400, 400);
}
void draw() {
loadPixels();
pixels[width*100 + frameCount]=color(0);
updatePixels();
}

karenpunk

Re: How to realize the DRAWING processing in Processing?

1 year ago

Oh i see

So what u put into [] is the position needed be druw, right?

Then what should i put for oblique lines or curves ?

demiguel...

Re: Re: How to realize the DRAWING processing in Processing?

1 year ago

Right, regarding oblique lines and curves that u have to figure it out, but there is a post on drawing lines with the pixels[] method that might save u quite some work:

custom draw line

good luck :)

PhiLho

Re: How to realize the DRAWING processing in Processing?

1 year ago

A simplistic way to do it:

int[][] coords =
{
{ 20, 20 },
{ 130, 50 },
{ 150, 120 },
{ 40, 140 },
};
void setup()
{
size(200, 200);
background(255);
frameRate(1);
}
int idx;
int px, py;
void draw()
{
int x = coords[idx][0];
int y = coords[idx][1];
if (frameCount > 1)
{
line(px, py, x, y);
}
px = x;
py = y;
idx = ++idx % coords.length;
}

PhiLho

Re: How to realize the DRAWING processing in Processing?

1 year ago

Actually, I already answered this question in the past...
The data is from the person asking the question.

class ProgressiveLine
{
private final int anchorX, anchorY;
private final int endX, evolX;
private final int endY, evolY;
public static final int PARAM_NB = 6;
ProgressiveLine(int ax, int ay, int ex, int evx, int ey, int evy)
{
anchorX = ax;
anchorY = ay;
endX = ex; evolX = evx;
endY = ey; evolY = evy;
}
void DrawFull()
{
Draw(1.0);
}
void Draw(float linePercent)
{
line(anchorX, anchorY,
endX + evolX * linePercent,
endY + evolY * linePercent
);
}
}
ProgressiveLine[] lines;
void setup()
{
size(280,320);
frameRate (30);
smooth();
lines = new ProgressiveLine[data.length / ProgressiveLine.PARAM_NB];
for (int i = 0, lineNb = 0; i < data.length; i += ProgressiveLine.PARAM_NB, lineNb++)
{
lines[lineNb] = new ProgressiveLine(
data[i], data[i + 1], data[i + 2],
data[i + 3], data[i + 4], data[i + 5]
);
}
}
int[] data =
{
98, 135, 98, -3, 135, -3,
95, 132, 95, -7, 130, 0,
88, 130, 88, -8, 130, 0,
80, 130, 80, -7, 130, 2,
73, 132, 73, -7, 132, 4,
66, 136, 66, 1, 136, -3,
67, 133, 67, 6, 133, -5,
73, 128, 73, -12, 128, 7,
61, 135, 61, 0, 135, 3,
61, 138, 61, 2, 138, 0,
63, 138, 63, 0, 138, 3,
63, 141, 63, -3, 141, 3,
60, 144, 60, 3, 144, 0,
63, 144, 63, 4, 144, 2,
67, 146, 67, 0, 146, -3,
67, 143, 67, 8, 143, -6,
75, 137, 75, 0, 137, 3,
75, 140, 75, 3, 140, 5,
78, 145, 78, 8, 145, 2,
85, 147, 85, 7, 147, -3,
92, 144, 92, 1, 144, -5,
93, 139, 93, 1, 139, -5,
94, 134, 94, 8, 134, 3,
102, 137, 102, 4, 137, 4,
106, 141, 106, 0, 141, 4,
106, 145, 106, -7, 145, 1,
99, 146, 99, -4, 146, 2,
95, 148, 95, -9, 148, 1,
86, 149, 86, -2, 149, 0,
84, 149, 84, -3, 149, -1,
81, 148, 81, -7, 148, -1,
74, 147, 74, -3, 147, -2,
71, 145, 71, 4, 145, -5
};
int lineNb = 0;
float linePercent = 0;
boolean bFinished;
void draw()
{
background(255);
translate(-100, -200);
scale(3);
if (!bFinished)
{
linePercent += 0.1;
if (linePercent > 1.0)
{
lineNb++;
linePercent = 0;
if (lineNb >= lines.length)
{
lineNb = lines.length - 1;
linePercent = 1.0; // Fully draw last line
bFinished = true;
println("Done!");
}
}
}
// Fully draw all the previous lines
for (int i = 0; i < lineNb; i++)
{
lines[i].DrawFull();
}
// Partially draw the current line
lines[lineNb].Draw(linePercent);
}

(Today, I abandoned this old habit of having a capital initial letter for function names...)

Top Reply