Month: November 2016

sketch
 

// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project 10
var hills = [];
var clouds = [];
var blocks = [];
var pipes = [];


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of hills
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        hills[i] = makeHill(rx);
    }


    for (var i = 0; i < 5; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }

    for (var i = 0; i < 5; i++){
        var rx = random(width);
        blocks[i] = makeBlock(rx);
     }   

    for (var i = 0; i < 1; i++){
        var rx = random(width);
        pipes[i] = makePipe(rx);
     } 

    frameRate(20);
}


function draw() {
    background(112,166,255); 
    
    displayHorizon();

    updateAndDisplayHills();
    removeHillsThatHaveSlippedOutOfView();
    addNewHillsWithSomeRandomProbability(); 

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();

    updateAndDisplayBlocks();
    removeBlocksThatHaveSlippedOutOfView();
    addNewBlocksWithSomeRandomProbability();

    updateAndDisplayPipes();
    removePipesThatHaveSlippedOutOfView();
    addNewPipesWithSomeRandomProbability();

    backgroundDesign();
}


function updateAndDisplayHills(){
    // Update the building's positions, and display them.
    for (var i = 0; i < hills.length; i++){
        hills[i].move();
        hills[i].display();
    }
}

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

function updateAndDisplayBlocks(){
 
    for (var i = 0; i < blocks.length; i++){
        blocks[i].move();
        blocks[i].display();
    }
}
function updateAndDisplayPipes(){
 
    for (var i = 0; i < pipes.length; i++){
        pipes[i].move();
        pipes[i].display();
    }
}

function removeHillsThatHaveSlippedOutOfView(){
    var hillsToKeep = [];
    for (var i = 0; i < hills.length; i++){
        if (hills[i].x + hills[i].breadth > 0) {
            hillsToKeep.push(hills[i]);
        }
    }
    hills = hillsToKeep; // remember the surviving buildings
}

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

function removeBlocksThatHaveSlippedOutOfView(){
    var blocksToKeep = [];
    for (var i = 0; i < blocks.length; i++){
        if(blocks[i].x + blocks[i].breadth > 0){
            blocksToKeep.push(blocks[i]);
        }
    }
    blocks = blocksToKeep;
}

function removePipesThatHaveSlippedOutOfView(){
    var pipesToKeep = [];
    for (var i = 0; i < pipes.length; i++){
        if(pipes[i].x + pipes[i].breadth > 0){
            pipesToKeep.push(pipes[i]);
        }
    }
    pipes = pipesToKeep;
}

function addNewHillsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newHillLikelihood = 0.007; 
    if (random(0,1) < newHillLikelihood) {
        hills.push(makeHill(width));
    }
}

function addNewCloudsWithSomeRandomProbability(){
    var newCloudLikelihood = 0.007;
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}


function addNewBlocksWithSomeRandomProbability(){
    var newBlockLikelihood = 0.007;
    if (random(0,1) < newBlockLikelihood) {
        blocks.push(makeBlock(width));
    }
}

function addNewPipesWithSomeRandomProbability(){
    var newPipeLikelihood = 0.002;
    if (random(0,1) < newPipeLikelihood) {
        pipes.push(makePipe(width));
    }
}


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

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

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

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


// draw the building and some windows
function hillDisplay() {
    var floorHeight = 30;
    var hHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill(255,213,48);
    stroke(255,175,48);
    ellipse(0, -hHeight, this.breadth+50, hHeight+100);
    
    pop();
}

function cloudDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(10,bHeight,this.breadth+100,bHeight/2);
    pop();

    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(30,-bHeight-200,this.breadth+100,bHeight/2);
    pop();



}

function blockDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(140,78,47);
    rect(30,-bHeight-100,30,30);
    pop();



}

function pipeDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(77,175,28);
    rect(30,-bHeight-50,50,70);
    rect(20,-bHeight-50,70,10);
    pop();



}


