Michal Luria – Project 10 – Landscape

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: