Month: November 2020

Project – 11

Cars
//Shaun Murray, shaunmur
//Section B

var cars = [];


function setup() {
    createCanvas(300, 200); 
    
    // create an initial collection of cars
    for (var i = 0; i < 15; i++){
        var rx = random(width);
        cars[i] = makeCars(rx);
    }
    frameRate(12);
}


function draw() {
    background(220);
	noStroke();
	fill('Orange');
    rect(0, 0, 300, 120);
    fill('Yellow');
    circle(40, 110, 40);
    fill(248, 240, 164);
    rect(0, 120, 300, 140);
	line(20, 200, 100, 65);
	line(280, 200, 200, 65);
    displayHorizon();
    push();
    strokeWeight(8);
	stroke(0, 150, 0);
	line(width-75, height-60, width-75, height-73);
	strokeWeight(4);
	line(width-82, height-67, width-75, height-67);
	line(width-82, height-67, width-82, height-70);
	pop();
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability(); 
}


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


function removeCarsThatHaveSlippedOutOfView(){
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep; // remember the surviving cars
}


function addNewCarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new car to the end.
    var newCarLikelihood = 0.03; 
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCars(width));
    }
}


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

// draw the car and some wheels
function carDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - floor(random(30, 40)));
    //rect(0, -bHeight, this.breadth, bHeight);
    fill(255);
	circle(6, 6, 4);//Wheels
	circle(-6, 6, 4);
	fill('Red');
	beginShape();//body
	vertex(-9, -5);
	vertex(-10, 5);
	vertex(10, 5);
	vertex(9, -5);
	endShape(CLOSE);
	fill('cyan');
	rect(-9, -4, 4, 4);//windshield
    stroke(200); 
    pop();
}


function makeCars(birthLocationX) {
    var crs = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,1)),
                move: carsMove,
                display: carDisplay}
    return crs;
}


function displayHorizon(){
    stroke(0);
    fill(115,69,19);
    rect(0,height-50, 300, 30)
    line (0,height-50, width, height-50); 
    line (0,height-20, width, height-20);
}

function car() {
	push();
	translate(x, y);
	fill(255);
	circle(6, 6, 4);//Wheels
	circle(-6, 6, 4);
	fill('Red');
	beginShape();//body
	vertex(-9, -5);
	vertex(-10, 5);
	vertex(10, 5);
	vertex(9, -5);
	endShape(CLOSE);
	fill('cyan');
	rect(-9, -4, 4, 4);//windshield
	pop();
}

Cars on a bumpy desert road.

LO-11

Lorna Barnshaw is/was (does not seem updated) a student at the Winchester School of Art. She works as part of a student run art curating team. The goal of this team is to create an accessible outlet for students to display their art. Lorna posted a project on Behance called Reality Reduction. I find this project fascinating. The project is a mixture between digital media and computation. The project takes images of faces and maps them on to a face like model, only the models are misshapen purposely. This creates a somewhat disturbing image though Lorna takes the project a step further. As the face model spins around, the polygon count is suddenly and drastically reduced, giving the model a bizarre glitch-like appearance. I very much enjoy the ingenuity and vision shown through the art project. I am interested to see more of Lorna’s works!

Lorna Barnshaw

Project 11: Landscape Story

sketch – Copy
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 11


//global variables
var fish = [];

//background variables 
var mountainShapeA= 0.035;
var mountainSpeedA = 0.0009;

var mountainShapeB = 0.0175;
var mountainSpeedB = 0.0005;

var waterShape = 0.003;
var waterSpeed = 0.00005;


function setup() {
    
    createCanvas(480, 480);
    frameRate(10);

    //number of fish
    for (var j = 0; j < 30; j++) {

        fishX = random(width);
        fishY = random(350, 450);
        fish[j] = makeFish(fishX, fishY);

    }

}

function draw(){

    background(255, 225, 225);
    sun();
    mountainB();
    mountainA();
    boatPeople();
    water();
    drawFishies();

}

