link to project: http://charliemo.neocities.org/raining%20night/index.html

Sorry about the late hand-in, this is unacceptable but my goal is to make the best project I possibly can.

I created a world in a bleak distant future where overpopulation and reliance of technology becomes common place. The visuals are inspired by Japanese animator Hayao Miyazaki, who produced the likes of Spirited Away and Howl’s Moving Castle, and I attempted to replicate the style by combining traditional Asian architecture with apartment building commonly found in crowded urban living environments.

*Spacebar to fly!*

sketch

var bird;
var pipes = [];
var build1;
var build2;
var build3;
var build4;
var cloud1;
var cloud2;
var pole;
var drops =[];
//var sound;


function preload(){
  
  build1 = loadImage("assets/building1.png");
  build2 = loadImage("assets/building2.png");
  build3 = loadImage("assets/building3.png");
  build4 = loadImage("assets/building4.png");
  cloud1 = loadImage("assets/cloud.png");
  cloud2 = loadImage("assets/cloud3.png");
  cloud3 = loadImage("assets/cloud4.png");
  pole   = loadImage("assets/pole2.png");
  skyline= loadImage("assets/skyline3.png");
  //rain = loadSound("assets/rain.mp3");
}

function setup() {
  createCanvas(600,800);
    //spawns bird and in setup() so that 
    //the bird can be updated
  bird = new Bird();
    //spawns rainfall
  for (var i = 0; i < 500; i++) {
    drops[i] = new Drop();
  }
  
}

function draw() {
  
  fill(255);
  background(200)
    //background image
  image(skyline,-500,0)
  
  for (var i = 0; i < drops.length; i++) {
    drops[i].fall();
    drops[i].show();
  }

  for (var b = pipes.length-1; b >= 0; b--){
    pipes[b].show();
    pipes[b].update();

  }
    //determines the rate at which
    //sprites are added to the array
  if (frameCount%300 == 0){
    pipes.push(new Build1())
  }
  if (frameCount%200 == 0){
    pipes.push(new Build2())
  }
  if (frameCount%100 == 0){
    pipes.push(new Build3())
  }
  if (frameCount%350 == 0){
    pipes.push(new Build4())
  }
  if (frameCount%500 == 0){
    pipes.push(new Cloud1())
  }
  if (frameCount%400 == 0){
    pipes.push(new Cloud2())
  }
  if (frameCount%320 == 0){
    pipes.push(new Pole())
  }
  if (frameCount%300 == 0){
    pipes.push(new Pole2())
  }
  if (frameCount%310 == 0){
    pipes.push(new Pole3())
  }
  
  bird.update();
  bird.show();
}

    //press to make character fly
function keyPressed(){

  if (key == ' '){
    bird.up();
    //sound.play();
    //calls from Bird function
  }

}

    //determines speed and positioning of the sprites
