# How to move the color?

**URL:** <https://discourse.processing.org/t/how-to-move-the-color/25074>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 31, 2020, 11:35am UTC](https://discourse.processing.org/t/how-to-move-the-color/25074 "2020-10-31T11:35:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GoodPro](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GoodPro](https://discourse.processing.org/u/GoodPro)\
**Post date:** [October 31, 2020, 11:35am UTC](https://discourse.processing.org/t/how-to-move-the-color/25074/1 "2020-10-31T11:35:20Z")

</div>

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();  
}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 31, 2020, 7:49pm UTC](https://discourse.processing.org/t/how-to-move-the-color/25074/2 "2020-10-31T19:49:42Z")

</div>

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/](https://www.synfig.org/)). Check out [InkScape](https://inkscape.org/) 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!

---

<div class="post-metadata">

**Author:** ![GoodPro](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GoodPro](https://discourse.processing.org/u/GoodPro)\
**Post date:** [November 1, 2020, 8:10am UTC](https://discourse.processing.org/t/how-to-move-the-color/25074/3 "2020-11-01T08:10:50Z")

</div>

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);  
}