function backgroundDesign(){
    fill(120,224,60);
    noStroke();
    rect(0,350,600,50);


    fill(255,212,71);
    rect(0,370,600,50);

   }

function makeHill(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: hillMove,
                display: hillDisplay}
    return bldg;
}

function makeCloud(birthLocationX){

    var cloudV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(1,10)),
        move: cloudMove,
        display: cloudDisplay}
    return cloudV;
}

function makeBlock(birthLocationX){

    var blockV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(5,5)),
        move: blockMove,
        display: blockDisplay}
    return blockV;
}

function makePipe(birthLocationX) {
    var pipeV = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: pipeMove,
                display: pipeDisplay}
    return pipeV;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

My project is just a remake of the first world in Super Mario. There are pipes, the basic hills in the background, clouds and item blocks.

mluria-10

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-10-Project
*/

var x = []; //circle X
var y = []; //circle Y
var circSize = []; //size
var circHue = []; //hue
var myParticles = []; //particles
var nParticles = 700;

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

    //build an initial array of particles
    for (var i = 0; i < nParticles; i++) {
        var rx = random(width);
        var ry = random(height);
        myParticles[i] = makeParticle(rx, ry, 0, 0);
    }

    //set color to HSB
    colorMode(HSB, 100);
    frameRate(20);

}


function draw() {

    background(0);
    fill(255);
    noStroke();

    
    push();

    //draw particles according to gravity and repulsion forces
    //the first part of the code implements the particle code we learned in class

    var gravityForcex = 0;
    var gravityForcey = 0.05;
    var mutualRepulsionAmount = 2.5;
 
 
    for (var i = 0; i < myParticles.length; i++) {
        var ithParticle = myParticles[i];
        var px = ithParticle.px;
        var py = ithParticle.py;
 
        if (mouseIsPressed) {
            ithParticle.addForce(gravityForcex, gravityForcey);
        }
 
        for (var j = 0; j < i; j++) {
            var jthParticle = myParticles[j];
            var qx = jthParticle.px;
            var qy = jthParticle.py;
 
            var dx = px - qx;
            var dy = py - qy;
            var dh = sqrt(dx * dx + dy * dy);

            if (dh > 1.0) {
                var componentInX = dx / dh;
                var componentInY = dy / dh;
                var proportionToDistanceSquared = 1.0 / (dh * dh);
                var repulsionForcex = mutualRepulsionAmount *
                    componentInX * proportionToDistanceSquared;
                var repulsionForcey = mutualRepulsionAmount *
                    componentInY * proportionToDistanceSquared;
                // add in forces
                ithParticle.addForce( repulsionForcex,  repulsionForcey);
                jthParticle.addForce(-repulsionForcex, -repulsionForcey);
            }
        }
    }
 
    for (var i = 0; i < myParticles.length; i++) {
        myParticles[i].bPeriodicBoundaries = false;
        myParticles[i].bElasticBoundaries = true;
        myParticles[i].update(); // update all locations
    }
 
    for (var i = 0; i < myParticles.length; i++) {
        myParticles[i].draw(); // draw all particles
    }

    //----=====end of particle code=====-----//

    pop();

    //set the likelihood of a circle showing up
    var newCircleLikelihood = 0.3;
    if (random (0,1) < newCircleLikelihood){
        //if new circle is created, push a random location, size and hue
        x.push(random(0, width));
        y.push(random(0, height)); 
        circSize.push(random(0,2));
        circHue.push(random(0,100));
    }
    
    //for the circle array length
    for (var i = 0; i < x.length; i++) {
        var ex = x[i]; //set new x
        var ey = y[i];  //set new y
        var eCirc = circSize[i]; //set new circle size
        var eHue = circHue[i]; //set new hue
        fill(eHue, 100, 100); 

        //every 5 circles draw a moving triangle instead
        if (i % 5 == 0){
            triangle(ex, ey, ex+random(-20,20), ey, ex+(random(-20,20)), ey-random(-20,20));

        //if not triangle, draw circle
        } else {
            ellipse(ex,ey, eCirc, eCirc);  //draw the new circle
        }

        circSize[i] += random(0,3); //make the circle grow in side

        //code to move the circle slightly out of the center
        if (x[i] > width/2) { //if on the left side - move left
            x[i]+=3 ;
        } else { //if on the right side - move right
            x[i]-=3 ;
        }

        if (y[i] > height/2) { //if the circle is on the bottom half
            y[i]++ ; //move down
        } else { //if on the top half
            y[i]-- ; //move up
        }

        if (circSize[i] > height) { //if the circle is too big

            x[i] += 1500; //move it to the side
            y[i] += 1500;
        }
    }


}


