Category: Section D

sketch

//Jenny Zhang
//jennyzha@andrew.cmu.edu
//Section D
//Project 10

var bird1;
var bird2;
var bird3;

var bird1X = 500;
var bird1Y = 150;
var bird2X = -200;
var bird2Y = 100;
var bird3X = 650;
var bird3Y = 200;

var birdWidth = 40;
var birdHeight = 30;

var cloud1;
var cloud2;
var cloud3;

var cloud1X = 700;
var cloud1Y = 60;
var cloud2X = 540;
var cloud2Y = 40;
var cloud3X = 700;
var cloud3Y = 60;

var cloudWidth = 40;
var cloudHeight = 30;

function preload() {
	bird1 = loadImage("https://i.imgur.com/nqLPhAm.png");
	bird2 = loadImage("https://i.imgur.com/nqLPhAm.png");
	bird3 = loadImage("https://i.imgur.com/nqLPhAm.png");
	
	cloud1 = loadImage("https://i.imgur.com/rkkaoGb.png");
	cloud2 = loadImage("https://i.imgur.com/rkkaoGb.png");
	cloud3 = loadImage("https://i.imgur.com/rkkaoGb.png");
}

function setup() {
	createCanvas(480,280);
	frameRate(120);
}

function draw(){
	background(248,248,255);
	drawhill();
	drawhill1();
	drawhill2();
	drawbird();
	drawcloud();
}


//draws the hilly background
var terrainSpeed = 0.00095;
var terrainSpeed1 = 0.0008;
var terrainSpeed2 = 0.00065;
var hill = 0.020;

function drawhill() {  
    noStroke();
    fill(154,205,50); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed);
            var y = map(noise(t), 0, .95, 120, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}

function drawhill1() {  
    noStroke();
    fill(85,107,47); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed1);
            var y = map(noise(t), 0, .8, 140, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}

function drawhill2() {  
    noStroke();
    fill(0,100,0); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0, .65, 160, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}


//draws the birds
function drawbird() {
	image(bird1, bird1X, bird1Y, birdWidth, birdHeight);
	bird1X -= random(1,2);
	bird1Y -= random(-0.5,0.5);

	if (bird1X < -birdWidth) {
		bird1X = 500;
	}

	image(bird2, bird2X, bird2Y, birdWidth, birdHeight);
	bird2X += random(0,0.5);
	bird2Y += random(-0.5,0.5);

	if (bird2X < -birdWidth) {
		bird2X = -100;
	}

	image(bird3, bird3X, bird3Y, birdWidth, birdHeight);
	bird3X -= random(0,2);
	bird3Y -= random(-0.5,0.5);

	if (bird3X < -birdWidth) {
		bird3X = 650;
	}
}

function drawcloud() {
	
	image(cloud1, cloud1X, cloud1Y, cloudWidth, cloudHeight);
	cloud1X -= random(0,2.5);
	cloud1Y -= random(-.25,.25);

	if (cloud1X < -cloudWidth) {
		cloud1X = 690;
	}

	image(cloud2, cloud2X, cloud2Y, cloudWidth, cloudHeight);
	cloud2X -= random(0,2.5);
	cloud2Y -= random(-.25,.25);

	if (cloud2X < -cloudWidth) {
		cloud2X = 530;
	}

	image(cloud3, cloud3X, cloud3Y, cloudWidth, cloudHeight);
	cloud3X -= random(0,2.5);
	cloud3Y -= random(-.25,.25);

	if (cloud3X < -cloudWidth) {
		cloud3X = 600;
	}	
}

With the cold weather coming upon us, I decided to create a spring theme as I begin to miss the warmer weather. Importing pictures from imgur using the preload function for the birds and clouds, I had them come flying across the screen as the code ran. As for the landscape/background, at first, I only had two hills for the terrain, but didn’t think it was enough and added the third layer. The same was true for the birds and clouds. At first I only had the birds, but then decided to import the clouds as well to create a fuller scene. Ultimately using the noise function, while playing with the inputs each time I was able to create a sense of depth.

aboyle landscape

var fish = [];
var oceanSpeed = 0.0005;
//ocean detail is low to make it look wavy instead of jagged
var oceanDetail = 0.001;
var floorSpeed=0.0004;
//floor detail is high to simulate rocky bottom
var floorDetail=0.02;

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

