sketch

/*Curran Zhang
curranz
Project 10
Section A
*/

var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0004;
var terrainDetail2 = 0.008;
var clouds = []; 
var star = [];
var frames = []; 
var characterX;  
var characterY;  

function setup() {
  createCanvas(480, 480);
  //Iniate Clouds
  for (var i = 0; i <5; i++) {
      var r = random(width);
      clouds[i] = makeClouds(r);
  }
  //Human Image Position 
    imageMode(CENTER);
    frameRate(15);
}

function preload(){
    var filenames = [];
      filenames[0] = "http://i.imgur.com/svA3cqA.png";
      filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
      filenames[2] = "http://i.imgur.com/IgQDmRK.png";
      filenames[3] = "http://i.imgur.com/kmVGuo9.png";
      filenames[4] = "http://i.imgur.com/jcMNeGq.png";
      filenames[5] = "http://i.imgur.com/ttJGwkt.png";
      filenames[6] = "http://i.imgur.com/9tL5TRr.png";
      filenames[7] = "http://i.imgur.com/IYn7mIB.png";
    for (var i = 0; i < filenames.length; i++) {
        frames.push(loadImage(filenames[i]));
    }  
}

function draw() {
  //Gradient Background
    var from = color('red');
    var to = color(270);
    gradient(0,width,from,to);

  makeMountain1();
  makeMoon();
  makeStar();
  makeMountain1();
  makeMountain2();
  makeReflection();
  updateClouds();
  removeClouds();
  addClouds();
  makeHuman();
}

function gradient(y,w,from,to){
  for (var i = y; i <= height; i++) {
    var inter = map(i,y,y+w,0,1);
    var col = lerpColor(from,to,inter);
    stroke(col);
    strokeWeight(2);
    line(y,i,y+w,i);
  }
}

function makeStar(){
    fill(270);
    for (var i = 0; i < 100; i++) {
      var starX = random(width);
      var starY = random(height);
      ellipse(starX,starY,1,1);
    }
}

function makeMountain1(){
  noStroke();
  fill(180,0,0); 
  beginShape(); 
  for (var x = 0; x < width; x++) {
    var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
    var y = map(noise(t), 0,1.8, height/8, height);
    vertex(x, y); 
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function makeMountain2(){
  fill(139,0,0); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height/2, height);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeReflection(){
  fill(220,50,50);
    rect(0, 375, width, 105);

  fill(255,60,60); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height, height*.5);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeMoon(){
    noStroke();
    fill(255,20);
    ellipse(2*width/3,height/4,170,170);
    ellipse(2*width/3,height/4,160,160);
    ellipse(2*width/3,height/4,150,150);
    ellipse(2*width/3,height/4,140,140);
    fill(255,200);
    ellipse(2*width/3,height/4,120,120);
}

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

function removeClouds(){
  var keepClouds = [];
  for (var i = 0; i < clouds.length; i++) {
      if (clouds[i].x + clouds[i].breadth > 0) {
        keepClouds.push(clouds[i]);
      }
  }
  clouds= keepClouds;
}

function addClouds(){
  var newCloud = .007;
  if (random(0,1)<newCloud) {
    clouds.push(makeClouds(width))
  }
}

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

function displayClouds(){
  fill(255,50);
  noStroke();
  ellipse(this.x,this.y,this.width,this.height);
  ellipse(this.x +10,this.y +10,this.width-10,this.height-10);
  ellipse(this.x +20,this.y -10,this.width/2,this.height/2);
  ellipse(this.x -20,this.y ,this.width-20,this.height-10);
}

function makeClouds(cloudy){
  var cloud= {x: cloudy,
              y:random(100, height/2),
              speed: random(-.2,-.7),
              width: random(50,100), 
              height:random(20,0),
              breadth:50,
              move:cloudMove,
              display:displayClouds
            }
  return cloud;          
}

function makeHuman(){
  //Human 1
    push();
      translate(width/2+20,365);
      scale(.2,.2);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2+20,385);
      scale(.2,-.2);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 

  //Human 2
    push();
      translate(width/2,367);
      scale(.15,.15);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2,382);
      scale(.15,-.15);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 

  //Human 3 
    push();
      translate(width/2-20,370);
      scale(.1,.1);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2-20,379);
      scale(.1,-.1);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 
}