// Implementation of partical code with variation
//Mutual repulsion, with optional gravity

// Update the position based on force and velocity
function particleUpdate() {
    if (this.bFixed == false) {
        this.vx *= this.damping;
        this.vy *= this.damping;
  
        this.limitVelocities();
        this.handleBoundaries();
        this.px += this.vx;
        this.py += this.vy;
    }
}


// Prevent particle velocity from exceeding maxSpeed
function particleLimitVelocities() {
    if (this.bLimitVelocities) {
        var speed = sqrt(this.vx * this.vx + this.vy * this.vy);
        var maxSpeed = 10;
        if (speed > maxSpeed) {
            this.vx *= maxSpeed / speed;
            this.vy *= maxSpeed / speed;
        }
    }
}


// do boundary processing if enabled
function particleHandleBoundaries() {
    if (this.bPeriodicBoundaries) {
        if (this.px > width) this.px -= width;
        if (this.px < 0) this.px += width;
        if (this.py > height) this.py -= height;
        if (this.py < 0) this.py += height;
    } else if (this.bHardBoundaries) {
        if (this.px >= width) {
            this.vx = -abs(this.vx);
        }
        if (this.px <= 0) {
            this.vx = abs(this.vx);
        }
        if (this.py >= height) {
            this.vy = -abs(this.vy);
        }
        if (this.py <= 0) {
            this.vy = abs(this.vy);
        }
    }
}


// draw the particle as a white circle
function particleDraw() {
    fill(255);
    noStroke();
    ellipse(this.px, this.py, 2, 2);
}


// add a force to the particle using F = mA
function particleAddForce(fx, fy) {
    var ax = fx / this.mass;
    var ay = fy / this.mass;
    this.vx += ax;
    this.vy += ay;
}


// make a new particle
function makeParticle(x, y, dx, dy) {
    var p = {px: x, py: y, vx: dx, vy: dy,
             mass: 1.0, damping: 0.9,
             bFixed: false,
             bLimitVelocities: false,
             bPeriodicBoundaries: false,
             bHardBoundaries: false,
             addForce: particleAddForce,
             update: particleUpdate,
             limitVelocities: particleLimitVelocities,
             handleBoundaries: particleHandleBoundaries,
             draw: particleDraw
            }
    return p;
}

For the landscape project this week, I wanted to create a project that would give the sense of outer space, with shapes flying your way. In order to do this, I used different shapes in different sizes and colors, and tried to code their movement to seem to move in your direction. In order to make it more interesting, I also added shape shifting triangles.

For the background of the project, I used the particle code we learned in class, because I liked the way it shifts slowly, similar to how we would see movement of something that is very far away.

Attached is a sketch of my initial idea on paper:

siminl-project10

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 10

var clowns = [];
//store the clown fish
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
//used to control sea rocks

function setup() {
    createCanvas(600, 400); 
    // create an initial collection of fish
    for (var i = 0; i < 4; i++){
        var rx = random(width);
        var ry = random(0.8 * height);
        clowns[i] = makeClownFish(rx,ry);
    }
    frameRate(10);
}

function draw() {
    background(160);
    seaViewer(150,200);
    seaViewer(450,200);
    seaRocks(); 
    updateAndDisplayClownFish();
    removeClownFishThatHaveSlippedOutOfView();
    addNewClownFishWithSomeRandomProbability(); 
    fill(41,115,179,0.2);
    rect(0,0,width,height);

}

