Month: November 2019

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmue.edu
// Project-11: Generative Wallpaper

var snowballs = [];
var moons = [];
function setup() {
    createCanvas(480,300);
    // display initial Snowballs
    for( i = 0; i < 3; i++){
        var snowBallsInitialX = random(width);
        snowballs[i] = drawSnowballs(snowBallsInitialX);
    }

    var moonInitialX = random(0, width / 3);
    moons[0] = drawMoon(moonInitialX);
}

function draw() {
    background(28,28,45);

    //moon
    updateAndDisplayMoon();
    addMoon();

    //makeTerrain
    makeTerrain();

    updateAndDisplaySnowballs();
    addSnowballs();
}

// all the details of the moon
function addMoon() {
    var prob = .07;
    if(moons[moons.length-1].xPosMoon < -30){
        moons.push(drawMoon(width));
    }
}

//render moon on screen
function updateAndDisplayMoon() {
    for( i = 0; i < moons.length; i++){
        moons[i].displayMoon();
        moons[i].moveMoon();
    }
}

function drawMoon(xPosM) {
    var moon = {
        xPosMoon: xPosM,
        yPosMoon: random(30, 60),
        moonSize: random(30, 50),
        moonSpeed: -.2,
        //color
        r: 255,
        g: random(180, 255),
        b: random(100, 255),
        //moveMoon
        moveMoon: function(){
            this.xPosMoon += this.moonSpeed;
        },
        //displayMoon
        displayMoon: function() {
            noStroke();
            fill(this.r, this.g, this.b);
            ellipse(this.xPosMoon, this.yPosMoon, this.moonSize, this.moonSize);
            fill(28,28,45);
            ellipse(this.xPosMoon - 20, this.yPosMoon, this.moonSize, this.moonSize);     
        },
    }
    return moon;
}

// draw terrain
var terrainSpeed = 0.00019;
var terrainDetail = 0.008;
function makeTerrain() {
    // noFill();
    fill(30, 40, 50);
    beginShape();
    for( x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0 , 1, 0, height);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

// add snowBalls
function addSnowballs() {
    var prob = .07;
    if( random(1) < prob) {
        snowballs.push(drawSnowballs(width));
    }
}

// RENDER onto canvas
function updateAndDisplaySnowballs() {
    for ( i = 0; i < snowballs.length; i++) {
        snowballs[i].displaySnowBalls(); //displayCircle();
        snowballs[i].moveSnowBalls(); //moveCircle();
    }
}

// create the actual Snowballs
function drawSnowballs(xPosB) {
    var sb = {
        xPosSnowBalls: xPosB,
        yPosSnowBalls: random(height), // randomize yPossnowBalls of snowBallss
        radius: random(5,15),
        snowBallsSpeed: random(.5,1),
        // move snowBalls
        moveSnowBalls: function() {
            this.xPosSnowBalls -= this.snowBallsSpeed;
            this.yPosSnowBalls += this.snowBallsSpeed * random(.2, .4);
            },
        // display SnowBalls
        displaySnowBalls: function() {
            fill('white');
            ellipse(this.xPosSnowBalls,this.yPosSnowBalls, this.radius, this.radius);
        },

    }
    return sb;
}

As winter approaches, I wanted to create a landscape that reflected the brisk temperature. In this code, there are two arrays, on that randomly generates snowballs and one that generates a new moon form every time it runs across the screen. Objects were created for both the moon and for the snowballs, where parameters such as color, size, and position were dynamically varied.

Below are sketches of my idea, I wanted to create a sense of time of day, sense of direction, and sense of environment. Much of this was done through the use of color which is made of entirely of cool tones and white.

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 11: Landscape

var tree = [];
var star = [];
var speedTerrain = 0.001;
var slopeTerrain = 0.008;
var yPoint = 380; //where mountains meet ground
//2, 19, 46

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of stars
    for (var i = 0; i < 25; i++){
        var starX = random(width);
        var starY = random(0, height/2);
        star[i] = makeStar(starX, starY);
    }

    //create an initial collection of trees
    for (var i = 0; i < 10; i++){
        var treeX = random(width);
        var treeY = random(360, 380);
        tree[i] = makeTree(treeX, treeY);
    }
    frameRate(10);
}


function draw() {
    background(0, 19, 48); 
    fill(43, 75, 128)
    //draw ground
    rect(0, yPoint, width, 150);

    displayStars();
    drawTallerMountains();
    drawMountains();
    displayTree();
}

function displayTree(){
    //call move and show trees
    for (var l = 0; l < tree.length; l++){
        tree[l].move();
        tree[l].draw();
    }
}

function moveTree(){
    //set speed of trees and repeat them as they leave the screen 
    this.x2 += this.speed2;
    if(this.x2 <= -10) {
        this.x2 += width
    }
}

function drawTree(){
    //draw trees
    noStroke();
    fill(54, 100, 156);
    push();
    translate(this.x2, this.y2);
    triangle(3, -this.treeHeight, -this.treeWidth/2, 3, this.treeWidth/2 + 5, 3)
    rect(0, 0, 7, 20);
    pop();

}

function makeTree(locationX, locationY){
    var makeT = {x2: locationX,
                y2: locationY,
                treeWidth: random(20, 30),
                treeHeight: random(15, 40),
                speed2: -5,
                move: moveTree,
                draw: drawTree}
    return makeT;
} 

function drawStar(){
    var starWidth = random(1, 3); //make stars sparkle!
    //draw stars
    noStroke();
    fill(252, 232, 3);
    push();
    translate(this.x, this.y);
    ellipse(20, 20, starWidth, starWidth);
    pop();
}

function makeStar(locationX, locationY){
    var makeS = {x: locationX,
                y: locationY,
                speed: -5,
                move: moveStar,
                draw: drawStar}
    return makeS;
}

function moveStar(){
    //speed of star and repeat on canvas
    this.x += this.speed;
    if(this.x <= -10){
        this.x += width;
    }
}

function displayStars(){
    //display stars
    for(i = 0; i < star.length; i++){
        star[i].move();
        star[i].draw();
    }
}

function drawMountains(){
    //draw front mountains
    stroke(5, 40, 97);
    beginShape();
    for (var i = 0; i < width; i++){
        var t = (i * slopeTerrain) + (millis() * speedTerrain);
        var y = map(noise(t), 0, 1, 100, 400);
        line(i, y, i, yPoint);
    }
    endShape();
}

function drawTallerMountains(){
    //draw back mountains
    stroke(1, 27, 66)
    beginShape();
    for(var i2 = 0; i2 < width; i2++){
        var t2 = (i2 * slopeTerrain * 2) + (millis() * speedTerrain);
        var y2 = map(noise(t2), 0, 1, 100, 200);
        line(i2, y2, i2, yPoint);
    }
    endShape();
}

I took my inspiration from the times when I was little and went camping with my family. Some of my favorite memories were in the car on our way there or back home and looking out the car window. I would see the mountain landscape/all the stars and my parents would be telling us stories about the different constellations in the sky. I wanted to create contrast between the foreground and the background with value contrast in the blue tones.