Creating a dynamic traffic light display: A step-by-step guide

Question

Creating a dynamic traffic light display: A step-by-step guide

//traffic lights:red,yellow,green
    fill(trafficFirstLightColor)
    ellipse(315, 40, 20, 20)
    fill(trafficSecondLightColor)
    ellipse(315, 40 + 25 * 1, 20, 20)
    fill(trafficThirdLightColor)
    ellipse(315, 40 + 25 * 2, 20, 20)


    //if three lights with black, first light on
    x+=10
    if (trafficFirstLightColor === "black" && trafficSecondLightColor === "black" && trafficThirdLightColor === "black" && x == 3000) {
        setTimeout(() => {
            trafficFirstLightColor = 'red';
        }, x)
    } else if (trafficFirstLightColor === "red" && x == 6000) {
        trafficFirstLightColor = "black"
        setTimeout(() => {
            trafficSecondLightColor = 'yellow';
        }, x-3000)
    } else if (trafficSecondLightColor === "yellow" && x == 9000) {
        trafficSecondLightColor = "black"
        setTimeout(() => {
            trafficThirdLightColor = 'green';
        }, x-6000)
    }

The attempt at creating a color changing traffic light every 3 seconds was unsuccessful...

Initially, all three traffic lights were set to black and assigned specific variables. Another variable x was created to be used in the if-else statement. When all lights are black, the first one turns red. Then after 3 seconds, the red light switches to yellow. Finally, after an additional 3 seconds, the yellow light changes to green. The plan seemed good but the code implementation had issues.

javascript p5.js

Answer 1

Answer №1

When working with a p5.js configuration that includes the setup and draw functions, keep in mind that the draw function operates at up to 30/60 FPS. This eliminates the need for manually calling setTimeout to prompt changes. Instead, you can compare the current millis() value with the previous one to determine the time elapsed since the last invocation of draw().

For example, let's look at a scenario where we create a traffic light animation using p5.js without utilizing setTimeout:

let trafficFirstLightColor = 'black';
let trafficSecondLightColor = 'black';
let trafficThirdLightColor = 'black';
let start;

function setup() {
  createCanvas(400, 400);
  trafficFirstLightColor = 'black';
  trafficSecondLightColor = 'black';
  trafficThirdLightColor = 'black';
  start = millis();
}

