Month: November 2017

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 10

var coralspeed = 0.0004;
var coralDetail = 0.005;
var largercoralspeed = 0.0001;
var largercoralDetail = 0.01;
var terrainSpeed = 0.0005;
var terrainDetail = 0.002;

var filearray = [];
var files = [
    "https://i.imgur.com/iWIzq30.png",//coral image
    "https://i.imgur.com/UaGovr7.png",//fish image
    "https://i.imgur.com/kzzaYE9.png"]//golden fish image
var corals = []; //5 every time
var fishes = []; //8 every time
var rarefishes = [];

function preload() {
  for (i = 0; i < files.length; i++){ //preload body
    filearray.push(loadImage(files[i]));
  }
}

function setup() {
	createCanvas(400, 400);
	frameRate(10);

  for(i = 0; i < 5; i++){
    corals.push(makeCoral()); //number of coral
  }
  for(i = 0; i < 8; i++){
    fishes.push(makeFish()); //number of fish
  }
  for(i = 0; i < 1; i++){
    rarefishes.push(makeRareFish()); //one gold fish
  }

}

function draw(){
	background(3,23,71);
	sandandcoral();

  for(i = 0; i < corals.length; i++){ //drawing and moving coral
    corals[i].draw();
    corals[i].move();
  }
  for(i = 0; i < fishes.length; i++){ //drawing and moving fish
    fishes[i].draw();
    fishes[i].move();
  }
  for(i = 0; i < rarefishes.length; i++){ //drawing and moving rarefish
  rarefishes[i].draw();
  rarefishes[i].move();
  }

  }


//rarefish

function makeRareFish(){
  var rarefish = { rimage: filearray[2],
            rxPos: random(0, width),//random initial x position
            ryPos: random(50, 200), //random y position
            rwidth: random(45, 80), //random width
            rheight: random(45, 70), //random height
            rSpeed: random(-2, -6), //random speed
          }
  rarefish.draw = drawRareFish; //calls to drawFish
  rarefish.move = moveRareFish; //calls to moveFish
  return rarefish;

}

function drawRareFish(){ //draws rare fish
  image(this.rimage, this.rxPos, this.ryPos, this.rwidth, this.rheight);

}

function moveRareFish(){ //moves rare fish
  this.rxPos += this.rSpeed;
  if (this.rxPos < 0){
    this.rxPos = width; //remakes fish once it hits the end
  }
}


//FISH

function makeFish(){
  var fish = { fimage: filearray[1],
            fxPos: random(0, width),//random initial x position
            fyPos: random(50, 250), //random y position
            fwidth: random(45, 80), //random width
            fheight: random(45, 70), //random height
            fSpeed: random(-2, -6) //random speed
          }
  fish.draw = drawFish; //calls to drawFish
  fish.move = moveFish; //calls to moveFish
  return fish;
}

function drawFish(){ //draws fish
  image(this.fimage, this.fxPos, this.fyPos, this.fwidth, this.fheight);

}

function moveFish(){ //moves fish
  this.fxPos += this.fSpeed;
  if (this.fxPos < 0){
    this.fxPos = width; //remakes fish once it hits the end
  }
}


//CORAL

 function makeCoral(){ //object coral
  var coral = { cimage: filearray[0],
            cxPos: random(0, width), //random initial x position
            cyPos: random(300, 350), //random y position
            cSize: random(35, 100), //random size
            cSpeed: random(-5, -10) //random speed
          }
  coral.draw = drawCoral; //calls to drawCoral function
  coral.move = moveCoral; //calls to moveCoal function
  return coral;
}


function drawCoral(){ //draw coral
  image(this.cimage, this.cxPos, this.cyPos, this.cSize, this.cSize);

}

function moveCoral(){ //moving coral
  this.cxPos += this.cSpeed;
  if (this.cxPos < 0){
    this.cxPos = width; //remakes coral once it hits the end
  }
}


//TERRAIN