function draw() {
    background(147,202,243);
//makes ocean
    displayOcean();

//makes fish
    updateAndDisplayFish();
//removes fish that aren't on screen
    removeFishThatHaveSlippedOutOfView();
//adds new fish
    addNewFishWithSomeRandomProbability();

//makes ocean floor
    displayFloor();

}



function updateAndDisplayFish(){
// Update and display the fish
    for (var i = 0; i < fish.length; i++){
        fish[i].move();
        fish[i].display();
    }
}


function removeFishThatHaveSlippedOutOfView(){
//If fish aren't on screen, remove them from the array
//I based this on the provided code
    var fishToKeep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].breadth > 0) {
            fishToKeep.push(fish[i]);
        }
    }
    fish = fishToKeep;
}


function addNewFishWithSomeRandomProbability() {
//with a low probability, add new fish to array
    var newFishLikelihood = 0.009;
    if (random(0,1) < newFishLikelihood) {
        fish.push(makeFish(width));
    }
}


//change position of fish every frame to make them look like they're moving
function fishMove() {
    this.x += this.speed;
}


// draw the fish
function fishDisplay() {
//randomize the color of the fish
//I kept blue at zero so the fish wouldn't blend into water
    fill(this.fRed, this.fGreen, 0);
    noStroke()
    push();
//translate so 0 means the moving x
    translate(this.x, height);
//makes body of fish
    ellipse(0, -this.fPosition, this.fLength, this.fHeight)
//makes tail of fish
    triangle(this.fLength/2-8, -this.fPosition, this.fLength, -this.fPosition+this.fHeight/2,
      this.fLength, -this.fPosition-this.fHeight/2)
//makes eye of fish
    fill(0);
    ellipse(-6,-this.fPosition,6)
    pop();
}

//makes the object of a fish
function makeFish(birthLocationX) {
    var fsh = {x: birthLocationX,
                breadth: 50,
              //randomizes speed
                speed: random(-2.5, -1),
              //randomizes position in water
                fPosition: round(random(50,150)),
              //randomizes length
                fLength: round (random(20,50)),
              //randomizes height
                fHeight: round (random(10,20)),
              //randomizes color
                fRed: random(0,255),
                fGreen: random(0,255),
                move: fishMove,
                display: fishDisplay}
    return fsh;
}


function displayOcean(){
  noFill();
  stroke(55,122,172)
  beginShape();
//generates the ocean using the noise function
  for (var x = 0; x < width; x++) {
      var t = (x * oceanDetail) + (millis() * oceanSpeed);
      var y = map(noise(t), 0,1, 0, 60);
      vertex(x, y);
      rect (x, y, 1, height)
  }
  endShape();
}

function displayFloor(){
  noFill();
  stroke(104,81,47)
  beginShape();
//generates the ocean floor using the noise function
  for (var x = 0; x < width; x++){
    var z = (x * floorDetail) + (millis() * floorSpeed);
    var v= map(noise(z), 0, 1, 200, height)
    rect(x, v, 1, 50)

  }
  endShape();

}

For this project, I knew I wanted to randomize the speed at which the objects crossed the screen. For this to make sense, the object needed to be something that was moving on its own. I thought about a couple of options, including cars, bees, clouds, and hot air balloons. I ultimately decided on fish because I thought I could have fun making the water look like it was moving. You can see my original sketch below.

Although I based this project on the provided code, I tried my best to insert my original ideas. I made the water have a low detail to look like it was calm but still moving. I made the sea floor have a high detail so it looked jagged and rocky. I made the fish move at different speeds, ensured that they would be between the surface of the water and the sea floor, and randomized their colors to some degree. (I set the blue value equal to zero so they would never be blue and blend into the water.) It took some trial and error to figure out the right proportions of the fish tails and how to color in the water and ground, but I figured out both of those eventually. I had some trouble with making objects in the past, so although the code is simple I’m proud of it. However, I glanced through other projects and noticed a lot of other people decided to something with fish, so in retrospect I wish I could’ve been more original. Overall, though, still a fun project!

landscape

//Daphne Lee
var terrainSpeed = 0.0003;
var terrainCurves = 0.001;
var jx=280;
var jy=300;
var jw=107;
var jh=149;
var jx2=240;
var jy2=280;
var jw2=72;
var jh2=100;
var cx=0;
var cy=390
var cw=113;
var ch=75;
var kx=0;
var ky=350;
var kw=249;
var kh=250;