function Cloud2(){
this.x = width*2;
this.velocity = 0;
this.speed = 3;

  this.show = function(){
    image(cloud2,this.x,50)
  }
 
  this.update = function(){
    
    this.x -= this.speed;
    
  this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
  }
}
function Build1(){
 this.x = width*2;
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build1,this.x,250)

  }
  
  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Build2(){
 this.x = width*2;
 this.w = random(70,120);
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build2,this.x,400)

  }

  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Build3(){
 this.x = width*2;
 this.w = random(70,120);
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build3,this.x,400)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Build4(){
 this.x = width*2;
 this.w = random(70,120);
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build4,this.x,100)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Cloud1(){
this.x = width/6;
this.w = random(70,120);
this.velocity = 0;
this.speed = 1;

  this.show = function(){
    
      image(cloud1,this.x-500,600)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Pole(){
this.x = width*2;
this.w = random(70,120);
this.velocity = 0;
this.speed = 2.5;

  this.show = function(){
    
      image(pole,this.x,230)

  }
  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Pole2(){
this.x = width*2;
this.w = random(70,120);
this.velocity = 0;
this.speed = 2.5;

  this.show = function(){
    
      image(pole,this.x,300)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Pole3(){
this.x = width*2;
this.w = random(70,120);
this.velocity = 0;
this.speed = 2.5;

  this.show = function(){
    
      image(pole,this.x,350)

  }
  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}


    //CHARACTER
function Bird() {
  this.y = height / 2;
  this.x = 300;

  this.gravity = 0.2;
  this.lift = -30;
  this.velocity = 0;

  this.show = function() {
    //character creation
    fill(55);
    noStroke();
    rectMode(CENTER);
    rect(this.x,this.y-30,2,80);
    arc(this.x,this.y-40,50,50,-PI,PI);
    fill(0);
    ellipse(this.x, this.y, 32, 32);
    fill(250, 222, 222);
    ellipse(this.x-5,this.y+2,5,5);
    ellipse(this.x+8,this.y+2,5,5);
  }

  this.up = function() {
    //determines the up speed in terms of 
    //the already established this.lift variable
    this.velocity += this.lift;
  }

  this.update = function() {
    //simulate gravity and updates this.y with 
    //new position
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;
    
    //set boundaries on the canvas
    if (this.y > height) {
      this.y = height;
      this.velocity = 0;
    }

    if (this.y < 0) {
      this.y = 0;
      this.velocity = 0;
    }
  }
}

    //RAIN
function Drop() {
    //random x position
  this.x = random(width);
    //random y position from beyond the canvas
  this.y = random(-500, -50);
  this.len = random(10,20);
  this.yspeed = random(4,10)

  this.fall = function() {
    
      //speed at which the drop will fall
    this.y = this.y + this.yspeed;
      //simulate gravity
    var gravity = 0.4
    this.yspeed = this.yspeed + gravity;

    if (this.y > height) {
        //resets raindrops 
      this.y = random(-200, -100);
      this.yspeed = random(4,10)
    }
  }

  this.show = function() {
    strokeWeight(1);
    stroke(235);
    line(this.x, this.y, this.x, this.y+this.len);
  }
}

sketch

//Charlie MO
//cdmo@andrew.cmu.edu
//Section B

var terrainSpeed = 0.0001;
var terrainSpeed2 = 0.0003;
var terrainDetail = 0.002;

function setup() {
    createCanvas(1000, 1000);
    frameRate(10);
}
 
function draw() {
    background(137, 255, 196);
    
    //mountains
    noStroke();
    fill(255)
    ellipse(700,300,170,170)

    fill(175, 38, 38,30)
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 600, 440);
        vertex(x, y); 
 
        stroke(175, 38, 38,100)
        line(x,y,0,-50) //the line create peaks when connected to the vertex
       
    }
    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, 600, 700);
        vertex(x, y); 
        stroke(186, 27, 27,100)
        line(x+300,y-100,1000,200)

        stroke(186, 27, 27,200)
        line(x+100,y,1000,400)

    }
    endShape();

    //clouds and sea foam
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, 400, 500);
        fill(255,255,255,150)
        noStroke();
        vertex(x+100, y); 
    
    }
    endShape();

    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 300, 170);
        fill(255,255,255,150)
        noStroke();
        vertex(x+700, y); 
      
    }
    endShape();


    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 300, 170);
        fill(255,255,255,150)
        noStroke();
        vertex(x+100, y-100); 
    }

    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 600, 800);
        fill(255,255,255,150)
        noStroke();
        vertex(x, y); 
	}

    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 700, 800);
        fill(255,255,255,150)
        noStroke();
        vertex(x+200, y+100); 
    
    }
    endShape();

}

sketch

var r= 230;
var g= 250;
var b= 250;

function setup() {
    createCanvas(600, 600);
    //background(r, g, b);
}
function draw() {
	background(r, g, b,20);
	angleMode(DEGREES);

	
	//hours
	push();
	rectMode(CENTER);
	var h = hour();
	translate(width/2,height/2);
	rotate(h*30-180);
	noFill();
	rect(0,0,400,400);
	rect(0,0,1,500);

	pop();
	//seconds
	push();
	var s = second();
	translate(width/2,height/2);
	rotate(s*6-135);
	fill(63, 12, 12);
	noStroke();
	ellipse(150,150,40,40);
	ellipse(-150,-150,20,20);
	pop();

	//minutes
	push();
	var m = minute();
	translate(width/2,height/2);
	rotate(m*6-180);
	head(0,0);
	pop();

	

}

