Category: Uncategorized

sketch

var terrainSpeed = 0.001;
var terrainDetail = 0.009;
var terrainDetail2 = 0.003;
var stars = [];
var clouds=[];

function setup() {
    createCanvas(500,500);
    frameRate(10);
    for (var s = 0; s < 3000; s++) {
        stars.push(new Star());
    }
    //array for stars
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }
    //array for clouds
}


function draw() {
    stroke(255);
    strokeWeight(3);    

    var bgColor2 = color(164,174,224);
    var bgColor1 = color(66, 38, 89);
    gradient(0,0,width,height,bgColor1,bgColor2);
    //draw background gradient
    DrawStar();
    drawmountains();
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    train();
}

function Star() {
    //randomized stars

    this.x = random(width);
    this.y = random(height);
    this.di = random(0,1);
    this.speed = 0.5;
    this.border = random(0, 0.3);
    this.vol = 0; 
    this.move = function() {
    this.x += random(-this.speed, this.speed + this.vol);
    this.di = this.di +this.vol;
    var prob = random(0, 1);
    if (this.di <= 0.16) {
      this.vol = 0.001;
    }else if(this.di>=0.16){
    this.vol=0;}

  }

  this.display = function() {
    strokeWeight(this.border);
    stroke(255);
    fill(255);
    ellipse(this.x, this.y,  this.di,  this.di);

  }
}

function DrawStar() {
  for (var i = 0; i < stars.length; i++) {
    stars[i].move();
    stars[i].display();
  }
}


function gradient(x,y,wid,y2,c1,c2){
    noFill();
    for (var i = y; i < y+y2; i++){
        var inter = map(i,y,y+y2,0,1);
        var col = lerpColor(c1,c2,inter);
        stroke(col);
        line(x,i,x+wid,i);
    }

}
function drawmountains() {
    noStroke();
    fill(232,183,239,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.6);
        vertex(x, y+100); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(163,123,186,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.7);
        vertex(x, y+200); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(153,71,117,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.1);
        vertex(x, y+400); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
}

function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


function removeCloudsThatHaveSlippedOutOfView(){
    
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // remember the surviving clouds
}


function addNewCloudsWithSomeRandomProbability() {
    
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        clouds.push(makeCloud(width));
    }
}

function buildingMove() {
    this.x += this.speed;
}
    


function buildingDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight; 
    
    fill(255,90); 

    push();
    fill(255,20)
    translate(this.x, height - 40);
    ellipse(30, - bHeight -200, this.breadth, bHeight);
    pop();
}


function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: random(100, 300),
                speed: -random(1,3),
                nFloors: round(random(2,10)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function train() {
    fill(106,67,132);
    for (var i = 0; i < 3; i++){
        rect(i * 105,400,100,50);
        push();
        fill(255,206,173);
        rect(i * 105 +10,405,80,20);
        pop();
        beginShape();
        vertex(305,400);
        vertex(305,400);
        curveVertex(325,410);
        curveVertex(345,430);
        curveVertex(350,450);
        vertex(305,450);
        vertex(305,450);
        endShape();
    }
    for(var i = 0; i  < 315; i+= 30){
        ellipse(i+5,450,10,10);
    }
    rect(295,380,15,20);
    fill(255,150);
    ellipse(270,370,50,20);
    ellipse(210,350,70,30);
    ellipse(130,330,90,40);

}
//creating train and smoke

For this assignment I created a 2D animation. I wanted the train remain unmoving and the back ground terrain so that the combination of two can create an illusion. The randomized size and speed of the stars made shiny effect for the stars. Also I lowered the opacity of terrains and clouds to highlight the movement of the train.

sketch

var choice = [];
var buildings = [];
var trees = [];
var cars = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
 


function setup() {
    createCanvas(480, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}

function draw() {
    background(205,233,233); 


    // display the background
    stroke(0);
    strokeWeight(1);
    drawMountain();
    displayHorizon();
    

    // draw objects
    // Buildings
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    // Trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
    // Cars
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();


    // snow
    drawSnow();

    // window frame
    strokeWeight(40);
    stroke(230);
    line(0,0,width,0);
    line(0,0,0,height);
    line(0,height,width,height);
    line(width,0,width,height);
}

function drawMountain() {
    fill(246,255,223); 
    beginShape(); 
    vertex(0, 200);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 30, 200);
        vertex(x, y);    
    }
    vertex(width, 200);   
    endShape();
}