function updateAndDisplayClownFish(){
    // Update the fish's positions, and display them.
    for (var i = 0; i < clowns.length; i++){
        clowns[i].move();
        clowns[i].display();
    }
}

function removeClownFishThatHaveSlippedOutOfView(){
    var clownsToKeep = [];
    for (var i = 0; i < clowns.length; i++){
        if (clowns[i].fishX + clowns[i].fishWidth > 0) {
            clownsToKeep.push(clowns[i]);
        }
    }
    clowns = clownsToKeep; // remember the surviving buildings
}

function addNewClownFishWithSomeRandomProbability() {
    // With a very tiny probability, add a new fish to the end.
    var newClownLikelihood = 0.009; 
    if (random(0,1) < newClownLikelihood) {
        clowns.push(makeClownFish(width,random(0,0.8 * height)));
    }
}

// method to update position of fish every frame
function clownFishMove() {
    this.fishX += this.speed;
    this.fishY += noise(-this.speed,this.speed);
    //randomize speed
}

//draw the clown fish
function clownFishDisplay(){
    var fishHeight = this.fishWidth / 2;
    noStroke();
    fill(255,this.greeness,0);
    beginShape();
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY - fishHeight * 2 / 3);
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY - (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth, this.fishY);//tail of fish
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY + (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY + fishHeight / 3);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY + fishHeight * 1 / 6);
        curveVertex(this.fishX, this.fishY);//head of fish
        curveVertex(this.fishX, this.fishY);//head of fish
    endShape();
    //draw body
    
    noStroke();
    fill(255);
    beginShape();
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + 0.15 * this.fishWidth, this.fishY - fishHeight * 2 / 5);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY - fishHeight * 2 / 3);
        curveVertex(this.fishX + this.fishWidth / 3 + this.headStripe, this.fishY - fishHeight * 1 / 3);
        curveVertex(this.fishX + this.fishWidth / 3 - 0.3 * this.headStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth / 3, this.fishY + fishHeight / 3);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY + fishHeight * 1 / 6);
        curveVertex(this.fishX + 0.1 * this.fishWidth, this.fishY - fishHeight * 1 / 3);
    endShape();
    //draw head stripe

    noStroke();
    fill(255);
    beginShape();
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY - (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 7 / 8 + this.tailStripe, this.fishY - (fishHeight / 6));
        curveVertex(this.fishX + this.fishWidth * 7 / 8 + 0.3 * this.tailStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth * 7 / 8 - this.tailStripe, this.fishY + (fishHeight / 6));
        curveVertex(this.fishX + this.fishWidth * 7 / 8, this.fishY + (fishHeight / 3));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY + (fishHeight / 5));
        curveVertex(this.fishX + this.fishWidth * 2 / 3 + this.tailStripe, this.fishY);
        curveVertex(this.fishX + this.fishWidth * 2 / 3, this.fishY - (fishHeight / 4));
    endShape();
    //draw tail stripe 
    
    fill(0);
    ellipse(this.fishX + 0.1 * this.fishWidth, this.fishY - fishHeight * 0.05,fishHeight / 10,fishHeight / 10);
    //draw eye
}

function seaViewer(windowX,windowY){
    //draw submarine outside window 
    strokeWeight(3);
    stroke(90);
    rectMode(CENTER);
    noFill();
    rect(windowX,windowY,240,340,80,80,80,80);
    fill("LightBlue");
    noStroke();
    rect(windowX,windowY,200,300,70,70,70,70);
    nail(windowX,windowY - 160, 12);
    nail(windowX,windowY + 160, 12);
    nail(windowX - 110,windowY, 12);
    nail(windowX + 110,windowY, 12);
    nail(windowX - 100,windowY - 120, 12);
    nail(windowX + 100,windowY + 120, 12);
    nail(windowX - 100,windowY + 120, 12);
    nail(windowX + 100,windowY - 120, 12);

}