function head(x,y){

//head
	noStroke();
	fill(255, 235, 117);
	ellipse(0,0,300,300);
	//eyes
	strokeWeight(1);
	fill(255);
	ellipse(-70,0,80,15);
	ellipse(70,0,80,15);
	noStroke();
	fill(38, 20, 0);
	ellipse(-70,0,15,15);
	ellipse(70,0,15,15);
	//ears
	fill(255, 235, 117);
	ellipse(-150,0,30,50);
	ellipse(150,0,30,50);
	ellipse(-150,20,50,60);
	ellipse(150,20,50,60);
	//studs
	fill(0, 48, 46);
	ellipse(-160,30,10,10);
	ellipse(160,30,10,10);
	//mouth
	fill(145, 36, 36);
	arc(0,40,30,30,0,180);
	//dots
	for(var x = 0; x<3; x++){

		for(var y = 0; y<3; y++){

			var x2 = -40 + x * 40;
			var y2 = -110 + y * 40; 

			fill(255, 250, 147);
			ellipse(x2,y2,20,20);
		}
	}

}

sketch

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

}

function draw() {
background(51,0,17);

var xOG = 0;
var yOG = 0;
var xBetween = 105;
var yBetween = 90;
var offset = xBetween/2;

for (var y = 0; y < 9; y++){

  if(y==2||y==4||y==6||y==8){ //offsets every other two lines up
   yOG=yOG-35;
 		}	
	if (y%2==0){
		for (var x = 0; x < 7; x++){
			var py = yOG + y * yBetween;
			var px = xOG + x * xBetween;

			hexagon(px,py);//call hexagon function
		}
	}
	if (y%2==1){ //offsets every other line to the to the right
		for (var x = 0; x < 9; x++){
			var py = yOG + y * yBetween;
			var px = xOG + x * xBetween+offset;
			hexagon(px,py);
		}
  	}
}
var rxOG=-61.7;
var ryOG=70;
var rxBetween=35;
var ryBetween=145;
for (var ry = 0; ry<5; ry++){//draws a series of orange rectangles that covers parts of the hexagon 
	
	for(var rx = 0; rx<20; rx++){
		var ty = ryOG + ry * ryBetween;
		var tx = rxOG + rx * rxBetween;
		noStroke();
		fill(206,105,16);
		

		if(rx%3==0){
			rect(tx,ty,0,0);
		}
		else{
			rect(tx,ty,17.7,45);

		}

	}
}
var rrxOG=-8.9;
var rryOG=60;
var rrxBetween=105;
var rryBetween=145;
for (var rry = 0; rry<5; rry++){//draws a series of dark maroon rectangles that also covers part of the hexagon
	for(var rrx = 0; rrx<10; rrx++){
		var tty = rryOG + rry * rryBetween;
		var ttx = rrxOG + rrx * rrxBetween;
		
		fill(51,0,17);
		rect(ttx,tty,17.7,68);
	}

}	
}

function hexagon(x,y){ //hexagon function


var r = 30*PI/180;
push();
translate(x,y);
rotate(r);
noStroke();
fill(51,0,17);
polygon(0,0,70,6);//call polygon function
fill(206,105,16);
polygon(0,0,50,6);
fill(51,0,17);
polygon(0,0,30,6);
fill(135,17,58);
polygon(0,0,15,6);
pop();

}


