Category: Section A

Yingyang’s Landscape

//Yingyang Zhou
//yingyanz@andrew.cmu.edu
//project 10
//section A

var pikachu;
var pikachuSpeed = 0.0005;
var clouds = [];

function preload(){
  pikachu = loadImage("https://i.imgur.com/pDhuoY9.png");
}

function setup(){
  createCanvas(360, 480);
  for(var i = 0; i < 10; i++){
    var cloudX = random(width);
    clouds[i] = makeCloud(cloudX);
  }
  frameRate(10);
}

function draw(){
  background(238, 168, 180);


  updateAndDisplayClouds();
  removeCloudsSlippedOut();
  addNewClouds();

  airfoil();
  windowFrame();

}
function airfoil(){
  //airfoil
  noStroke();
  fill(200, 92, 27);
  triangle(240, 250, 250, 210, 280, 270);
  fill(230, 92, 27);
  triangle(360, 400, 240, 250, 360, 300);
}

function windowFrame(){
  rectMode(CENTER);
  noFill();
  stroke(70);
  strokeWeight(70);
  rect(width/2, height/2, width+20, height+20,120);
  stroke(100);
  strokeWeight(30);
  rect(width/2, height/2, width-30, height-30, 130);
}

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

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

function addNewClouds(){
  var newCloudsLikelyhood = 0.005;
  if (random(0,1) < newCloudsLikelyhood){
    clouds.push(makeCloud(width));
  }
}

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

function cloudsDisplay(){
  //moutain
  var terrainSpeed = 0.00125;
  var terrainDetail = 0.01;
  stroke(45, 100, 40, 90);
  beginShape();
  for (var l = 0; l < width; l++) {
      var v = (l * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(v), 0,1, 110, height - 50);
      line(l,y+200,l,height+200);
  }
  //cloud
  fill(0, 0, 222, 45);
  noStroke();
  push();
  translate(this.x, height);
  ellipse(80, -30, 100, 30);
  ellipse(15, -80, 100, 50);
  ellipse(0, -200, 240, 30);
  ellipse(20, -300, 200,10);
  ellipse(50, -240, 100, 40);
  ellipse(0, -220, 300, 50);
  ellipse(500, -30, 100, 30);
  ellipse(200, -80, 100, 50);
  ellipse(100, -200, 240, 30);
  ellipse(200, -300, 200,10);
  ellipse(500, -240, 100, 40);
  ellipse(800, -220, 300, 50);
  image(pikachu, 30, -height/2+random(-2,2), pikachu.width/10, pikachu.height/10);
  pop();
  endShape();
}

function makeCloud(birthLocationX){
  var cloud = {x: birthLocationX,
               breadth: 50,
               size:round(random(30, 240)),
               speed: -5.0,
               move:cloudsMove,
               display:cloudsDisplay}
  return cloud;
}

My original idea is to make a sunrise and sunset scene and I changed my mind later thinking that it might be an interesting idea to engaged with some image elements so I picked a pikachu to be flying outside my airplane cabin.

sketch

// Sara Frankel
// sfrankel
// Project 10
// Section A

var speed = 0.00025;
var detail = 0.001;
var sheeps = new Array(480);
var numNoDraw = 0;
var clouds = new Array(480);
var numNoDrawC = 0;
var cloudY = new Array(12);
var cloudCount2 = 0;
var sheepcolors = new Array(12);
var colorCount = 0;
var herderURL;
var sheepStatus;

function preload() {
	herderURL = loadImage("https://i.imgur.com/f7HUFMr.png?1");//uploads image of shepard into 
}

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

