How to i make rectangle move across the screen processing js

Question

I want to make the white rectangles move across the screen like traffic and stop when the light is red. I have started this on the move method, totally new to processing js. Currently the cars are the correct distance apart but i am unsure how to move thtis loop and move across the screen until the traiff light is red.

let counter = 0;
let lightorder = 0;

//setup the enviroment i.e. roads, lines on roads and trees
void setup() {

size(1330, 720);
background(96, 153, 25);

//Roads

noStroke();
fill(100);
rect(0, 200 + 10, 1330, 300);
rect(520, 0, 300, 1500);


//Lines on road

fill(255);
rect(0, 340, 90, 30);

rect(200, 340, 90, 30);
rect(400, 340, 90, 30);
rect(860, 340, 90, 30);
rect(1060, 340, 90, 30);
rect(1260, 340, 90, 30);
rect(655, 75, 30, 90);
rect(655, 575, 30, 90);

for(int i=0; i < 10; i++){
      move(i = i +20)
}

}


//work out light order and assign and fill shapes on traffic lights according
void draw() {



determineLightOrder();
trafficLight();
trafficLight2();
trafficLight3();
trafficLight4();

}

void move(int p){
rect(p, 230, 200, 70);
rect(p, 400, 200, 70);
}



//determine if traffic light is red, yellow or green and fill shape 
accordingly
void trafficLight() {

let is_red_light = lightorder == 2;
let is_yellow_light = lightorder == 1;
let is_green_light = lightorder == 0;

stroke(250);
fill(0);
rect(10 + 550, 10 + 80, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 550, 30 + 80, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 550, 60 + 80, 20, 20);
}

// green ligh

if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 550, 90 + 80, 20, 20);

}

}

 void trafficLight2() {

//declare light color variables 
let is_red_light = lightorder == 0;
let is_yellow_light = lightorder == 2;
let is_green_light = lightorder == 1;

stroke(250);
fill(0);
rect(10 + 850, 10 + 215, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 850, 30 + 215, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 850, 60 + 215, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 850, 90 + 215, 20, 20);
}

}

//same code as the trafficLight2 different position of lights
void trafficLight3() {

stroke(250);
fill(0);
rect(10 + 420, 10 + 380, 40, 100);

let is_red_light = lightorder == 0;
let is_yellow_light = lightorder == 2;
let is_green_light = lightorder == 1;

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 420, 30 + 380, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 420, 60 + 380, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 420, 90 + 380, 20, 20);
}

}

 //same code as trafficLight1 different position of lights
 void trafficLight4() {

let is_red_light = lightorder == 2;
let is_yellow_light = lightorder == 1;
let is_green_light = lightorder == 0;

stroke(250);
fill(0);
rect(10 + 730, 10 + 525, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 730, 30 + 525, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 730, 60 + 525, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 730, 90 + 525, 20, 20);
}


}

//determine the light order
void determineLightOrder() {

counter++;

if (counter == 200) {
    counter = 0;
    lightorder = 0;
}
else if (counter == 50) {
    lightorder = 1;
}
else if (counter == 70) {
    lightorder = 2;
}
  }

score 0 · Answer 1 · answered Mar 15 '18 at 21:49

Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense:

I wrote this tutorial on animation in Processing that I highly recommend you read. But basically, you need to store the state of your program (for example, the position of the rectangles) in a variable (or multiple variables). Use those variables to draw your scene, and then change those variables over time to create an animation.

Break your problem down into smaller pieces and take those pieces on one at a time. Can you create a simple program that shows a single moving square? Then get that square to stop given a certain criteria. Then add a second square. Keep working your way forward in small steps like that, and if you get stuck on a specific step, post a MCVE along with a more specific question. Good luck.

How to i make rectangle move across the screen processing js

1 Answers1