function preload(){
    jellyfish1 = loadImage("https://i.imgur.com/7ELhX6R.png?1");
    jellyfish2 = loadImage("https://i.imgur.com/Uhau0GX.png?1")
    crab = loadImage("https://i.imgur.com/tPxrvjd.png?1")
    kelp= loadImage("https://i.imgur.com/OZH9VCf.png?1")
}
function setup() {
    createCanvas(480, 480);
}

function drawSeaAndFloor(){
        beginShape();
        noStroke(0);
    //sea
    beginShape();
    fill(51, 204, 204);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainCurves) + (millis() * terrainSpeed*2);
        var y = map(noise(t/2), 0,1, 0, 400);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
    //floor
        beginShape();
        fill(204, 153, 102);
        for (var x = 0; x < width; x++) {
        var t = (x * 2* terrainCurves) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 400, height);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
}
function drawJellyfish(){
    //the bigger jellyfish moving left
    image(jellyfish1,jx,jy,jw,jh);
    jx-=random(0.5,1);
    jy-=random(-0.5,0.5);
    if(jx<-jw){
        jx=480;
    }
    image(jellyfish2,jx2,jy2,jw2,jh2);
    //smaller jellyfish moving right;
    jx2+=random(-0.5,2);
    jy2+=random(-0.5,0.5);
    if(jx2>width){
        jx2=-100;
    }
}
function drawCrab(){
    //crab
    image(crab,cx,cy,cw,ch);
    cx+=random(0.1,2);
    cy+=random(-0.5,0.5);
    if(cx>width){
        cx=-100;
    }
}
function drawKelp(){
    image(kelp,kx,ky,kw,kh);
    kx+=random(0.5,2);
    ky+=random(-0.5,0.5);
    if(kx>width){
        kx=-250;
    }
}

function draw(){
    background(179, 236, 255);
    drawSeaAndFloor();
    drawJellyfish();
    drawCrab();
    drawKelp();
    //sun
    fill(255, 255, 0);
    ellipse(20,20,150,150)
}

I started off with the idea of wanting to make an ocean with sea creatures swimming inside. I tried starting off with clouds but it didn’t really end up the way I wanted to. I decided to use photos to depict these sea creatures and the first picture I stumbled upon was a jellyfish. I started off with one, and then added another one. It was hard for me to figure out how to work with using objects so I ended up going a simpler route that felt more straightforward in my opinion. I tried to make the ocean more realistic looking so I added some kelp and a crab to add more details to it. I didn’t have enough time to try to incorporate some of the other ideas I had such as working with more objects and creating new functions to relate them to and getting a clearer understanding on how these objects move.

jiheek1_project10_sketch

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//Project 10 Landscape
//section D


var stars = []; // an array of all stars
var clouds = []; // an array of all clouds


function setup() {
    createCanvas(480, 380);
    // initialize stars
    for (var s = 0; s < 750; s++){ // loop through stars
        var starPositionX = random(width); // the x position of the cloud is
                                           // random along the width of canvas
                                           // the randomness is later set
                                           // in the replaceClouds() function
        var starPositionY = random(0, height-120);
        stars[s] = makeStars(starPositionX, starPositionY);
    }
    // initialize clouds
    for (var i = 0; i < 5; i++){ // loop through clouds
        var cloudPositionX = random(width); // the x position of the cloud is
                                            // random along the width of canvas
                                            // the randomness is later set
                                            // in the replaceClouds() function
        var cloudPositionY = random(height/3, height*2/3);
        clouds[i] = makeCloud(cloudPositionX, cloudPositionY);
    }
}


function draw() {
    //WATER
    fill(11, 19, 71);
    rect(0, height-100, width, 100); // set the very bottom of the canvas as
                                     // water
    //gradient background
    // draw the gradient background for the pink, night sky
    var top = color(198, 96, 113); // pink
	  var bottom = color(11, 19, 71); // deep blue
    Gradient(0, width, top, bottom);
    //STARS
    animateStars();
    hideStars();
    addStars();
    //MOON
    drawMoon();
    //CLOUDS (draw the clouds using functions: animate, hide, and add)
    animateClouds();
    hideClouds();
    addClouds();

}


//BACKGROUND
function Gradient (a, b, top, bottom) {
	  // top to bottom gradient (background)
    for (var i = a; i <= height-100; i++) {
        var mappedC = map(i, a, a+b, 0, 1);
        var c = lerpColor(top, bottom, mappedC);
        stroke(c);
        strokeWeight(2);
        line(a, i, a+b, i);
	  }
}


