How to move the color?

[GoodPro]

Hi, everyone, I’m working on a project to make a car teaser with processing. I want to add a motion that moves the red LED light from left to right, and I want someone to help me.

I tried randomizing the color of the stroke, but it still didn’t work.

What code should I put in to put in the motion of red moving from left to right?

Please check the code below.

void setup() {
size(1024, 432);
smooth();
noFill();
stroke(120);
}

void draw() {
background(40, 40, 40);

//Body Apply mirror
noStroke();
fill(15, 15, 15);
beginShape();
vertex(10, 430); // Start
bezierVertex(10, 430, 5, 300, 15, 255);
bezierVertex(15, 255, 30, 200, 96, 195);
bezierVertex(96, 195, 105, 195, 152, 172);
bezierVertex(152, 172, 205, 110, 220, 36);
bezierVertex(220, 36, 228, 19, 260, 16);
bezierVertex(260, 16, 376, -5, 756, 16);
bezierVertex(1, 430, 1110, -9000, 1010, 430);
endShape();

// Window_Apply mirror
stroke(67, 67, 67);
bezier(260, 175, 263, 177, 266, 179, 755, 175); //window bootom
bezier(251, 158, 245, 135, 245, 90, 249, 60); //window left, Right
bezier(260, 175, 258, 175, 256, 175, 251, 158); //window bottom left, Right
bezier(260, 50, 300, 20, 600, 20, 762, 40); //window Top
bezier(260, 50, 258, 50, 256, 50, 249, 60); //window Top left, Right

//Rear light
smooth();
stroke(50, 50, 50);
curve(114-50, 247+100, 114, 247, 919, 247, 919+50, 247+100);
//line(114, 247, 919, 247); // Center Top
line(58, 257, 114, 247); //Left Top
line(58, 257, 60, 287); //Left
line(74, 293, 240, 286); //Left Bottom

line(919, 247, 975, 257); //Right Top
line(975, 257, 973, 287); //Right

curve(60+10, 287-30, 60, 287, 74, 293, 74+30, 293-10);
curve(240-30, 286-20, 240, 286, 255, 278, 255+30, 278+10);
curve(774-30, 278+10, 774, 278, 790, 286, 790+30, 286-10);
curve(955-30, 297-10, 955, 297, 973, 287, 973-10, 287-30);

line(255, 278, 774, 278); //Center bottom
line(790, 286, 955, 297); //Right connection

//Back LED Rear light
strokeWeight(8);
stroke(255,0,0);
bezier(105, 260, 215, 242, 847, 245, 924, 262);

//Left Yellow light
stroke(204, 204, 204);
strokeWeight(3);
bezier(82, 255, 85, 288, 70, 283, 237, 280);

//Right Yellow light, Apply mirror
stroke(204, 204, 204);
strokeWeight(3);
bezier(82, 255, 85, 288, 70, 283, 237, 280);
PImage x1= get (0, 0, width/2, height);
scale (-1, 1);
image (x1, -width, 0);
noLoop();
}

[josephh]

Hi,

Welcome to the forum!

First of all, you can format your code by using the </> button in the message editor.

For your project, I wouldn’t do it like this. Basically you are using code to draw some very specific shapes (here the car) in an non intuitive way by specifying the vertex coordinates.