function sandandcoral() {

  //larger coral background
  beginShape();
  noStroke();
  fill(2,13,39);
  for (var x = 0; x < width; x++) {
      var t = (x * largercoralDetail) + (millis() * largercoralspeed);
      var y = map(noise(t), 0,1, 300, height-400);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //coral background
  beginShape();
  noStroke();
  fill(37,62,103);
  for (var x = 0; x < width; x++) {
      var t = (x * coralDetail) + (millis() * coralspeed);
      var y = map(noise(t), 0,1, 400, height-250);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //sand
  beginShape();
  noStroke();
  fill(167,159,146);
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(t), 0,1, 300, height);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

}

I had a lot of difficulty with this project since I still wasn’t fully comfortable with making objects and I ran into a the issue of having too many ideas and not knowing how to implement all of them.

My initial idea was to randomize different colored fish with a shark appearing onlysometimes while pieces of coral moved by with the sand terrain.

My final idea only implements randomly sized fish, one randomly sized golden fish, and some coral that moves past with the changing terrain. However, I’m pretty happy with the final product. It doesn’t look the exact way I wanted it too, but happy accidents are okay too.

sunken

var ruins = [];
var farRuins = [];
var fog = [];

var skyColor;


function setup() {
    createCanvas(480,300);
    angleMode(DEGREES);

    for (var c = 0; c < 10; c++) {
      // populate arrays
      var ruinX = random(width);
      var farRuinX = random(width);
      ruins[c] = makeRuin(ruinX);
      farRuins[c] = makeFarRuin(farRuinX);
      for(var d = 0; d<2; d++){
        var fogX = random(width);
        fog[c] = makeFog(fogX);
      }
    }
    skyColor = color(220, 233, 239);

}

function draw() {
  background(skyColor);

  sunDraw();
  sunMove();

  fill(210, 223, 229);
  noStroke();
  rect(0, 180, width, 120);

  // draw the rest of the objects in the scene
  for(var i = 0; i < farRuins.length; i++) {
    farRuins[i].draw();
    farRuins[i].move();
  }

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

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

// FOG
function fogDraw() {
  push();
  translate(this.xPos, this.yOffset);
  stroke(255, 255, 255, 40);
  strokeWeight(this.fHeight);
  line(0, 0, this.fSize, 0);
  pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function fogMove() {
  this.xPos += this.speed;
  if(this.xPos < 0 - this.fSize - 30) {
    this.fHeight = random(10, 50);
    this.fSize = random(30, 150);
    this.xPos = width + this.fSize + random(-25, 25);
  }
}

function makeFog() {
  var fog = {xPos: random(width), //, width*4
                 speed: random(-0.4, -0.3),
                 fSize: random(30, 150),
                 fHeight: random(20, 60),
                 yOffset: random(50, height),
                 draw: fogDraw,
                 move: fogMove};
  return fog;
}
// END FOG

// SUN
var sun = {xPos: 20, size: 20, speed:.1};

function sunDraw() {
  var sunColor = color(234, 229, 228);
  noStroke();
  fill(252, 202, 191);
  ellipse(sun.xPos, 60, sun.size);

  // make a gradient, centered around the sun
  for (var s = 0; s <= width; s += 5) {
    var amt = map(s, 0, height, 0, 1);
    var gradient = lerpColor(sunColor, skyColor, amt);
    noFill();
    stroke(gradient);
    strokeWeight(5);
    ellipse(sun.xPos, 60, sun.size + s);
  }
}

function sunMove() {
  sun.xPos += sun.speed;
  if (sun.xPos > width + sun.size) {
    sun.xPos = 0 - sun.size;
  }
}
// END SUN

// RUINS
function ruinDraw(){
  push();
  translate(this.xPos - this.rWidth/2, height-40+this.yPosOffset);
  noStroke();
  fill(245, 245, 255);
  beginShape();
  vertex(0 + this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  // draw reflections
  scale(1, -1);
  fill(245, 245, 255, 60);
  beginShape();
  vertex(0 + this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function ruinMove(){
  this.xPos += this.speed;
  if (this.xPos < 0 - this.rWidth) {
    this.rHeight = random(15, 40);
    this.rWidth = random(10, 60);
    this.lean = random(0, 20);
    this.xPos = width + this.rWidth + this.lean + random(-5, 50);
  }
}

function makeRuin(x) {
  var ruin = {xPos: x,
              rHeight: random(15, 60),
              rWidth: random(10, 80),
              lean: random(0, 20),
              spike1: random(0, 10),
              valley1: random(0, 10),
              spike2: random(0, 10),
              valley2: random(0, 10),
              spike3: random(0, 10),
              valley3: random(0, 10),
              yOffset: random(-5, 5),
              yPosOffset: random(-15, 15),
              speed: random(-.4, -.5),
              draw: ruinDraw,
              move: ruinMove}
  return ruin;
}
// END RUINS

// FAR RUINS
function farRuinDraw(){
  push();
  translate(this.xPos - this.rWidth/2, height-90);
  noStroke();
  fill(233, 237, 244);
  beginShape();
  vertex(0 + this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2, 0 + this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  // draw reflections
  fill(233, 237, 244, 60);
  scale(1, -1);
  beginShape();
  vertex(0 + this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2, 0 - this.yOffset);
  vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

  vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

  vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
  endShape(CLOSE);
  pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function farRuinMove(){
  this.xPos += this.speed;
  if (this.xPos < 0 - this.rWidth) {
    this.rHeight = random(50, 100);
    this.rWidth = random(40, 100);
    this.lean = random(0, 50);
    this.xPos = width + this.rWidth + this.lean + random(-5, 50);
  }
}

function makeFarRuin(x) {
  var farRuin = {xPos: x,
              rHeight: random(50, 100),
              rWidth: random(40, 100),
              lean: random(0, 50),
              spike1: random(0, 10),
              valley1: random(0, 10),
              spike2: random(0, 10),
              valley2: random(0, 10),
              spike3: random(0, 10),
              valley3: random(0, 10),
              yOffset: random(-15, 15),
              speed: random(-.4, -.2),
              draw: farRuinDraw,
              move: farRuinMove}
  return farRuin;
}
// END FAR RUINS

 I wanted to create a landscape that had something to do with water, and ended up going with icebergs or jagged ruins drifting through a pale sea. The size and shape of the icebergs are all randomly determined, as are the fog clouds. I had also wanted to extra “surprise” elements to the landscape (a sunken ship, and a glimpse of a sea serpent) but I ran out of time and wasn’t able to implement them the way I had planned.

hamza

//hamza qureshi
//hqq@cmu.edu
//section e
//project 10: generative landscapes

var bird = []; //new index to draw image of bird
var frame = 0; //frames
var aspeed = 0.0005; //speeds for various cloud layers
var bspeed = 0.0007;
var cspeed = 0.0009;
var dspeed = 0.00099;
var change = 0.007;
var bchange = 0.009;
var cchange = 0.006;
var dchange = 0.005;

function preload(){
    var birdframes = []; //each frame of bird image
    birdframes[0] = "https://i.imgur.com/bQsrqmu.png"
    birdframes[1] = "https://i.imgur.com/K5dXjwK.png"
    birdframes[2] = "https://i.imgur.com/kK4kW4t.png"
    birdframes[3] = "https://i.imgur.com/K5dXjwK.png"

    for (var i = 0; i < birdframes.length; i++){
        bird.push(loadImage(birdframes[i])); //push bird frames into array
    }
}

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

function draw(){
    background(220,240,225);

    noStroke(); //shades of the sky
    fill(230, 240, 225);
    rect(0,width/5,width,height);
    fill(240,240, 200);
    rect(0, width/4, width, height);
    fill(250,241,185);
    rect(0,width/3,width,height);
    fill(255,208,121); //sun
    ellipse(width/2,height/2,200,200);

    backclouds(); //functions for the cloud layers
    backmiddle();
    frontmiddle();
    frontclouds();

//bird 1
    push();
    scale(0.4);
    image(bird[frameCount%4], 800, 100);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

//bird 2
    push();
    scale(0.1);
    image(bird[frameCount%4],1400, 1400);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

//bird 3
    push();
    scale(0.2);
    image(bird[frameCount%4], 1000, 1000);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

    //airplane wing
    push();
    noStroke();
    fill(255,150,150);
    triangle(360,200,420,240,370,160);
    fill(248);
    triangle(480,480,360,200,480,280);
    fill(254);
    triangle(360,200,480,280,480,210);

    //airplane window
    stroke(245);
    strokeWeight(70);
    noFill();
    rect(0,0,width,height,75,75);
    pop();

}

function backclouds(){ //back row of clouds
    push();
    noStroke();
    beginShape();
    fill(219,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*change) + (millis()*aspeed);
        var y = map(noise(k), 0,1, 190, height/2); //noise remaps change vs speed
        vertex(0, height); //to draw high and low-points in the shape
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function backmiddle(){ //repeated for middle
    push();
    noStroke();
    beginShape();
    fill(229,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*bchange) + (millis()*bspeed);
        var y = map(noise(k), 0,1, 260, height/2);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function frontmiddle(){
    push();
    noStroke();
    beginShape();
    fill(239,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*cchange) + (millis()*cspeed);
        var y = map(noise(k), 0,1, 320, height/2);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function frontclouds(){ //and repeated for end
    push();
    noStroke();
    beginShape();
    fill(249,246,249);
    for (var x = 0; x < width; x++){
        var k = (x*dchange) + (millis()*dspeed);
        var y = map(noise(k), 0,1, 500, height/3);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

For this project, I wanted to mimic a simulation of looking out of the window on an airplane. Thus, the “landscape” is actually a multi-layered blanket of clouds that move at varying speeds depending on its distance from the airplane. To get a bit more whimsical, I used image animations to show birds somehow flying alongside the plane – maybe they’re robots?

This was a fun method of creating a scene that was just interesting to watch over time, as the varying changes create different intensities of each of the layers.