function drawSnow() {
    var xS = 10;
    var yS;
    for (var i=0; i< 50; i++) {
        yS = 0;
        for (var j=0; j< 25; j++){
            fill(255);
            noStroke();
            ellipse(xS, yS, 5);
            yS += random(5,20);
        }
        xS += random(8,25);    
    }
}

    

function updateAndDisplayBuildings() {
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView() {
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.02; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255,255,0); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    var wGap = this.breadth/16;
    var xW = this.breadth/16;
    //draw the windows
    for (var j=0; j < 5; j++) {
        for (var i = 0; i < this.nFloors; i++) {
            fill(153,204,255);
            stroke(102,178,255);
            rect(xW, -15 - (i * floorHeight), wGap*2 , 10);
        }
        xW += wGap*3;
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                nFloors: round(random(3,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

// DRAW THE CHRISTMAS TREE
function updateAndDisplayTrees() {
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function removeTreesThatHaveSlippedOutOfView() {
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the current trees
}


function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.03; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}


// method to update position of tree every frame
function treeMove() {
    this.x += this.speed;
}
    

// draw the tree and some ornaments
function treeDisplay() { 
    stroke(0); 
    push();
    translate(this.x, 0-this.treeH/3);
    fill(0,102,51)
    triangle(0, height-40, this.breadth/2, height-this.treeH-80, this.breadth, height-40); 
    fill(108,22,22)
    rect(this.breadth/2-10, height-40, 20, this.treeH/3);
    var x0 = this.breadth/6;
    for (var i=0; i<5; i++){
        fill(255,0,0);
        ellipse(x0, height-40-5, 6);
        x0 += this.breadth/6;
    }
    pop();
}


function makeTree(birthLocationX) {
    var tree = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                treeH: round(random(30,80)),
                move: treeMove,
                display: treeDisplay}
    return tree;
}

// DRAW VEHICLES
function updateAndDisplayCars() {
    // Update the car's positions, and display them.
    for (var i = 0; i < cars.length; i++){
        cars[i].move();
        cars[i].display();
    }
}


function removeCarsThatHaveSlippedOutOfView() {
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep; // remember the current cars
}


function addNewCarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new car to the end.
    var newCarLikelihood = 0.02; 
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(width));
    }
}


// method to update position of car every frame
function carMove() {
    this.x += this.speed;
}
    

// draw the car
function carDisplay() {
    stroke(0); 
    push();
    translate(this.x, 0);
    fill(180)
    rect(0, height-40-this.carWid/6, this.carWid, this.carWid/6);
    rect(this.carWid/4, height-40-this.carWid/30*11, this.carWid/5*3, this.carWid/5); 
    ellipse(this.carWid/6, height-40, this.carWid/6);
    ellipse(this.carWid/6*5, height-40, this.carWid/6);
    
    
    pop();
}


function makeCar(birthLocationX) {
    var car = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                carWid: round(random(30,50)),
                move: carMove,
                display: carDisplay}
    return car;
}


// Draw the soil 
function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
    fill(132, 75,47);
    rect (0, height-50, width, 50);
}

So, I started from the example code that professor provided for us. I tried to understand how all the things work. Then, I added more elements into the landscape. First, I added the mountain landscape in the background. Then, I change the orientations of the windows in the house. Then, I added the Christmas trees into the scene. Next, I added vehicles- cars to make the picture more fun. At last, I was inspired by the movie “The Power of Ten”. So, I give the animation a picture frame, making it look like people watching outside of a window. Also, I simulated the feeling of snowing to add more fun.

sketch

//Scqrlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 10: Generative Landscape