//STARS
function drawStars() {
	  noStroke();
	  // make stars seem like they're shining by manipulating transparency
	  var transparency = random(30, 100);
	  fill(255, transparency);
	  ellipse(this.x, this.y, 1.2, 1.2);
}


function animateStars() {
    for (var s = 0; s < stars.length; s++) {
        stars[s].move();
        stars[s].draw();
    }
}


function hideStars() {
    // make the clouds that are actually within the canvas to stay
    // if not, hide them
    var starsOnCanvas = [];
    for (var s = 0; s < stars.length; s++){ // go through all clouds
        // if the star is on the canvas
        if (0 < stars[s].x < width) {
            starsOnCanvas.push(stars[s]); // draw the stars that are on the
                                          // canvas
        }
    }
    stars = starsOnCanvas; // update the stars to the ones that are actually
                           // on the canvas
}


function addStars() {
    var randomValStar = 0.01; // a really small chance of stars randomly
                                // being added/generated
    if (random(0,1) < randomValStar) { // because it is not that likely for a
                                      // randomly chosen value to be less than
                                      // 0.0001, this will be a rare occasion
        var starPositionX = random(0, width);
        var starPositionY = random(0, height-120);
        stars.push(makeStars(starPositionX, starPositionY)); // generate new
                                                             // stars along
                                                             // the canvas
    }
}


function starMove() {
	//move stars by updating x coordinate
	this.x += this.speed;
}


function makeStars(starPositionX, starPositionY) {
	  var star = {x: starPositionX,
				       y: starPositionY,
				       speed: -random(0, .005),
				       move: starMove,
			         draw: drawStars}
	  return star;
}


//MOON
function drawMoon() {
    ellipseMode(CENTER);
    noStroke();
    fill(252, 202, 202, 80);
    ellipse(width/2+100, 150, 80); // overlay another ellipse for slight volume
    fill(234, 139, 139, 80);
    ellipse(width/2+100, 150, 75); // draw moon
}

// CLOUDS
function animateClouds() {
    for (var i = 0; i < clouds.length; i++){ // loop through all clouds
        clouds[i].move(); // update the clouds' positions on canvas
        clouds[i].display(); // display the clouds
    }
}


function hideClouds(){
    // make the clouds that are actually within the canvas to stay
    // if not, hide them
    var cloudsOnCanvas = [];
    for (var i = 0; i < clouds.length; i++){ // go through all clouds
        if ((clouds[i].x > 0) + (clouds[i].breadth > 0)) { // if the cloud is
                                                      // on the canvas
            cloudsOnCanvas.push(clouds[i]); // draw the clouds that are on the
                                            // canvas
        }
    }
    clouds = cloudsOnCanvas; // update the clouds to the ones that are actually
                           // on the canvas
}


function addClouds() {
    var randomVal = 0.005; // a really small chance of clouds randomly
                           // being added/generated
    if (random(0,1) < randomVal) { // because it is not that likely for a
                                   // randomly chosen value to be less than
                                   // 0.005, this will be a rare occasion
        var cloudPositionX = random(0, width);
        var cloudPositionY = random(height/3, height-50);
        clouds.push(makeCloud(cloudPositionX, cloudPositionY)); // generate new
                                                                // clouds along
                                                                // on canvas
    }
}


function cloudMove() { // update position of cloud each frame
    this.x += this.cloudSpeed;
}


function cloudDisplay() { // draw clouds
    var cloudHeightFactor = 7; // factor that determines cloud height
    var cloudHeight = this.nFloors * cloudHeightFactor;
    ellipseMode(CENTER);
    fill(242, 209, 214, this.transparency);
    noStroke();

    // higher line of clouds (further down on canvas)
    push();
    translate(this.x, height/2-130);
    ellipse(30, -cloudHeight+120, this.breadth, cloudHeight);
    pop();
    // middle line of clouds (middle on canvas)
    push();
    translate(this.x, height/2-70);
    ellipse(150, -cloudHeight+120, this.breadth, cloudHeight/1.5);
    pop();
    // lower line of clouds (further down on canvas)
    push();
    translate(this.x, height/2);
    ellipse(110, -cloudHeight+120, this.breadth, cloudHeight);
    pop();
}