function draw() {
  fill(trafficFirstLightColor);
  ellipse(315, 40, 20, 20);
  fill(trafficSecondLightColor);
  ellipse(315, 40 + 25 * 1, 20, 20);
  fill(trafficThirdLightColor);
  ellipse(315, 40 + 25 * 2, 20, 20);
  
  const now = millis();
  const cycle = now - start;
  
  if (cycle < 3000) {
    if (trafficFirstLightColor === 'black' &&
    trafficSecondLightColor === 'black' &&
    trafficThirdLightColor === 'black') {
      trafficFirstLightColor = 'red';
      return;
    }
  } else if (cycle < 6000) {
    if (trafficFirstLightColor === 'red') {
      trafficFirstLightColor = 'black';
      trafficSecondLightColor = 'yellow';
      return;
    }
  } else if (cycle < 9000) {
    if (trafficSecondLightColor === 'yellow') {
      trafficSecondLightColor = 'black';
      trafficThirdLightColor = 'green';
      return;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

Answer 2

When working with a p5.js configuration that includes the setup and draw functions, keep in mind that the draw function operates at up to 30/60 FPS. This eliminates the need for manually calling setTimeout to prompt changes. Instead, you can compare the current millis() value with the previous one to determine the time elapsed since the last invocation of draw().

For example, let's look at a scenario where we create a traffic light animation using p5.js without utilizing setTimeout:

let trafficFirstLightColor = 'black';
let trafficSecondLightColor = 'black';
let trafficThirdLightColor = 'black';
let start;

function setup() {
  createCanvas(400, 400);
  trafficFirstLightColor = 'black';
  trafficSecondLightColor = 'black';
  trafficThirdLightColor = 'black';
  start = millis();
}

function draw() {
  fill(trafficFirstLightColor);
  ellipse(315, 40, 20, 20);
  fill(trafficSecondLightColor);
  ellipse(315, 40 + 25 * 1, 20, 20);
  fill(trafficThirdLightColor);
  ellipse(315, 40 + 25 * 2, 20, 20);
  
  const now = millis();
  const cycle = now - start;
  
  if (cycle < 3000) {
    if (trafficFirstLightColor === 'black' &&
    trafficSecondLightColor === 'black' &&
    trafficThirdLightColor === 'black') {
      trafficFirstLightColor = 'red';
      return;
    }
  } else if (cycle < 6000) {
    if (trafficFirstLightColor === 'red') {
      trafficFirstLightColor = 'black';
      trafficSecondLightColor = 'yellow';
      return;
    }
  } else if (cycle < 9000) {
    if (trafficSecondLightColor === 'yellow') {
      trafficSecondLightColor = 'black';
      trafficThirdLightColor = 'green';
      return;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

Answer 3

Answer №2

When dealing with multiple values, it's best to utilize a data structure instead of using individual variables like thing1, thing2, thing3. In this scenario, we can opt for an array that contains 3 objects with color and duration properties. By cycling through the array or using an index to iterate through the lights while rendering them.

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  },
];

function setup() {
  createCanvas(50, 50);
  noStroke();
  noLoop();
  renderLights();
}

const renderLights = () => {
  clear();
  const {duration, color} = lights[0];
  fill(color);
  ellipse(width / 2, height / 2, width, height);
  setTimeout(renderLights, duration);
  lights.push(lights.shift());
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

The code is designed for scalability (allowing addition and removal of lights), and by separating configuration from implementation logic, adjusting durations becomes simpler without the risk of breaking the code.

If your canvas is cleared every frame in draw, you can separate light cycling from drawing:

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  },
];

function setup() {
  createCanvas(50, 50);
  noStroke();
  runLightCycle();
}

function draw() {
  background(0);
  renderCurrentLight();
}

const renderCurrentLight = () => {
  fill(lights[0].color);
  ellipse(width / 2, height / 2, width, height);
};

const runLightCycle = () => {
  setTimeout(() => {
    lights.push(lights.shift());
    runLightCycle();
  }, lights[0].duration);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

While setTimeout is not precise in timing, resulting in potential drift over time.

To prevent drift, tracking the time of the last light change and monitoring elapsed milliseconds since then can help maintain accuracy. Incrementing the last change time when exceeding the current light duration assists in consistency.

If displaying all lights simultaneously instead of changing one light's color, incorporating a loop can be beneficial:

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  };
let currentLight = 0;
const lightSize = 50;

function setup() {
  createCanvas(lightSize, lightSize * lights.length);
  noStroke();
  noLoop();
  renderLights();
}

const renderLights = () => {
  clear();
  lights.forEach((e, i) => {
    fill(i === currentLight ? e.color : "black");
    ellipse(
      lightSize / 2,
      lightSize / 2 + i * lightSize,
      lightSize,
      lightSize
    );
  });
  setTimeout(renderLights, lights[currentLight].duration);
  currentLight = ++currentLight % lights.length;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

Answer 4

When dealing with multiple values, it's best to utilize a data structure instead of using individual variables like thing1, thing2, thing3. In this scenario, we can opt for an array that contains 3 objects with color and duration properties. By cycling through the array or using an index to iterate through the lights while rendering them.

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  },
];

function setup() {
  createCanvas(50, 50);
  noStroke();
  noLoop();
  renderLights();
}

const renderLights = () => {
  clear();
  const {duration, color} = lights[0];
  fill(color);
  ellipse(width / 2, height / 2, width, height);
  setTimeout(renderLights, duration);
  lights.push(lights.shift());
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

The code is designed for scalability (allowing addition and removal of lights), and by separating configuration from implementation logic, adjusting durations becomes simpler without the risk of breaking the code.

If your canvas is cleared every frame in draw, you can separate light cycling from drawing:

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  },
];

function setup() {
  createCanvas(50, 50);
  noStroke();
  runLightCycle();
}

function draw() {
  background(0);
  renderCurrentLight();
}

const renderCurrentLight = () => {
  fill(lights[0].color);
  ellipse(width / 2, height / 2, width, height);
};

const runLightCycle = () => {
  setTimeout(() => {
    lights.push(lights.shift());
    runLightCycle();
  }, lights[0].duration);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

While setTimeout is not precise in timing, resulting in potential drift over time.

To prevent drift, tracking the time of the last light change and monitoring elapsed milliseconds since then can help maintain accuracy. Incrementing the last change time when exceeding the current light duration assists in consistency.

If displaying all lights simultaneously instead of changing one light's color, incorporating a loop can be beneficial:

const lights = [
  {
    color: "green",
    duration: 10_000,
  },
  {
    color: "yellow",
    duration: 3_000,
  },
  {
    color: "red",
    duration: 10_000,
  };
let currentLight = 0;
const lightSize = 50;

function setup() {
  createCanvas(lightSize, lightSize * lights.length);
  noStroke();
  noLoop();
  renderLights();
}

const renderLights = () => {
  clear();
  lights.forEach((e, i) => {
    fill(i === currentLight ? e.color : "black");
    ellipse(
      lightSize / 2,
      lightSize / 2 + i * lightSize,
      lightSize,
      lightSize
    );
  });
  setTimeout(renderLights, lights[currentLight].duration);
  currentLight = ++currentLight % lights.length;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

Creating a dynamic traffic light display: A step-by-step guide

Answer №1

Answer №2

Similar questions

Dynamic hovering over isotopic elements

Adding distinct objects in React.js

using single quotation marks for string keys in a JavaScript object

activate hover interactions across multiple layers of elements

How to Trigger a Callback Function in Angular Template?

Differences between the scope of if statements in JavaScript and Python

Problem encountered with Blueimp gallery and Twitter Bootstrap

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

What is the best way to store the result from a JavaScript FileReader into a variable for future reference?

What is the process of integrating an EJS file into the app.js file?

Creating PDFs with Puppeteer and math expressions using the page.$eval function

Having trouble retrieving data from a contact form with php, js, and ajax?

What is the best method for retrieving data from a loop in a vuetify carousel?

Show a concealed vertical menu on mobile using CSS

Encountering a "args" property undefined error when compiling a .ts file in Visual Studio Code IDE

Trouble disabling specific days of the week in Meteor's Bootstrap3 datetimepicker

Encountering problems when trying to mock values with Jest

Encountered an error when attempting to run npm start due to the absence of the required module 'minizlib

Generate Address from Latitude and Longitude

Encountering a reference error while attempting to troubleshoot streamline.js generated JavaScript code