You should use a vector graphics editor to first draw your car and then animate it in a 2d animation software (like https://www.synfig.org/). Check out InkScape if you don’t already know it

Now if you want to animate it in Processing, don’t use noLoop() because it’s breaking the draw loop and therefore you can’t introduce animation in your sketch.

To animate your light, you can animate the points that construct the path but the tricky thing is that it’s following a curved path… Anyway you first start with a value of 0 then at each call of the draw() function, increase that value and draw accordingly the points of the rear light.

Hope it helps!

[GoodPro]

Thanks to your help, I was able to create a moving color motion.
However, there was one problem. If I insert body code, the output of the red motion will fail, and if remove body code, the motion will be output correctly. How can I see color motion that moves with body code?

((This is a code with body))
int ellipse = 100 ;
float x = 110;
float y = 255;
float speed = 2;
float direction = 1;

void setup() {
size(1024, 432);
smooth();
background(0);
}

void draw() {
background(40, 40, 40);

//Body Apply mirror
noStroke();
fill(15, 15, 15);
beginShape();
vertex(10, 430);
bezierVertex(10, 430, 5, 300, 15, 255);
bezierVertex(15, 255, 30, 200, 96, 195);
bezierVertex(96, 195, 105, 195, 152, 172);
bezierVertex(152, 172, 205, 110, 220, 36);
bezierVertex(220, 36, 228, 19, 260, 16);
bezierVertex(260, 16, 376, -5, 756, 16);
bezierVertex(1, 430, 1110, -9000, 1010, 430);
endShape();

//rear light
smooth();
noFill();
stroke(50, 50, 50);
curve(114-50, 247+100, 114, 247, 919, 247, 919+50, 247+100);
//line(114, 247, 919, 247);
line(58, 257, 114, 247);
line(58, 257, 60, 287);

line(74, 293, 240, 286);
line(919, 247, 975, 257);
line(975, 257, 973, 287);

curve(60+10, 287-30, 60, 287, 74, 293, 74+30, 293-10);
curve(240-30, 286-20, 240, 286, 255, 278, 255+30, 278+10);
curve(774-30, 278+10, 774, 278, 790, 286, 790+30, 286-10);
curve(955-30, 297-10, 955, 297, 973, 287, 973-10, 287-30);

line(255, 278, 774, 278);
line(790, 286, 955, 297);

stroke(255, 0, 0);
strokeWeight(2);
x += speed * direction;
if ((x > width-ellipse) || (x < ellipse)) {
direction = -direction;
}
if (direction ==1) {
ellipse(x, y, 10, 10); // to right
} else {
ellipse(x, y, 10, 10); // to left
}

// Window_Apply mirror
noFill();
stroke(67, 67, 67);
bezier(260, 175, 263, 177, 266, 179, 755, 175);
bezier(251, 158, 245, 135, 245, 90, 249, 60);
bezier(260, 175, 258, 175, 256, 175, 251, 158);
bezier(260, 50, 300, 20, 600, 20, 762, 40);
bezier(260, 50, 258, 50, 256, 50, 249, 60);

//Right Yellow light, Apply mirror
noFill();
stroke(204, 204, 204);
strokeWeight(3);
bezier(82, 255, 85, 288, 70, 283, 237, 280);
PImage x1= get (0, 0, width/2, height);
scale (-1, 1);
image (x1, -width, 0);
}

((This is a code with no body))
int ellipse = 100 ;
float x = 110;
float y = 255;
float speed = 2;
float direction = 1;

void setup() {
size(1024, 432);
smooth();
background(0);
}

void draw() {

//rear light
smooth();
noFill();
stroke(50, 50, 50);
curve(114-50, 247+100, 114, 247, 919, 247, 919+50, 247+100);
//line(114, 247, 919, 247);
line(58, 257, 114, 247);
line(58, 257, 60, 287);

line(74, 293, 240, 286);
line(919, 247, 975, 257);
line(975, 257, 973, 287);

curve(60+10, 287-30, 60, 287, 74, 293, 74+30, 293-10);
curve(240-30, 286-20, 240, 286, 255, 278, 255+30, 278+10);
curve(774-30, 278+10, 774, 278, 790, 286, 790+30, 286-10);
curve(955-30, 297-10, 955, 297, 973, 287, 973-10, 287-30);

line(255, 278, 774, 278);
line(790, 286, 955, 297);

stroke(255, 0, 0);
strokeWeight(2);
x += speed * direction;
if ((x > width-ellipse) || (x < ellipse)) {
direction = -direction;
}
if (direction ==1) {
ellipse(x, y, 10, 10); // to right
} else {
ellipse(x, y, 10, 10); // to left
}

// Window_Apply mirror
noFill();
stroke(67, 67, 67);
bezier(260, 175, 263, 177, 266, 179, 755, 175);
bezier(251, 158, 245, 135, 245, 90, 249, 60);
bezier(260, 175, 258, 175, 256, 175, 251, 158);
bezier(260, 50, 300, 20, 600, 20, 762, 40);
bezier(260, 50, 258, 50, 256, 50, 249, 60);

//Right Yellow light, Apply mirror
noFill();
stroke(204, 204, 204);
strokeWeight(3);
bezier(82, 255, 85, 288, 70, 283, 237, 280);
PImage x1= get (0, 0, width/2, height);
scale (-1, 1);
image (x1, -width, 0);
}