Month: November 2019

For this project, I wanted to maximize randomization of the space objects, but still have some sort of coherency. Mostly, I was trying to become more comfortable with creating different classes of objects.

sketch

//Ghalya Alsanea
//galsanea@andrew.cmu.edu
//Section B
//Project 11

var lines;
var totalLines = 0;

var j;              //jiggle
var f;              //flower

var p1, p2, p3;     //planets
var sp;             //spinning planet

//stars
var star;
var star2;

function preload() {
    //
}

function setup() {
    createCanvas(600, 600);
    background(0);
    lines = new Array(500);

    //initiate the dif class ojects
    j = new Jiggle();
    f = new Flower();
    p1 = new Planet();
    p2 = new Planet2();
    p3 = new Planet3();
    sp = new SpinPlanet();
    star = new Star();
    star2 = new Star();
}

function draw() {
    background(0);
    //create the shooting starts lines
    lines[totalLines] = new Line();
    totalLines++;
    for (var i = 0; i < totalLines; i++) {
        lines[i].move();
        lines[i].display();
    }
    //show and move the objects
    //jiggle circle
    j.move();
    j.show();
    //flower
    f.move();
    f.show();
    // planets
    p1.move();
    p1.show();
    p2.move();
    p2.show();
    p3.move();
    p3.show();
    //spinplanet
    sp.move();
    sp.show();
    //star 1
    star.move();
    star.show();
    //star 2
    star2.move();
    star2.show();
}


//////////////////////////////////////////////////////////////////////
//                      define the classes                          //
//////////////////////////////////////////////////////////////////////

class Jiggle {
    constructor() {
        this.x = random(0, width);      //start at a random xpos
        this.y = height + 100;          //make sure to start  off the canvas
        this.size = random(20, 50);     //create a new size
        this.col = color("orange");     //define the color
    }
    move() {
        this.y-=2;                          //move up
        this.x = this.x + random(-5, 5);    //make the "jiggle" movement
        //if it moves too far up, reset the object
        if (this.y < -this.size) {
            this.y = height;
            this.x = random(0, width);
            this.size = random(20, 50);
        }
    }
    show() {
        //draw the object
        noStroke();
        strokeWeight(1);
        fill(this.col);
        circle(this.x, this.y, this.size);
    }
}

//////////////////////////////////////////////////////////////////////

class Flower {
    constructor() {
        this.x = random(0, width);      //start at a random xpos
        this.y = height + 100;          //start y loc off the canvas
        this.size = random(40, 80);     //randomize size
    }
    move() {
        this.y--;                       //move up
        this.x = this.x + random(-1, 1);//cause the jiggle
        //reset if it goes too far up
        if (this.y < -this.size) {
            this.y = height;
            this.x = random(0, width);
            this.size = random(40, 80);
        }
    }
    show() {
        // draw the object
        noStroke();
        fill(204, 101, 192, 180);
        //rotate 
        push();
        translate(this.x, this.y);
        for (var i = 0; i < 10; i++) {
            ellipse(0, 30, this.size / 6, this.size);
            rotate(PI / 5);
        }
        pop();
    }
}

//////////////////////////////////////////////////////////////////////

class Star {
    constructor() {
        this.x = random(0, width);          //start at random xpos
        this.y = height - 50;               //start y loc off canvas
        this.col = color("yellow"); 
        this.npoints = random(5, 12);       //points in star
        this.angle = TWO_PI / this.npoints;
        this.halfAngle = this.angle / 2.0;      
        this.r1 = random(5, 20);            //inner radius
        this.r2 = random(20, 40);           //outer radius

    }
    move() {
        this.x;
        this.y = this.y - random(0.8, 1.2);         //move in a random speed
        // reset if it goes off cnavas
        if (this.y < -100) {
            this.y = height;
            this.y -= random(0.8, 1.2);
            this.x = random(0, width);
            this.npoints = random(5, 12);
            this.angle = TWO_PI / this.npoints;
            this.halfAngle = this.angle / 2.0;
            this.r1 = random(10, 30);
            this.r2 = random(60, 100);
        }
    }
    show() {
        //draw the object
        noStroke();
        fill(this.col);
        //rotate it
        push();
        translate(this.x, this.y);
        rotate(radians(frameCount)/2);
        beginShape();
        //draw a star based on angles and npoints
        for (var a = 0; a < TWO_PI; a += this.angle) {
            var sx = cos(a) * this.r2;
            var sy = sin(a) * this.r2;
            vertex(sx, sy);
            sx = cos(a + this.halfAngle) * this.r1;
            sy = sin(a + this.halfAngle) * this.r1;
            vertex(sx, sy);
        }
        endShape();
        pop();

    }
}