//draw nails on window
function nail(nailX, nailY, nailSize){
    noStroke();
    fill(100);
    ellipse(nailX,nailY,nailSize,nailSize);
    var screwlength = nailSize / (4 * sqrt(2));
    strokeWeight(1);
    stroke(0);
    line(nailX - screwlength,nailY - screwlength,nailX + screwlength,nailY + screwlength);
    line(nailX - screwlength,nailY + screwlength,nailX + screwlength,nailY - screwlength);
}

//draw sea rocks
function seaRocks(){
    fill(11,20,61);
    noStroke();
    push();
        translate(0,80);
        //move down 80
        beginShape(); 
        vertex(0, height); 
        for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail) + (millis() * terrainSpeed) * 3 / 4;
            var y = map(noise(t), 0,1, 0, height );
            vertex(x, y); 
        }
        vertex(width, height); 
        endShape();
    pop();
}

//create an object to store clownfish
function makeClownFish(birthLocationX,birthLocationY) {
    var clownFish = {                
                fishX: birthLocationX,
                //x location of fish
                fishY: birthLocationY,  
                //y location of fish              
                fishWidth: random(30,120),
                //width of fish
                greeness: random(30,140), 
                //G value of the fish body color
                move: clownFishMove,
                //move the fish
                speed: -random(0,4),
                //randomize horizontal speed
                display: clownFishDisplay,
                //draw fish
                headStripe: random(-8,8),
                //randomize the stripe on head
                tailStripe: random(-5,5)
                //randomize the stripe on tail
}
    return clownFish;
}

In this project I wanted to depict a view of marine life in front of a submarine window. The camera is following the submarine from outside. At first I only changed the color and size of the fish, then I realized I could make variations in the patterns of the fish as well.

I created a scene of a spaceship travelling in space. The stars and the planets are randomized moving away from the spaceship. The planets are getting smaller(as they should be) as they move toward the edge of the screen. In the control room there is a flashing red button and a screen “monitoring” the condition of the spaceship.

sketch

//create objects
var planets = [];
var stars = [];
var redStar = [];

function setup() {
	createCanvas(600, 400);
    frameRate(8);
	// initial planet and stars
		var initialX = random(width);
		planets[0] = makePlanets(initialX);
		redStar[0] = makeRedPlanets(initialX);
		redStar[1] = makeRedPlanets(initialX);
		for (var i = 0; i < 100; i++) {
			stars[i] = makeStars(initialX);
		}
}

function draw() {
	background(0);
	PlanetsinMotion();
	addPlanets();
	StarsinMotion();
	addStars();
	redStarinMotion();
	addRed();
	spaceship();
 	
 	//flashing button
	if (second() & 2 > 0) {
		fill("red");
	} else fill(0);
	noStroke();
	ellipse(170, 260, 5, 5);
	//make screen and moving red line
	fill(226, 223, 222);
	stroke(65, 73, 86);
	strokeWeight(2);
	rect(420, 170, 60, 50);//screen
	beginShape(); 
	noFill();
	stroke("red");
	strokeWeight(1);
    for (var x = 0; x < width-540; x++) { //moving red line
        var t = (x * 0.009) + (millis() * 0.0003);
        var y = map(noise(t), 0, 0.13, 40, 45);
        vertex(x+420, y+140); 
    }
    endShape();

   
}

// all about the planets
function PlanetsinMotion() {
	for (var i = 0; i < planets.length; i++) {
		planets[i].move();
		planets[i].display();
	}
}
function addPlanets() {
	var maybeAdd = 0.004;
	if (random(0,1) < maybeAdd) {
		planets.push(makePlanets(width));
	}
}
function moveplanets() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function displayplanets() {
    fill(187, 210, 247);
	noStroke();
	ellipse(this.x, this.y, this.randomsize, this.randomsize);//blue planets
	this.randomsize += -0.01;
}
function makePlanets(planetX) {
	var plt = { x: planetX,
		        y: height/2,
		        speedX: -1.0,
		        speedY: -0.5,
		        randomsize: random (10, 100),
		        move: moveplanets,
		        display: displayplanets,
		        }
    return plt;
}