Whenever I go around exploring and taking pictures, I really like to find reflections produced by waters. Therefore, I decided to do a project where water can be used to make the colors more vibrant. Creating mountains creates a very peaceful and relaxing scene, which is something I desperately want.

sketch

//Jonathan Liang
//jliang2
//section A

var buildings = [];
var lamppost = [];
var tDetail = 0.01;
var tSpeed = 0.0004;
var frames = []; // An array to store the images
var x = 0; //variable to draw image from array
var rexX;  // The X location of the character
var rexY;  // The Y location of the character
var exampleImgOnly;

function preload() {
	var filenames = [];
	filenames[0] = "https://i.imgur.com/pUQqpVN.png";
	filenames[1] = "https://i.imgur.com/075wwQz.png";
	filenames[2] = "https://i.imgur.com/8aFEl6F.png";

	for (var i = 0; i < filenames.length; i++) {
		frames[i] = loadImage(filenames[i]);
	}
	exampleImgOnly = loadImage("https://i.imgur.com/pUQqpVN.png");
}


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

    //initial buildings
    for (var i = 0; i < 11; i++) {
    	var ranx = random(width);
    	buildings[i] = makeBuilding(ranx);
    }
    rexX = 150; 
    rexY = 215; 
    frameRate(10);
    
   
}

function draw() {
	background(255);
	//generate line paper
	for(var y = 0; y < height; y += 10) {
		stroke(200);
		noFill();
		line(0, y, width, y);
	}
	displayHorizon();
	makeMountain();

	//draw objects
	//buildings
	updateAndDisplayBuildings();
	removeBuildings();
	addNewBuilding();
	//trex
	image(frames[x], rexX, rexY, 150, 150);
		x += 1;
		if (x > 2) {
			x = 0;
		}
	
}

function makeMountain() {
	//generates terrain
	stroke(0);
	strokeWeight(2);
	noFill();
	beginShape();
	for (var x1 = 0; x1 < width; x1++) {
		var t1 = (x1 * tDetail) + (millis() * tSpeed);
		var y1 = map(noise(t1), 0, 1, 0, height);
		vertex(x1, y1 - 20);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}

function updateAndDisplayBuildings() {
	//update and display building position 
	for (var i = 0; i < buildings.length; i++) {
		buildings[i].move();
		buildings[i].display();
	}
}

function removeBuildings() {
	//remove buildings that have gone out of view
	var keepBuildings = [];
	for (var i = 0; i < buildings.length; i++) {
		if (buildings[i].x + buildings[i].breadth > 0) {
			keepBuildings.push(buildings[i]);
		}
	}
	buildings = keepBuildings //remember remaining buildings
}

function addNewBuilding() {
	//with very little probability, add new building
	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;
}

//drawing building and windows
function buildingDisplay() {
	//building
	var floorHeight = 20;
	var bHeight = this.nFloors * floorHeight;
	noFill();
	strokeWeight(2);
	stroke(0);
	push();
	translate(this.x, height - 50);
	rect(0, -bHeight, this.breadth, bHeight);
	//windows
	var wGap = this.breadth / 16;
	var xW = this.breadth / 16;
	for (var w = 0; w < 5; w++) {
		for (var i = 0; i < this.nFloors; i++) {
			fill('yellow');
			strokeWeight(1);
			stroke(0);
			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, 12)),
				move: buildingMove,
				display: buildingDisplay}
	return bldg;
}



//draw the ground
function displayHorizon() {
	stroke(0);
	strokeWeight(4);
	noFill();
	line(0, height - 50, width, height - 50);
}

It all starts with an idea, but you can never tell where an idea can end up. Because ideas spread, they change, they grow, they connect us with the world. And in a fast-moving world, where good news moves at the speed of time and bad news isn’t always what is seems. Because when push comes to shove, we all deserve a second chance, to score.

My project is heavily based on doodles I used to do throughout my elementary to high school days. I used to like to draw mountains, buildings, tanks, aliens, and dinosaurs blowing up stuff. I chose to add lines to the background to reflect that lined paper quality and made everything noFill to show that it was just a pen doodle.