let vehicle;
let path;
function setup() {
createCanvas(600, 600);
vehicle = new Vehicle(50, 0);
function draw() {
background(220);
path.display();
vehicle.follow(path);
vehicle.update();
vehicle.display();
}
var redLight = 'red'
var yellowLight = 'white'
var greenLight = 'white'
var count = 0;
function draw() {
fill("black")
rect(140, 70, 110, 250)
fill(redLight)
ellipse(195, 120, 60, 60)
fill("white")
text("RED", 182, 124)
fill(yellowLight)
ellipse(195, 200, 60, 60)
fill("white")
text("YELLOW", 171, 205)
fill(greenLight)
ellipse(195, 280, 60, 60)
fill("white")
text("GREEN", 175, 285)
}
Here I have a traffic light and a path and I want them to appear together but I can only make one of them appear so if the traffic light is there it won't show any of the path. How can I change this so that they both appear on the same canvas together.
You are declaring two separate draw() functions, and so the second one you declare replaces the first one. You need to combine your drawing logic into a single function:
let vehicle;
let path;
function setup() {
createCanvas(600, 600);
vehicle = new Vehicle(50, 0);
// initialize path ?!
}
function draw() {
background(220);
path.display();
vehicle.follow(path);
vehicle.update();
vehicle.display();
drawTrafficLight();
}
var redLight = 'red'
var yellowLight = 'white'
var greenLight = 'white'
var count = 0;
function drawTrafficLight() {
fill("black")
rect(140, 70, 110, 250)
fill(redLight)
ellipse(195, 120, 60, 60)
fill("white")
text("RED", 182, 124)
fill(yellowLight)
ellipse(195, 200, 60, 60)
fill("white")
text("YELLOW", 171, 205)
fill(greenLight)
ellipse(195, 280, 60, 60)
fill("white")
text("GREEN", 175, 285)
}