Project 4 – String Art

var carWidth = 20;
var carHeight = 10;
var carA = 0;
var carB = 0;

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(146, 234, 255);
    //left cloud
    fill(235);
    noStroke();
    circle(0, 50, 50);
    circle(40, 50, 70);
    circle(80, 70, 40);
    circle(90, 40, 50);
    //right cloud
    circle(250, 100, 50);
    circle(250, 60, 60);
    circle(300, 80, 100);
    circle(340, 50, 80);
    circle(360, 90, 90);
    //sun
    fill(255, 213, 0);
    circle(200, 300, 200);
    //black car
    fill(0);
    if (carA > width) {
        carA = -carWidth
    }
    carA = carA + 1;
    rect(carA, 240, carWidth, carHeight);
    //green car
    fill(0, 255, 0);

    stroke(100, 0, 0);
    strokeWeight(1);
    push();
    //left bridge lines
    translate(-30, -50);
    for (var i = 0; i <= 120; i += 10) {
        line(0, i + 180, i + 80, 300);
    }
    //middle bridge lines
    translate(100, 0);
    stroke(50, 0, 0);
    for (var i = 0; i <= 210; i += 15) {
        line(300, i + 90, 210 - i, 300);
    }
    //bottom of bridge
    translate(-70, 0);
    for (var i = 0; i <= 12; i += 1.5) {
        line(0, i + 301, 400, i + 301);
        fill(180, 0, 0);
        rect(0, i + 301, 400, 2);
    }
    pop();
    noFill();
    //left top bridge structure
    stroke(190, 0, 0);
    strokeWeight(5);
    rect(-10, 130, 15, 25);
    rect(-10, 160, 15, 25);
    rect(-10, 190, 15, 25);
    rect(-10, 220, 15, 29);
    //left bottom bridge structure
    noStroke();
    fill(150, 0, 0);
    rect(-7, 265, 15, 50);
    //right bridge structure circles
    noFill();
    stroke(190, 0, 0);
    strokeWeight(1);
    circle(340, 35, 7);
    circle(375, 35, 7);
    //right bridge structure
    stroke(180, 0, 0);
    strokeWeight(10);
    rect(340, 41, 35, 40);
    rect(340, 86, 35, 45);
    rect(340, 136, 35, 55);
    rect(340, 186, 35, 60);
    //right bottom bridge structure
    stroke(150, 0, 0);
    rect(340, 270, 35, 50);
    line(340, 270, 375, 305);
    line(375, 270, 340, 305);
    push();
    //right bridge lines
    translate(336, -140);
    stroke(150, 0, 0);
    strokeWeight(1);
    for (var i = 0; i <= 210; i += 15) {
        line(0, i + 180, i + 180, 390);
    }
    pop();
}