Day 35 – ITP1 Arrays of Objects

var floorPos_y;
var car;

function setup()
{

    createCanvas(1200,800);
    
    floorPos_y = 600;
    
    car = {x: 200, height:120, length: 130, wheelDia: 80, color: color(255,100,100)};
}

function draw()
{
    
    background(102,179,255);
    
    noStroke();
    fill(130);
    rect(0,floorPos_y,width, height - floorPos_y);
    
    renderCar(car);
    
    car.x += 1;
    
    if(car.x > width + 500)
    {
        car.x = -500;
    }
}


function renderCar(_car)
{
    fill(_car.color);
    stroke(0);
    
    //draw the car's body
    rect(
        _car.x, floorPos_y - _car.height
        , _car.length
        , _car.height - _car.wheelDia/2,
        20);
    
    //draw the windscreen
    fill(0,255,255);
    rect(
        _car.x + _car.length * 0.7, 
        floorPos_y - _car.height * 0.8, 
        _car.length * 0.2, 
        _car.height * 0.3, 
        5);
    
    
    //draw the wheels
    fill(65);
    ellipse(
        _car.x, 
        floorPos_y - _car.wheelDia/2, 
        _car.wheelDia
    );
    
    ellipse(
        _car.x + _car.length, 
        floorPos_y - _car.wheelDia/2, 
        _car.wheelDia);
}

var floorPos_y;
//var car;
var traffic;

function setup()
{

    createCanvas(1200,800);
    
    floorPos_y = 600;
    
    traffic = [
        {x: 200, height:120, length: 130, wheelDia: 80, color: color(255,100,100)},
        {x: 400, height:120, length: 130, wheelDia: 80, color: color(255,100,100)},
        {x: 600, height:120, length: 130, wheelDia: 80, color: color(255,100,100)}
    ]
    
//    car = {x: 200, height:120, length: 130, wheelDia: 80, color: color(255,100,100)};
}

function draw()
{
    
    background(102,179,255);
    
    noStroke();
    fill(130);
    rect(0,floorPos_y,width, height - floorPos_y);
    
    for(var i = 0; i < traffic.length; i++)
    {
        renderCar(traffic[i]);
        traffic[i].x += 1;
    
        if(traffic[i].x > width + 500)
        {
            traffic[i].x = -500;
        }
    }
}

var floorPos_y;
//var car;
var traffic;

function setup()
{

    createCanvas(1200,800);
    
    floorPos_y = 600;
    
    var incr = (width + 1000)/10;
    
    traffic = []
//        {x: 200, height:120, length: 130, wheelDia: 80, color: color(255,100,100)},
//        {x: 400, height:120, length: 130, wheelDia: 80, color: color(255,100,100)},
//        {x: 600, height:120, length: 130, wheelDia: 80, color: color(255,100,100)}
        for(var i = 0; i < 10; i ++)
        {
            car = {x: -500 + incr * i, 
                   height: random(120, 200), 
                   length: 130, 
                   wheelDia: random(40, 80), 
                   color: color(random(0, 255), random(0, 255), random(0, 255))};
            
            traffic.push(car);
        }
    
//    car = {x: 200, height:120, length: 130, wheelDia: 80, color: color(255,100,100)};
}

function draw()
{
    
    background(102,179,255);
    
    noStroke();
    fill(130);
    rect(0,floorPos_y,width, height - floorPos_y);
    
    for(var i = 0; i < traffic.length; i++)
    {
        renderCar(traffic[i]);
        traffic[i].x += 1;
    
        if(traffic[i].x > width + 500)
        {
            traffic[i].x = -500;
        }
    }
}


function renderCar(_car)
{
    fill(_car.color);
    stroke(0);
    
    //draw the car's body
    rect(
        _car.x, floorPos_y - _car.height
        , _car.length
        , _car.height - _car.wheelDia/2,
        20);
    
    //draw the windscreen
    fill(0,255,255);
    rect(
        _car.x + _car.length * 0.7, 
        floorPos_y - _car.height * 0.8, 
        _car.length * 0.2, 
        _car.height * 0.3, 
        5);
    
    
    //draw the wheels
    fill(65);
    ellipse(
        _car.x, 
        floorPos_y - _car.wheelDia/2, 
        _car.wheelDia
    );
    
    ellipse(
        _car.x + _car.length, 
        floorPos_y - _car.wheelDia/2, 
        _car.wheelDia);
}

var bus;
var floorPos_y;

function setup()
{

    createCanvas(1200,800);
    floorPos_y = 600;
    bus = {
        x: 200, 
        length: 800, 
        height: 400, 
        wheelDia: 100, 
        driver_pos_x: 0.15, //relative proportion to the length of the bus
        passengers: [0.4, 0.5, 0.6]
    };
}

function draw()
{
    
    background(102,179,255);
    
    noStroke();
    fill(130);
    rect(0,floorPos_y,width, height - floorPos_y);
    
    //draw the bus
    stroke(0);
    fill(250,190,0);
    
    rect(
        bus.x, 
        floorPos_y - bus.height, 
        bus.length, 
        bus.height - bus.wheelDia/2,
        200,
        25,
        25,
        25
    );
    
    //the wheels
    fill(100);
    ellipse(
        bus.x + bus.wheelDia, 
        floorPos_y - bus.wheelDia/2,
        bus.wheelDia
    )
    
        ellipse(
        bus.x - bus.wheelDia + bus.length, 
        floorPos_y - bus.wheelDia/2,
        bus.wheelDia
    )
    
    //the windows
    
    fill(0,255,255);
    
    rect(
    bus.x + bus.length * 0.075,
    floorPos_y - bus.height * 0.9, 
    bus.length * 0.2, 
    bus.height * 0.4, 
    150,
    10,
    10,
    10    
    );
    
    rect(
        bus.x + bus.length * 0.3,
        floorPos_y - bus.height * 0.9, 
        bus.length * 0.65, 
        bus.height * 0.4, 
        10);
    
    var basePos_y = floorPos_y - bus.height * 0.9 + bus.height * 0.4;
    var centerPos_x = bus.x + bus.driver_pos_x * bus.length; // translates the value in pixel value
    
    drawPerson(
        centerPos_x, 
        basePos_y
    );
    
    for(var i = 0; i < bus.passengers.length; i ++)
    {
        var centerPos_x = bus.x + bus.passengers[i] * bus.length;
        drawPerson(
        centerPos_x,
        basePos_y);
    }
    
}


function drawPerson(center_pos_x, base_pos_y)
{
    fill(255,50,50);
    rect(center_pos_x - 20, base_pos_y - 80, 
         70, 80,
         10,10,0,0);
    
    fill(255,150,150);
    ellipse(center_pos_x, base_pos_y - 80, 70);
    
    fill(0);
    ellipse(center_pos_x - 20, base_pos_y - 80, 5);
}