//all about the red stars
function redStarinMotion() {
	for (var i = 0; i < redStar.length; i++) {
		redStar[i].move();
		redStar[i].display();
	}
}
function moveRed() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function displayRed() {
	fill(122, 43, 19);
	noStroke();
	ellipse(this.x, this.y, this.randomsize, this.randomsize);
	this.randomsize += 0.005;
}
function addRed() {
	var maybeAdd = 0.003;
	if (random(0,1) < maybeAdd) {
		redStar.push(makeRedPlanets(width));
	}
}
function makeRedPlanets(redX) {
	var red = {x: random(200,400),
		       y: random(height-50, height-100),
		       speedX: -0.5,
		       speedY: -0.7,
		       randomsize: random(5, 8),
		       move: moveRed,
		       display: displayRed
	           }
	return red;

}

//all about the stars
function StarsinMotion() {
	for (var i = 0; i < stars.length; i++){
		stars[i].move();
		stars[i].display();
	}
}
function displayStars() {
	stroke("yellow");
	point(this.x, this.y);
}
function addStars() {
    var maybeAdd = 0.6;
	if (random(0,1) < maybeAdd) {
		stars.push(makeStars(random(width-50, width)));
	}
}
function moveStars() {
	this.x += this.speedX;
	this.y += this.speedY;
}
function makeStars(StarX) {
	var str = {x: random(width),
	           y: random(height),
	           speedX: -1.0,
	           speedY: -0.5,
	           move: moveStars,
	           display: displayStars,
	       	   }
	return str;
}

//creating the interior of spaceship
function spaceship() {
	noStroke();
	fill(53, 58, 66);
	rect(0, 315, width, height-315);//floor
	fill(95, 105, 122);//light color
	quad(287, 0, 357, 0, 419, 26, 397, 53);//3rd wall 1
	quad(311, 255, 173, 249, 184, 269, 311, 271);//2nd wall 1
	quad(27, 213, 0, 223, 0, 269, 30, 269);//1st wall 3
	quad(30, 269, 25, 381, 0, 361, 0, 269);//1st wall 4
	fill(81, 90, 104);// medium light
	quad(419, 26, 397, 53, 409, 126, 497, 110);//3rd wall 2
	quad(311, 255, 311, 271, 476, 276, 497, 250);//3rd wall 4
	quad(311, 330, 311, 271, 184, 269, 186, 339);//2nd wall 2
	triangle(495, 0, 357, 0, 419, 26);//1st wall 1-3
	fill(73, 81, 94);//slightly dark
	quad(409, 126, 497, 110, 497, 250, 311, 255);//3rd wall 3
	quad(476, 351, 476, 276, 311, 271, 311, 330);//3rd wall 6
	quad(600, 87, 497, 110, 419, 26, 495, 0);//4th wall 1
	triangle(495, 0, 600, 87, 600, 0);//4th wall 1-2
	fill(62, 68, 78);//dark
	quad(476, 276, 497, 250, 497, 334, 476, 349);//3rd wall 5
	fill(144, 156, 175);//lightest
	quad(187, 271, 162, 229, 27, 213, 30, 269);//1st wall 1
	fill(122, 133, 153);//still very light
	quad(30, 269, 187, 271, 186, 357, 25, 381);//1st wall 2
	fill(65, 73, 86);//darkest
	quad(497, 110, 600, 87, 600, 130, 497, 150);//4th wall 2-1
	quad(497, 150, 536, 142, 536, 345, 497, 334);//4th wall 2-2
	quad(536, 345, 536, 262, 600, 268, 600, 360); //4th wall 2-3
}