var sheeps = [];
var sSheeps = [];


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

    // create an initial collection of objects
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        sheeps[i] = makeSheep(rx);
        sSheeps[i] = makeSmallSheep(rx);
    }
    frameRate(10);
}


function draw() {
    background(170,215,230);
    // changing hillscape
    Hill();
    // moving sun position
    Sun();
    // draw existing to new locationlarge sheeps
    updateSheeps();
    // draw new large sheeps
    addNewSheeps();
    updateSmallSheeps();
    addNewSmallSheeps();
}


function updateSheeps(){
    // Update and draw the large sheep positions
    for (var i = 0; i < sheeps.length; i++){
        sheeps[i].move();
        sheeps[i].display();
    }
}

function addNewSheeps() {
    // With a very tiny probability, add a new building to the end.
    var newSheepLikelihood = 0.05;
    if (random(0,1) < newSheepLikelihood) {
        sheeps.push(makeSheep(width));
    }
}


// shift sheeps
function oMove() {
    this.x += this.speed;
}


// draw large sheeps
function sheepDisplay() {
    push();
    translate(this.x+50,height-80+this.scatter);
    // legs
    stroke(60);
    strokeWeight(2);
    var loc1 = random (5,7);
    line(this.x-10,loc1-10,this.x-10,loc1+12);
    line(this.x+10,loc1-10,this.x+10,loc1+12);
    //body
    strokeWeight(0.5);
    fill(255);
    stroke(200);
    ellipse(this.x, loc1-3, this.fat+20, 20);
    fill(150);
    //head
    ellipse(this.x-18, loc1-6, this.fat-8, 12);
    stroke(120);
    pop();
}

// object large sheep
function makeSheep(make) {
    var sheep = {x: make,
                fat: 20,
                speed: -1.0,
                move: oMove,
                scatter: random(5),
                display: sheepDisplay}
    return sheep;
}


// update location of existing small sheeps
function updateSmallSheeps(){
    // Update the small sheep's positions, and draw them.
    for (var i = 0; i < sSheeps.length; i++){
        sSheeps[i].move();
        sSheeps[i].display();
    }
}

// generate new small sheeps
function addNewSmallSheeps() {
    // add a new small sheep to the end.
    var newSheepLikelihood = 0.05;
    if (random(0,1) < newSheepLikelihood) {
        sSheeps.push(makeSmallSheep(width));
    }
}

// draw farer (smaller) sheeps in the field
function smallSheepDisplay() {
    push();
    translate(this.x+20,height-150+this.scatter);
    // legs
    stroke(60);
    strokeWeight(1);
    var loc1 = random (5,6);
    line(this.x-5,loc1-5,this.x-5,loc1+6);
    line(this.x+5,loc1-5,this.x+5,loc1+6);
    //body
    strokeWeight(0.5);
    fill(255);
    stroke(200);
    ellipse(this.x, loc1-1.5, this.fat+10, 10);
    fill(150);
    //head
    ellipse(this.x-9, loc1-3, this.fat-4, 6);
    stroke(120);
    pop();
}

// smalls sheep object
function makeSmallSheep(pop) {
    var sSheep = {x: pop,
                fat: 10,
                speed: -0.5,
                move: oMove,
                scatter: random(20),
                display: smallSheepDisplay}
    return sSheep;
}

// function for drawing moving sun
function Sun (){
  for (var i = 0; i < width; i++) {
      var t = (i * 0.003) + (millis() * 0.0002);
      fill(250,200,100);
      ellipse(width-t-25,100,50,50);
  } noFill();
}

// to creste Landscape
function Hill(){
  fill(70,175,100);
  noStroke();
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * 0.00002);
      var y = map(noise(t), 0,1, 100, height-100);
      vertex(x, y);
      vertex(0,height);
      vertex(width,height);
  }
  endShape();
}

I was imagining the view one could get while seating on a train and looking out to the fields in Australia. The larger and smaller sheep suggests their distance to the person. As time passes the sun also moves with the viewer. As I am not familiar with objects, this project is much harder for me as it is working with objects.