function draw() { 
	background('lightblue');
//____________________________________________

	if(sheeps[0]) {
		shiftLeft(sheepcolors);//inserts random colors from array and shifts it over so that the value is not the same everytime
		//(makes sure the x point of the object moves with the point)
		colorCount--;
	}
	shiftLeft(sheeps);//
	if(numNoDraw === 0) {
		sheeps[479] = (random(0, 1) <= 0.05);//using a random 5% chance the sheep will be on the point
	} else {
		sheeps[479] = false;//there will be no sheep directly after
		numNoDraw--;
	}	
	if(sheeps[479]) {
		sheepcolors[colorCount] = random(0, 255); //each sheep will have a different random grey scale color
		if (colorCount === 11) {
        } else {
			colorCount++;
		}
		numNoDraw = 40;//there will be no sheeps every 40 pixels
	}
//____________________________________________
    
	if(clouds[0]) {
		shiftLeft(cloudY); //shifts cloud to the left so that the object moves with the x point change
		cloudCount2--;
	}

    shiftLeft(clouds);
    clouds[479] = false;//shift left and ensures last is set to default value (false)
	if(numNoDrawC === 0) {
	    clouds[479] = random(0,1) <= 0.01; //probility of if the cloud will be on the sreen in a specific point
    } else {
    	numNoDrawC--;
    }
    if(clouds[479]) {
    	numNoDrawC = 40;
    	cloudY[cloudCount2] = random(150,250); //randomly positions clouds between y points 150-250
  		if(cloudCount2 === 12){ //there cannot be more than 12 clouds (each cloud must be spaced at least 40 pixels from the last)
  		} else {
  			cloudCount2++;//increases number of clouds
  		}
    }

//______________________________________________

	noFill();
	beginShape();
	var cloudCount = 0;
	var sheepCount = 0; 
	for (var i = 0; i < width; i++) {
		var j = (i * speed) + (millis() * speed);
		var y = map(noise(j), 0, 1, height/2, height);//utilizes noise function 
		vertex(i, y);
		stroke('green');
		line(i, y, i, height);

		if(sheeps[i]) {
			sheep(i,y - 5, sheepcolors[sheepCount]);//places sheep on positions of the noise
			sheepCount++; //increases sheep count
		}

		if(clouds[i]) {
			cloud(i, y - cloudY[cloudCount]);//places clouds in position relative to noise
			cloudCount++;//increase cloud count
		}

		image(herderURL, 350, y + 30, 60, 60);//puts sheep herder on screen
	}
	endShape();
}

//draws sheep at given x, y coordinate and given face color 
function sheep(x, y, col) {
	beginShape();
	stroke(255);
	fill(255);
    ellipse(x, y, 10, 10);
    ellipse(x + 5, y + 5, 10, 10);
    ellipse(x + 10, y + 5, 10, 10);
    ellipse(x + 15, y, 10, 10);
    ellipse(x + 10, y - 5, 10, 10);
    ellipse(x + 5, y - 5, 10, 10);
 	fill(col);
    ellipse(x - 5, y, 10, 10);
    fill(255);
    endShape();
}

//draws clouds at given cx and cy
function cloud(cx, cy) {
	beginShape();
	stroke(255);
	fill(255);
	ellipse(cx, cy, 20, 20);
	ellipse(cx + 10, cy + 9, 20, 20);
	ellipse(cx + 20, cy + 9, 20, 20);
	ellipse(cx + 30, cy, 20, 20);
	ellipse(cx + 20, cy - 9, 20, 20);
	ellipse(cx + 10, cy - 9, 20, 20);
	endShape();
}

//uses for loop to help shift an array over so that you never reach the "end" of it
function shiftLeft(array){
	for(var r = 0; r < array.length - 1; r++) {
		try {
			array[r] = array[r+1];
		} catch(e) {
		}
	}
}

For my project, I decided that Shepard and their sheep was quite fitting. At first I was uncertain on how I will execute this project. I found that using an image for the Shepard and a cute little drawn image of the sheep would be quite fitting. Nothing would also be fluffier than white random clouds that go with it. Especially with the pain of this previous week, I felt that something calmer like “counting sheep” would be best.

^ Image of my original sketch

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.

sketch

var mountains = [];
var grass = [];
var stars = [];


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

    stars.push(makeStar());

    for(var j = 0; j < 10; j++){
    mountains.push(makeMountainPoint(width + j*80));
    }

    grass.push(makeGrass());
}


function draw() {
    background(25, 25, 112);
    drawGround();

    updatePositions(); 
    updateArrays();

    newStar(); //one star per x position
    newMountainPoint(); //one mountain point per x position
    newGrass(); //one grass per x position

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

    mountainDisplay();

    for(var k = 0; k < grass.length; k++){
        grass[k].display();
    }

   // textSize(32);
    //text(mountains.length, 240, 240);

}

function drawGround(){
    noStroke();
    fill('green');
    rect(0, 320, 480, 160);
    noFill();
}

