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!*
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);
}
}
//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();
}
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);
}
}
}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.
]]>
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);
}
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.
]]>function setup() {
createCanvas(300, 300);
}
function draw() {
background(220, 189, 90);
ellipse(150, 150, 100, 70);
}