function makeCloud(cloudPositionX, cloudPositionY) {
    var cloud = {x: cloudPositionX, // x position of clouds
                y: cloudPositionY, // y position of clouds
                transparency: random(10, 80),
                breadth: random(120, 250), // width of clouds
                cloudSpeed: random(0.07, 0.3), // speed at which clouds move
                nFloors: round(random(2,10)),
                move: cloudMove,
                display: cloudDisplay}
    return cloud;
}

For my ever-changing “landscape” I decided to draw a starry night. In order to make the image dynamic, I used components such as the stars and clouds that actually move and generate on it’s own based on a logic that incorporates randomness. I used a color gradient for a more engaging background as well.
I wanted to convey tranquility and I believe that I was able to achieve that goal through employing movements that speak to that.

hyt-10-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-10-Generative-Landscape

var frames = [];
var framesIndex = 0;
var dino = [];

var terrainSpeed = 0.001;
var terrainDetail = 0.005;

var SkySpeed = 0.0003;
var SkyDetail = 0.01;

var t; // terrain in for loop
var y; // terrain y coordinate



function preload() {
    var filenames = [];
    filenames[0] = "https://i.imgur.com/nNc7b23.png";
    filenames[1] = "https://i.imgur.com/XMA7PM4.png";
    filenames[2] = "https://i.imgur.com/kN7pKft.png";
    filenames[3] = "https://i.imgur.com/0BpdBta.png";
    filenames[4] = "https://i.imgur.com/FZ6hBbP.png";
    for (var i = 0; i < filenames.length; i++) {
        frames[i] = loadImage(filenames[i]); 
    }
}

function setup() {
    createCanvas(480, 300); 
    frameRate(10);

    for (var i = 0; i < 5; i++) {
        var rx = random(width);
        dino[i] = makeDinosaur(rx);
    }
}    


function makeStar() {
    stroke(200, 0, 0);
    strokeWeight(8);
    var starx = random(0, width);
    var stary = random(0, height);
    line(starx, stary, starx + 7, stary + 7);
}

// function makeStar2() {
//     stroke(200, 0, 0);
//     strokeWeight(8);
//     var starx2 = random(0, width);
//     var stary2 = random(0, height);
//     line(starx2, stary2, starx2 + 7, stary2 + 7);
// }

// background desert
    
// foreground - terrain that changes color
function makeTerrain() {
    noFill();
    noStroke();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        t = (x * terrainDetail) + (millis() * terrainSpeed);
        y = map(noise(t), 0, 1, 150, height);
        vertex(x, y); 
        stroke(200-frameCount*0.5, 141, 103);
        line(x, y, x, height);
    }
    endShape();
}

// background - make sky 
function makeSky() {
    noFill();
    noStroke();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        t = (x * SkyDetail) + (millis() * SkySpeed);
        y = map(noise(t), 0, 1, 0, 200);
        vertex(x, y); 
        stroke(219, 239, 240, 200, 200); // sky color
        line(x, 0, x, y);
    }
    endShape();
}



// making an object - dinosaur
function makeDinosaur(birthPos) { 
    var dino = {x: birthPos, 
                speed: 1,
                display: displayDinosaur,
                move: moveDinosaur
                }
    return dino;
}

// create dinosaur movement by using frames[]
function displayDinosaur() {
    push();
    scale(0.5);
    //makeDinosaur();
    framesIndex = frameCount % 4; // frameIndex keeps track with the framecount
    image(frames[framesIndex], t, y + 100);
    pop();
}

// give dinosaur speed
function moveDinosaur() {
    this.x += this.speed;
}

function AddNewDinosaur() { 
// With a very tiny probability, add new dinosaur to the end
    var newDinoLikelihood = 0.7; 
    if (random(0,1) < newDinoLikelihood) {
        dino.push(makeDinosaur(width));
    }
}

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

// call function
function draw() {
    background(236, 163, 130, 200);
    makeTerrain();
    makeSky();
    makeStar();
    makeStar();
    UpdateAndDisplayDinosaur();
        AddNewDinosaur();
        displayDinosaur();
}

For this project, I had a concept of creating animation-like short clip of running away, and therefore I captured a GIF from found source and broken into five different images, and then created the foreground and background using the noise() function, and the different dimensions have a changing gradient and opacity based off of the frameCount. Unfortunately the results were not as good as I expected, and I struggled a bit to figure out the objects’ properties and creating the constant movement. Below is a sketch that I have, and I hope to make some other alterations more as I delve more into the concepts.