//LANDSCAPE BKGD ---MOUNTAINS, SUN, WATER
function mountainA(){
    noStroke();
    fill(255, 241, 224);
    beginShape();
    
    for (var i = 0; i < width; i ++){
        var x = (i * mountainShapeA) + (millis() * mountainSpeedA);
        var y = map(noise(x), 0, 1.2, 150, 250);
        vertex(i, y);
    }
    
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function mountainB(){
    noStroke();
    fill(255, 251, 240);
    beginShape();
    
    for (var i = 0; i < width; i ++){
        var x = (i * mountainShapeB) + (millis() * mountainSpeedB);
        var y = map(noise(x), 0, 1.5, 50, 300);
        vertex(i, y);
    }
    
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function sun(){

    noStroke();
    fill(255, 210, 210);
    ellipse(240, 180, 450, 450);
    fill(255, 195, 195);
    ellipse(240, 180, 400, 400);
    fill(255, 187.5, 187.5);
    ellipse(240, 180, 350, 350);
    fill(255, 183, 183);
    ellipse(240, 180, 300, 300);
    fill(255, 175, 175);
    ellipse(240, 180, 250, 250);
    fill(255, 157, 157);
    ellipse(240, 180, 200, 200);
    fill(255, 135, 135);
    ellipse(240, 180, 150, 150);
    fill(255, 123, 123);
    ellipse(240, 180, 100, 100);

}


function water(){

    noStroke();
    fill(255, 218, 203);
    beginShape();
    
    for (var i = 0; i < width; i ++){
        var x = (i * waterShape) + (millis() * waterSpeed);
        var y = map(noise(x), 0, 1.5, 320, 240);
        vertex(i, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();

    noStroke();
    fill(255, 228, 213);
    beginShape();
    
    for (var i = 0; i < width; i ++){
        var x = (i * waterShape) + (millis() * waterSpeed);
        var y = map(noise(x), 0, 1.5, 320, 250);
        vertex(i, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();
}

//TRAVELLERS
function boatPeople(){

	noStroke();
	fill(217, 154, 144);
    ellipse(330,280, 5, 20);
    ellipse(330, 270, 5, 5);
    ellipse(300,280, 5, 20);
    ellipse(300, 270, 5, 5);
    ellipse(270,280, 5, 20);
    ellipse(270, 270, 5, 5);
    ellipse(250,280, 5, 20);
    ellipse(250, 270, 5, 5);
    ellipse(220,280, 5, 20);
    ellipse(220, 270, 5, 5);
    ellipse(200,280, 5, 20);
    ellipse(200, 270, 5, 5);
    ellipse(175,280, 5, 20);
    ellipse(175, 270, 5, 5);

    noStroke();
    fill(239, 168, 158);
    triangle(258, 250, 140, 250, 258, 100);
    triangle(262, 250, 375, 250, 262, 100);

	strokeWeight(1.5);
	stroke(239, 168, 158);
	line(260, 100, 260, 300);//flag pole

    noStroke();
    fill(239, 168, 158);//color of boat
    arc(255,280, 200, 150, 0, PI); //boat
}

//FISH DETAILS
function drawFish() {
    var tailLength = 7;

    noStroke();
    fill(this.fishColor);
    ellipse(this.fx, this.fy, 12, 6);
    triangle(this.fx + (tailLength / 2.5), this.fy, this.fx + tailLength, this.fy - 2, this.fx + tailLength, this.fy + 2);
}

function makeFish(fishX, fishY) {//fish as object 
    
    var fish = {
    	fishColor: color(random(150,200), 100, 110),
    	fishSpeed: random(-1, -10),
    	fishAction: fishMotion,
        fx: fishX,
        fy: fishY,
        fishMaker: drawFish
    }

    return fish;
}

function fishMotion() { //movement of fish
    this.fx += this.fishSpeed;
    if (this.fx <= -20) {
        this.fx += width;
    }
}

function drawFishies() { //show onto canvas 
    for (i = 0; i < fish.length; i++) {
        fish[i].fishAction();
        fish[i].fishMaker();
    }

}

For this project, I wanted to focus on different aspects that are within a landscape. It was fun to see how many factors make up an environment. With the usage of different topics/functions we learn in labs, I was able to create mountains and water as well as a sea of fish. Lastly, a boat full of people were added to the landscape to show that it is a continuous journey.

Project 11: Landscape

sketchDownload
 /*
Nicholas Wong
Section A
nwong1@andrew.cmu.edu
*/

var rockForeground = []; //Rocks in foreground
var rockMidground = []; //Rocks in midground
var mountains = []; //Mountains in background

//Rock variables
var foregroundRockChance = 0.03; //Probability of rock spawn per frame
var midgroundRockChance = 0.03; //Probability of rock spawn per frame

//Mountain variables
var noiseParam = 1; //Noise param for mountain generation
var noiseStep = 0.01; //Noise step for mountain generation

//Sky variables
var offset = 23; //Wave offset

//Floor grid variables
var lineStart = []; //Line at horizon
var lineEnd = []; //Line at bottom of canvas

function setup() 
{
	frameRate(30);
    createCanvas(480, 300);

    //Initialize mountains
	for(let i = 0; i < width/4; i++)
	{
		var n = noise(noiseParam);
		mountains[i];
		var value = map(n, 0, 1, 0, height);
		mountains.push(value);
		noiseParam += noiseStep;
	}

	//Initialize Floor lines
	for(let i = 0; i<49; i++)
	{
		lineStart[i] = 10*i;
		lineEnd[i] = -1200 + (60*i);
	}

}

function draw() 
{

	background(255, 166, 200);

	//Draw sky wave
	drawSkyPattern();

	//Draw mountains
	drawMountains();

	//Draw floor
	drawFloor();

	//Draw floor lines
	drawFloorLines();


	//Color for rocks
	var foregroundColor = color(115, 31, 77);
	var midgroundColor = color(130, 57, 84);

	//Create rocks based on probability
	if(random(0,1) < foregroundRockChance)
	{
		rockForeground.push(createRock(width + 20,220 + random(0,20),20,random(20,30),foregroundColor)); //Rocks in foreground
	}
	else if (random(0,1) < midgroundRockChance)
	{
		rockMidground.push(createRock(width + 20, 190 + random(-20,20),10, 20, midgroundColor)); //Rocks in background
	}

	//Update positions
	updateMidgroundRocks();
	updateForegroundRocks();
}

//Draw wave
function drawSkyPattern()
{
	push();
	noFill();
	for(let w = 0; w <= height; w += 10) //Number of waves
    {       
        strokeWeight(1)
        stroke(255)

        //Create curvy lines
        beginShape();
		for(let x = 0; x < width; x++)
		{
		    let angle = offset + x *0.01;
		    let y = map(sin(angle), -1, 1, 0, 50);
		    vertex(x,y + w);
		}
		vertex(width,height);
		vertex(0,height);
		endShape();
    }
    pop();


}

//Draw mountains
function drawMountains()
{
	//Add and remove noise values to mountain list
	mountains.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    noiseParam += noiseStep;
   	mountains.push(value);
	

	//Draw mountain shapes based on noise values
    beginShape();
    for(var i = 0; i <= width/4; i++)
    {
	    fill(224, 105, 149);
	    noStroke();
	    vertex((i * 6), mountains[i] - 50); 
	    vertex((i + 1) * 6, mountains[i + 1] - 50);   
	    vertex(300, 100000); 
    }
    endShape(CLOSE);

	//Draw mountain shapes based on noise values
    beginShape();
    for(var i = 0; i <= width/3; i++)
    {
	    fill(191, 86, 125);
	    noStroke();
	    vertex((i * 10), mountains[i]- 10); 
	    vertex((i + 1) * 10, mountains[i + 1] - 10);   
	    vertex(300, 100000); 
    }
    endShape(CLOSE);
}

//Update and cull rocks
function updateForegroundRocks()
{
	for(let i = 0; i < rockForeground.length; i++)
	{
		rockForeground[i].move();
		rockForeground[i].display();

		//Check to see if rocks are off canvas
		if(rockForeground[i].x + rockForeground[i].size < 0)
		{
			rockForeground.shift(); //Remove rock
		}
	}
}

//Update and cull rocks
function updateMidgroundRocks()
{
	//Check to 
	for(let i = 0; i < rockMidground.length; i++)
	{
		rockMidground[i].move();
		rockMidground[i].display();

		//Check to see if rocks are off canvas
		if(rockMidground[i].x + rockMidground[i].size < 0)
		{
			rockMidground.shift(); //Remove rock
		}
	}
}

//Draw floor lines
function drawFloorLines()
{
	push();
	for(let i = 0; i < 49; i++)
	{
		stroke(255, 148, 194);
		strokeWeight(1);

		//Draw line
		line(lineStart[i],170,lineEnd[i],height);

		//Move lines
		lineStart[i] -= 5;
		lineEnd[i] -= 30;

		//Reset lines if off canvas
		if(lineStart[i] == 0)
		{
			lineStart[i] = width;
		}
		if(lineEnd[i] == -1200)
		{
			lineEnd[i] = 1680;
		}
	}
	pop();
}

//Draw floor rectangle
function drawFloor()
{	
	push();
	noStroke();
	fill(158, 70, 102);
	rect(0,170,width,height);
	pop();
}



//Create rock
function createRock(xPos, yPos,rockSpeed, rockSize, rockColor, )
{
	var fRock = {x: xPos, 
				y: yPos,
				speed: rockSpeed * -1,
				sides: random(3,5),
				size: rockSize,
				color: rockColor,
				variation: random(0.5,1),
				move: rockMove,
				display: rockDisplay}
	return fRock;
}

function rockMove()
{
	this.x += this.speed; //Move the rock
}

function rockDisplay()
{
	//Change rock color
	fill(this.color);
	noStroke();

	//Create rock based on size, variation, and number of sides
	let angle = TWO_PI / this.sides;
	beginShape();
	for (let a = 0; a < TWO_PI; a += angle) 
	{
	let sx = this.x + cos(a * this.variation) * this.size;
	let sy = this.y + sin(a * this.variation) * this.size;
	vertex(sx, sy);
	}
	endShape(CLOSE);
}

A stylized desert. Rocks are objects that are randomly generated, and are automatically culled when off the canvas. Rocks further away from the bottom of the canvas move slower than rocks closer to the bottom of the canvas. Mountains vary in speed to give the illusion of depth.

Inspiration:

Mountains eps 10 background view pink Royalty Free Vector

LookingOutwards-11

The Problem of Other Minds by Kate Armstrong

One female artist whom I researched was Kate Armstrong. An example of interesting work that she created was The Problem of Other Minds, which is a voice activated robotic sculpture in a glass orb (http://katearmstrong.com/artwork/robot.php). When it hears words that it recognizes, it unrolls paper that has on it it thoughts, observations and diagrams. I found this really unique because it has an interactive aspect, and humans trigger the action that the robot produces. This work was made in 2006, and the unravelling of paper represents how the robot stored information and is now recalling it. To describe the artist, she is a curator and Vancouver based writer. Her practice is interdisciplinary and she works with generative systems, objects, photography, video and many more fields combining art and technology. She has produced many exhibitions over the years and has experience writing for museums, schools, and various presses about her artistic contributions.

Project 11- Landscape

sketchDownload




//Shruti Prasanth
//Section C
//Project 11


var move = 5; 
var cx = 100; //starting location of clouds
var cy = 100; 
var clouds = []; 
var terrainSpeed = 0.0005; 
var terrainDetail = 0.005; 

function setup() {

    createCanvas(480, 480); 
    frameRate(4); 

    //initial display of clouds  
    for(var i = 0; i < 3; i++){
        var cX = random(width); 
        var cY = random(75, 150); 
        clouds[i] = makeClouds(cX, cY); 

    }

}
   
function draw() {
    background(154,73,147);

    //sun
    noStroke(); 
    fill(236,210,108);
    ellipse(width / 3, height / 3, 125, 125);  

    var mountain1 = mountains("#purple", height * 0.20, height * 0.65, 4); //backmost mountain
    var mountain2 = mountains("darkgrey", height * 0.37, height * 0.65, 2); // middle ground mountains 
    var mountain3 = mountains("grey", height * 0.50, height * 0.65, 3); //foreground mountains 


    //ocean 
    noStroke(); 
    fill(137,172,315); 
    rect(0, height * 0.65, width, height * 0.35); 

    //sun reflection 
    noStroke(); 
    fill(250, 103, 71, 100); 
    arc(width / 3, height * 0.65, 125, 125, 0, PI, OPEN);


    update(); 
    removeClouds(); 
    addCloud();   

}

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

function removeClouds(){ //checks to see where clouds are and changes positions accordingly
    var cloudKeep = []; 
    for(var i = 0; i < clouds.length; i++){
        if(clouds[i].x + 25 > 0){ // cloud is 50 wide, so 25 is point from center
            cloudKeep.push(clouds[i]); 
        }
    }
    clouds = cloudKeep; //keep only clouds still on screen
}

function addCloud(){ //randomly adds clouds at intervals 
    var newCloud = 0.03; 
    if(random(0,1) < newCloud){
        var cloudY = random(75, 150); 
        clouds.push(makeClouds(480, cloudY)); 
    }
}

function cloudMove(){ // move the clouds 
    this.x += this.speed; 
}

function cloudDisplay(){ //draw the clouds 
    fill(255); //white
    noStroke(); 
    ellipse(this.x, this.y, 90, 15); 
    ellipse(this.x - 25, this.y - 10, 35, 30);
    ellipse(this.x, this.y - 20, 40, 40);
    ellipse(this.x + 20, this.y - 15, 35, 30);  

}

function makeClouds(cloudLocX, cloudLocY){ //cloud object definition 
    var cloud = { x: cloudLocX,
                y: cloudLocY,
                speed: -5, 
                move: cloudMove, 
                display: cloudDisplay}

    return cloud; 
} 
function mountains(color, min, max, noiseS) {

    noStroke(); 
    fill(color); 
    noiseSeed(noiseS); 

    beginShape(); 
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail + (millis() * terrainSpeed)); 
        var y = map(noise(t), 0, 1, min, max); 
        vertex(x, y); 
    }
    vertex(width, height); 
    vertex(0, height); 
    endShape(); 




}

For this project, I wanted to play with complimentary colors like purple and yellow and create a different version of a sunset landscape. The clouds are moving and the snow peaked mountains fluctuate in peaks.

Looking Outwards 11

The female artist I found inspirational is Mary Frank. She is an artist and
computational designer that works in immersive and real-time media. One of her artworks, “As Machines Shine” is a beautiful installation piece of liquid
colonies of light in addition to motion-triggered motion composition that flows
with the movement of the installation. This piece responds to another artist,
Kadet Kuhne’s interactive audio called “Abstracted Reflection”. The sculpture
digitally fabricated with wood and acrylic for its membranous qualities, while
the projected illusion is imagery that resembles water. The installation
suggests organisms and movement on a microscopic scale. The projection is real-time and is inspired by spatial algorithms. I find it fascinating that the
machine is able to generate something so organic and random in a way that
can only be found in nature.

Project 11

sketchDownload
var hills = [];
var noiseParam = 0;
var noiseStep = 0.03;
var xTree = [];
var yTree = [];
var car;

function preload() {
    car = loadImage("https://i.imgur.com/dk31naF.png");
}

function setup() {
    createCanvas(400, 250);
    for (var i = 0; i <= width/5; i ++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0 ,height);
        print(n);
        hills.push(value);
        noiseParam += noiseStep;
    }
    frameRate(10);
    imageMode(CENTER);
}

function draw() {
    background(0, 59, 107); //dark sky
    hills.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0 ,height);
    hills.push(value);
    noiseParam += noiseStep;
    for (var i = 0; i < width/5; i ++) {
        var x = i*5;
        noStroke();
        fill(22, 105, 120);
        beginShape(); //drawing the hills
        vertex(x, height);
        vertex(x, hills[i]); 
        vertex(x+5, hills[i+1]);
        vertex(x+5, height);
        endShape();
        //draw tree if hillValue[i] is smaller than the points before & after
        if (hills[i] < hills[i+1] && hills[i] < hills[i-1]) {
            tree(x, hills[i]);
        }
    }
    //insert car image
    image(car, width/2, height/2, 450, 300);

}
function tree(x, hills) {
    fill(1, 120, 33)
    triangle(random(x-2, x-5), hills*1.2, random(x, x+3), 
    hills*0.8, x+5, hills*1.2);
    stroke(46, 19, 19);
    strokeWeight(2);
    line(x, hills*1.2, x, hills*1.5); 
}

This animation shows a baby sitting inside a car in the middle of a long drive at night, staring out into the mountains.

Looking Outwards 11

Bot Party
2017
Jubbies Steinweh-Adler

The project, Bot Party, is an interactive game relying on sound and physical contact with another person.This game is made up of a bunch of cubes which are called bots, which communicate with other users but only when you touch someone else who is holding another Bot. This project was created to help break the ice between strangers. It requires a secret message from each bot that can only be revealed through holding hands with people and experimenting until the message is revealed. The secret messages are randomly generated through software on the main part of the game. I admire how this game uses technology to aid human connection in a playful, lighthearted way. I also think it is really interesting that this software was built to receive human touch inputs from a sensor, this is something I would like to explore with code. This project was created by Pheonix Perry. She works primarily as a game designer, but also founded the Code Liberation Foundation which teaches women between ages 16-60 how to code.


Pheonix Perry

Project 11: Space Rocket

I had a rough week and was unable to complete this code 🙁 It was supposed to be a rocket traveling through space with stars generating in the background and asteroids randomly generating to travel parallel to the ship to give the impression of speed. The two static objects were the rocket and the earth. I drew them myself, trying to get a laugh. But since the code doesn’t work, it just seems overwhelmingly pathetic.

sketchDownload
//jubbies

var stars = [];
var asteroids = [];

var rocket;

var counter = 0;


function preload() { 
    rocket = loadImage("https://i.imgur.com/YMS5MRv.png");
    earth = loadImage("https://i.imgur.com/7N4avKI.png");
} 

function setup() {
    createCanvas(400, 250);
    frameRate(12);

    //setting up the stars - priming the array
    for (var i = 0; i < 140; i++) {
        var sx = random(width);
        var sy = random(height);
        var sWidth = random(20);
        stars[i] = makeStars(rx, ry, 2, sWidth);
    }
    //setting up the asteroids - priming the array
    for (var i = 0; i < 4; i++) {
        var rx = random(width);
        var ry = random(150);
        asteroids[i] = makeAsteroids(rx, ry);
    }
    
}

function draw() {
    background('black');

    //EARTH (BEHIND ALL)
    image(earth, 270, 40, 50, 50);
  
    //STARS
    updateAndDisplayStars();
    removeStarsOutOfView();
    addNewStars();

    //ASTEROIDS
    updateAndDisplayAsteroid();
    removeAsteroidsOutOfView();
    addNewAsteroids();
    
    //ROCKET
    image(rocket, 30, 140, 150, 80);
    
    counter++;
}

//STARS- ALL FUNCTIONS
function updateAndDisplayStars(){
    for (var i = 0; i < stars.length; i++){
        stars[i].stepFunction();
        stars[i].drawFunction();
    }
}

function removeStarsOutOfView(){
    //dropping off old stars
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].width > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}

function addNewStars(){
    var newstars = 0.455
    if (random(0, 1) < newstars) {
        stars.push(makeStars(255, 255, 3, random(1, 10));
    }
}

function starsStep() {
    this.x -= this.dx;
}

function starsDraw() {
    stroke(this.c);
    strokeWeight(this.size);
    point(this.x, this.y);
}

function makeStars(sx, sy, sdx, sWidth) {
    var s = {x: sx, y: sy, dx: sdx, 
        width: sWidth,
        c: fill(255),
        drawFunction: starsDraw, stepFunction: starsStep
    }
    return s
}