//////////////////////////////////////////////////////////////////////

class Planet {
    constructor() {
        this.x = random(0, width);
        this.size = random(10, 50);
        this.y = height - this.size;
        this.col = color("red");
    }
    move() {
        this.x;
        //Moving up at a constant speed
        this.y -= 0.75;
        // Reset to the bottom
        if (this.y < -100) {
            this.y = height + 250;
            this.size = random(10, 50);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500)) - 25;
        }
    }
    show() {
        //draw planet with ring
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);
        noFill();
        stroke(this.col);
        strokeWeight(1);
        ellipse(this.x, this.y, this.size * 2, this.size / 2);
    }
}

//////////////////////////////////////////////////////////////////////

class Planet2 {
    constructor() {
        this.x = random(0, width);
        this.y = height + 100;
        this.size = random(50, 80);
        this.col = color("pink");
    }
    move() {
        this.x;
        //Moving up at a constant speed
        this.y-=1.1;
        // Reset to the bottom
        if (this.y < -50) {
            this.y = height;
            this.size = random(50, 80);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500)) - 25;
        }
    }
    show() {
        //draw planet with rotated ring
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);

        stroke(this.col);
        strokeWeight(2);
        noFill();
        push();
        translate(this.x, this.y);
        rotate(PI/4);
        ellipse(0, 0, this.size * 1.5, this.size / 3);
        pop();
    }
}

//////////////////////////////////////////////////////////////////////

class Planet3 {
    constructor() {
        this.x = random(0, width);
        this.y = height + 100;      //start below window
        this.size = random(50, 80);
        this.col = color("coral");
    }
    move() {
        this.x = this.x + random(-1, 1);
        //Moving up at a constant speed
        this.y -= 0.85;
        // Reset to the bottom
        if (this.y < -100) {
            this.y = height;
            this.size = random(50, 80);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500)) - 25;
        }
    }
    show() {
        //draw planet with rotating ring
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);
        noFill();
        stroke(this.col);
        push();
        translate(this.x, this.y);
        rotate(radians(frameCount)/2);
        strokeWeight(1);
        ellipse(0, 0, this.size / 2, this.size * 2);
        pop();
    }
}

//////////////////////////////////////////////////////////////////////

class SpinPlanet {
    constructor() {
        this.x = random(0, width);
        this.y = height + 100;      //start below window
        this.size = random(50, 90);
        this.col = color("green");
    }
    move() {
        this.x = this.x + random(-1, 1);
        //Moving up at a constant speed
        this.y -= 0.65;
        // Reset to the bottom
        if (this.y < -100) {
            this.y = height;
            this.size = random(50, 90);
        }
        if (this.x < 0 || this.x > width) {
            this.x = (random(10, 500))-40;
        }
    }
    show() {
        //draw a spinning planet
        fill(this.col);
        noStroke();
        circle(this.x, this.y, this.size);
        noFill();
        stroke(this.col);
        strokeWeight(2);
        push();
        translate(this.x, this.y);
        rotate(frameCount);
        ellipse(random(-1,1), 0, this.size / 2, this.size * 2);
        pop();
        
    }
}

//////////////////////////////////////////////////////////////////////

class Line {
    constructor() {
        this.r = height + 200;      // starting pt + 200 so to make sure it starts off canvas
        this.x = random(width);     // Start with a random x location
        this.y = this.r;            // Start pt below the window
        this.speed = random(2, 5);  // Pick a random speed
        this.l = random(100, 200);  //randomize length of line 
    }

    move() {
        // move y upwards by speed
        this.y -= this.speed;
    }

    display() {
        //only draw if it's in the canvas
        //draw the shooting stars lines
        if (this.y > 0) {
            strokeWeight(1);
            stroke(random(100, 255), random(100, 255), random(100, 255), 200);
            line(this.x, this.y, this.x, this.y - this.l);
        }
    }
}