function polygon(x, y, radius, sides) {//can produce polygons with various numbers of sides and various sizes
  var angle = TWO_PI / sides;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius;
    var sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I was inspired by the imagery of the floor pattern in the movie, “The Shining,” and wanted to recreate it. I learned a lot and this project helped me to reinforce my knowledge of loops.

sketch

var eyeHeight=15;
var eyeWidth=55;
var noseSize=6;
var browHeight1=2;
var browHeight2=2;
var faceWidth=200;
var faceHeight=250;
var ballSize=10;
var mouthLength=40;




function setup() {
    createCanvas(480, 640);
    background(253,255,75);
    
}

function draw() {

	//face
	fill(255);
	ellipse(width/2,height/2,faceWidth,faceHeight);

	//eye
	var eyeLX= width/2-faceWidth*0.3;
	var eyeLY= height/2+faceHeight*0.1;
	var eyeRX= width/2+faceWidth*0.2;
	var eyeRY= height/2+faceHeight*0.1;
	fill(255);
	ellipse(eyeLX,eyeLY,eyeWidth,eyeHeight);
	ellipse(eyeRX,eyeRY,eyeWidth,eyeHeight);

	//eyeballs
	fill(0);
	ellipse(eyeLX,eyeLY,ballSize,ballSize);
	ellipse(eyeRX,eyeRY,ballSize,ballSize);

	//nose
	var noseLX= width/2-faceWidth*0.08;
	var noseLY= height/2+faceHeight*0.2;
	var noseRX= width/2+faceWidth*0.000000000001;
	var noseRY= height/2+faceHeight*0.2;
	fill(0);
	ellipse(noseLX,noseLY,noseSize,noseSize);
	ellipse(noseRX,noseRY,noseSize,noseSize);

	//brow
	var browLX= width/2-faceWidth*0.45;
	var browLY= height/2+faceHeight*0.01;
	var browRX= width/2+faceWidth*0.1;
	var browRY= height/2+faceHeight*0.01;
	fill(0);
	rect(browLX,browLY,50,browHeight1);
	rect(browRX,browRY,50,browHeight2);

	//mouth
	var mouthX= width/2-faceWidth*0.08;
	var mouthY= height/2+faceHeight*0.27;
	rect(mouthX,mouthY,15,mouthLength);

}

function mousePressed() {
    //change nostril size
    noseSize = random(6,12);

    //change pupil size
    ballSize = random(2,12);

    //change mouth size
    mouthLength = random(10, 55);
}

		

sketch

function setup() {
    createCanvas(800, 800);
}

function draw() {
	background(57,57,57);
    noStroke();
    var c = color(255,255,255);
    fill(c);
    rect(235,246,11,114);
    rect(235,376,11,51);
    rect(249,224,11,136);
    rect(249,369,11,39);
    rect(249,433,11,19);
    rect(265,203,11,150);
    rect(265,359,11,52);
    rect(265,419,11,14);
    rect(265,450,11,14);
    rect(283,186,11,157);
    rect(282,349,11,151);
    rect(304,173,11,161);
    rect(304,340,11,200);
    rect(326,160,11,156);
    rect(326,325,11,11);
    rect(326,342,11,222);
    rect(347,152,11,152);
    rect(347,314,11,29);
    rect(347,351,11,42);
    rect(347,401,11,180);
    rect(371,146,11,150);
    rect(371,306,11,41);
    rect(371,354,11,35);
    rect(371,401,11,23);
    rect(371,431,11,162);
    rect(394,143,11,143);
    rect(394,297,11,51);
    rect(394,354,11,37);
    rect(394,405,11,16);
    rect(394,431,11,172);
    rect(414,145,11,137);
    rect(414,290,11,51);
    rect(414,349,11,48);
    rect(414,406,11,16);
    rect(414,427,11,103);
    rect(414,545,11,62);
    rect(437,164,11,113);
    rect(437,286,11,51);
    rect(437,345,11,146);
    rect(437,496,11,31);
    rect(437,550,11,62);
    rect(457,178,11,96);
    rect(457,283,11,48);
    rect(457,337,11,160);
    rect(457,504,11,22);
    rect(457,551,11,59);
    rect(477,192,11,79);
    rect(477,280,11,44);
    rect(477,329,11,78);
    rect(477,413,11,78);
    rect(477,494,11,29);
    rect(477,540,11,58);
    rect(495,210,11,66);
    rect(495,284,11,30);
    rect(495,320,11,75);
    rect(495,403,11,13);
    rect(495,422,11,149);
    rect(511,244,11,31);
    rect(511,284,11,22);
    rect(511,313,11,68);
    rect(511,395,11,15);
    rect(511,417,11,108);
    rect(526,288,11,16);
    rect(526,310,11,71);
    rect(526,391,11,103)
    rect(539,297,11,8);
    rect(539,311,11,30);
    rect(511,299,11,42);
    rect(563,306,11,39);
    rect(576,312,11,37);
    rect(588,318,11,33);
    rect(600,330,11,20);
    rect(551,300,11,42);

    noStroke();
    fill(158,40,40);
    ellipse(438,218,72,72);



}

This particular project, called “Airflow”, is future of gaming and entertainment. Developed by Mindride, a company famous for creating unique immersive experiences, “Airflow” is a VR ride that suspends participants in air and simulates the feel of flight by incorporating a virtual reality headset and wind.

This project caught my attention because it shows the growth of the gaming industry as it gradually moves out of the bounds of controllers and keyboards to something that involves the movement of the entire body. For example, during the gameplay, the user will move his arm backwards for speed up, throw his arms forwards to slow down, and change flight direction by adjusting his arms and head position.

I think this is also a great step forwards for VR, because until now, virtual reality had been seen as a gimmick with lackluster games and limited usability. While I do not see the likes of “Airflow” being available for consumers anytime soon, I believe this is a great concept that the gaming industry should learn from to move forwards.

sketch

function setup() {
    createCanvas(300, 300);
}

function draw() {
	background(220, 189, 90);
	ellipse(150, 150, 100, 70);
}