function updatePositions(){
    // Update positions of stars, mountains, and grass
    for (var i = 0; i < stars.length; i++){
        stars[i].move();
    }

     for (var j = 0; j < mountains.length; j++){
        mountains[j].move();
    }

     for (var k = 0; k < grass.length; k++){
        grass[k].move();
    }
}

function updateArrays(){ //updating all arrays to delete objects that have gone offscreen
    var starsremaining = []; //temporary transfer array
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x > 0) { //if the star is still in frame, put in transfer array
            starsremaining.push(stars[i]); 
        }
    }
    stars = starsremaining; //update normal array, oldest stars now deleted

    var mountainsremaining = []; //temporary transfer array
    for (var j = 0; j < mountains.length; j++){
        if (mountains[j].x > -80) { //deletes the oldest mountain point only until the second oldest point is at the border
            mountainsremaining.push(mountains[j]); 
        }
    }
    mountains = mountainsremaining; //update normal array, oldest mountain point now deleted

    var grassremaining = []; //temporary transfer array
    for (var k = 0; k < grass.length; k++){
        if (grass[k].x > 0) { //deletes the oldest mountain point only until the second oldest point is at the border
            grassremaining.push(grass[k]); 
        }
    }
    grass = grassremaining; //update normal array, oldest mountain point now deleted

}

function newMountainPoint() {
    if (mountains[6].x < 480 & mountains.length < 10) { //generates new point only if last point has passed onto the screen 
        var onebefore = mountains[mountains.length-1].x;
        mountains.push(makeMountainPoint(onebefore + 80));
    }
}

function newStar(){
    if (random(0, 100) < 10){ //makes a star at x position 10% of the time
        stars.push(makeStar());
    }
}

function newGrass(){
    if (random(0,10) < 8){ //makes a grass stalk at x position 80% of the time
        grass.push(makeGrass());
    }
}


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

function mountainMove(){
    this.x -= this.speed;
}

function grassMove(){
    this.x -= this.speed;
}
    

// draw the building and some windows
function starDisplay() {
    stroke('white');
    strokeWeight(this.starsize);
    point(this.x, this.y);
}

function mountainDisplay(){ //displays mountain range all at once, as each line segment uses two array elements
    strokeWeight(1);
    stroke('grey');
    for(var j = 0; j < mountains.length - 1; j++){
        line(mountains[j].x, mountains[j].y, mountains[j+1].x, mountains[j+1].y);
    }
}

function grassDisplay(){
    strokeWeight(3);
    stroke('green');
    line(this.x, 320, this.x, 320 - this.stalkheight);

    if(this.flower < 1){ //grows a flower 10% of the time
        strokeWeight(8);
        stroke('yellow');
        point(this.x, 320-this.stalkheight);
    }
}


function makeStar(){
    var star = {x: width, //stars spawn at the right edge
                pointdistance: 40,
                speed: 3,
                starsize: round(random(0, 4)),
                y: round(random(0,160)),
                move: starMove,
                display: starDisplay}
    return star;
}

function makeMountainPoint(spawnpoint) {
    var mountain = {x: spawnpoint, //mountain peaks spawn past the right edge
                pointdistance: 40,
                speed: 5,
                y: round(random(160,280)), //height of the point
                move: mountainMove}
    return mountain;
}

function makeGrass(){
    var stalk = {x: 480, //grass at the right edge
                pointdistance: 40,
                speed: 7,
                stalkheight: round(random(0,30)), //height of the grass stalk
                move: grassMove,
                flower: random(0,10), //determines whether stalk grows a flower or no
                display: grassDisplay}
    return stalk;
}

This project was inspired by Tiny Wings, specifically the peaceful nighttime scene in which a starry night sky slowly drifts by. I wanted to have a green lawn foreground for extra serenity.

The stars and grass were easy to implement, but I had trouble rendering and generating new instances of the mountain peaks. Because I wanted a continuous mountain ridge, the objects being generated were points, and so the display function was an external function that processed the entire mountains array. Difficulty was also had in timing when a new mountain point would be generated; while grass and stars were generated all the time and deleted whenever they went off-screen, mountain points could only be deleted when the second oldest point started to go offscreen in order to leave no gaps. In the same vein, new mountain points needed to be generated off-screen on the other side.