![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](wp-content/uploads/2020/08/stop-banner.png)
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);
}
}