Project Landscape

sketchDownload

//Yanina Shavialenka
//Section B

/*
The following project was written with an intention to represent world
peace, love, diversity, and care for the planet. I used world map to
represent the world, people in different national outfits to represent 
people from around the world, love symbold to represent love, rainbow 
peace sign to represent peace in the world and inclusion, recycling 
symbol to represent the fact that we need to recycle and save our planet. 
*/

//Initial arrays for images and objects
var people = [];
var world = [];
var symbol = [];
var loadPeople = [];
var loadSymbol = [];
var worldmap;
//Value of change of movement
var dx1 = 1.5;

//Preloads images
function preload() {
    var file = [];
    file[0] = "https://i.imgur.com/PAWmbXw.png";
    file[1] = "https://i.imgur.com/t0fgBq2.png";
    file[2] = "https://i.imgur.com/SkGPugf.png";
    file[3] = "https://i.imgur.com/dbMZm7H.png";
    file[4] = "https://i.imgur.com/L1ODD20.png";
    file[5] = "https://i.imgur.com/b5hpqxP.png";

    for(var i = 0 ; i < file.length; i++) {
        people[i] = loadImage(file[i]);
    }

    var file1 = [];
    file1[0] = "https://i.imgur.com/IRxGbDw.png";
    file1[1] = "https://i.imgur.com/Xkq7Q0x.png";
    file1[2] = "https://i.imgur.com/w9crIqx.png";

    for(var i = 0 ; i < file1.length; i++) {
        symbol[i] = loadImage(file1[i]);
    }

    worldmap = loadImage("https://i.imgur.com/LhjqpdM.png");
    world.push(makeBackground(0,0,dx1));
}

function setup() {
    createCanvas(480, 480);
}

//Object functions that create object
//Below function has an object for background
function makeBackground(cx,cy,cdx) {
    var c = { x: cx, y: cy, dx: cdx,
            stepFunction: stepBackground,
            drawFunction: drawBackground
    }
    return c;
}

//Below function has an object for characters
function makeCharacter(cx, cdx, num) {
    var r = random(320);
    var c = { x: cx, y: r, dx: cdx,
            imageNum: num,
            stepFun: stepCharacter,
            drawFun: drawCharacter
    }
    return c;
}

//Below function has an object for symbols
function makeSymbol(cx, cdx, num) {
    var r = random(320);
    var c = { x: cx, y: r, dx: cdx,
    	    imageNum: num,
            step: stepSymbol,
            draw: drawSymbol
    }
    return c;
}

//Object functions that move objects
function stepBackground() {
    this.x -= this.dx; 
}
function stepCharacter() {     
    this.x -= this.dx; 
}
function stepSymbol() {     
    this.x -= this.dx; 
}

//Object functions that draw objects
function drawBackground() {
    image(worldmap,this.x,this.y);
}
function drawCharacter() {
    image(people[this.imageNum],this.x,this.y);
}
function drawSymbol() {
    image(symbol[this.imageNum],this.x,this.y);
}


function draw() {
    background(220);
    
    //random values
    var num = random(people.length - 2);
    num = int(num);
    var num1 = random(symbol.length);
    num1 = int(num1);
    var peopleCount = random(100,200);
    peopleCount = int(peopleCount);
    var symbolCount = random(300);
    symbolCount = int(symbolCount);

    //moves and draws map
    for(var i = 0 ; i < world.length ; i++) {
        world[i].stepFunction();
        world[i].drawFunction();
    }

    //when the latest world x postion is 0, a new map is drawn at x coordinate of the world map width
    if(world[world.length-1].x <= 0) {
        world.push(makeBackground(802,0,dx1));
    }

    //new position for people and symbols
    if(frameCount % peopleCount == 0) {
        loadPeople.push(makeCharacter(480,dx1,num));
    }
    
    if(frameCount % symbolCount == 0) {
        loadSymbol.push(makeSymbol(480,dx1,num1));
    }
    
    //moves and draws people and symbols
    for(var i = 0 ; i < loadPeople.length ; i++) {
        loadPeople[i].stepFun();
        loadPeople[i].drawFun();
    }

    for(var i = 0 ; i < loadSymbol.length ; i++){ 
        loadSymbol[i].step();
        loadSymbol[i].draw();
    }
}

For this week’s project, I decided to portray the idea of utopia where all people around the world live in peace, love, and inclusion. I used the background of a world map to represent the world; people in different national outfits to represent the people around the world; love symbol to represent love; rainbow peace sign to represent peace and inclusion; recycling symbol to represent the idea that we need to recycle to save the earth and have that ideal utopia.

In my project, I encountered a problem with a background since I used an image instead of drawing it out myself: when the image would end, it would not reappear so I came with an idea to use a double image “glued” together which eventually did the trick. Overall I really enjoyed this assignment and found it really fun to work on!