# Ideation

For the second Computational Media homework we were tasked with either reconfiguring our first homework to add more degrees of functionality; i.e. animated elements, less hardcoded numbers, and elements that change over time. We could also choose to do something completely different.

I chose to make a solar system with different interactive elements. I decided to do this in part because I had been thinking about the talk Carter Emmart had given to the applications class the week before.

The initial idea for the project was to have the planets in the solar system revolve around the sun with their own, different, gravitational pulls. I also wanted to have asteroids randomly shoot around the screen and have some other effects in place. Implementing some of these ideas was more time consuming than I had initially thought they would be. The most difficult part was creating the different gravitational pulls on the planets. So after a lot of trial and error I decided to go for a less realistic galaxy system and make a trippy one.

Below you can see the end product:

As shown above, the solar system has planets that rotate around the sun. Each planet has a random starting angle and orbit so that they start in different positions and rotate on a slightly different axis each time the program is run. After deciding against using different gravitational pulls I researched best practices for rotation around a set point. This piece of code on open processing helped in my decision to use basic sinusoidal functions to create the rotation. I decided to not show the rings immediately but rather give the user the option of showing the rings if they wanted to, by using a checkbox.

The most spastic part of the program is the “asteroids” flashing around and the “flares” being emitted in a circular pattern from the Sun. I spent some time trying different methods of creating asteroids that would shoot around the screen but after playing around with translation and push()/pop() I found that I enjoyed the way the ring looked when it expanded and shrank around the sun. After adding some effects to change the shape and color randomly it seemed appropriate to call them solar flares. Finally, I added a little space ship that follows

# After the Fact

I thought the homework was a good introduction to various p5.js fundamentals, including push(), pop(), translate, and preset variables. This homework also brought to light some limitations I have right now with my thought process and programming abilities and fundamentals that I need to refresh or get better at. Given more time and patience I would have tried harder to implement the gravitational pull and added some extra cosmic type effects. Overall, I thought was enjoyable to play with the code and make something that was interesting; even if the outcome was different than I had imagined it would be.

# Code:

/* * Morgan Mueller * ICM Homework 2 * 09/17/18 *Trippy Solar System */ let sunX,sunY,sunW,sunH;//sun let ringX,ringY; let planetX,planetY; let asteroidX, asteroidY; let asteroidLocX, asteroidLocY; //spaceship variables let spaceShipX = 0; let spaceShipY = 0; //let changeX, changeY; let easing = .05; //let mouseLocX, mouseLocY; let angle1, angle2, angle3, angle4, angle5; let speed = .01; //speed of planets let asteroidSpeed = 1; let c = 250; //center constant let radius = 50; let mercOrbit, venOrbit, earOrbit, marOrbit, jupOrbit; //each planet's orbit let ringCheckbox; let sunR; function setup() { createCanvas(500, 500); ellipseMode(CENTER); sunX=width/2; sunY=height/2; //planet's orbit is a random number between 0 and 10 mercOrbit=random(8); venOrbit=random(15), earOrbit=random(18), marOrbit=random(20), jupOrbit=random(25); // asteroidLocX=random(width / 2); asteroidLocY=random(height / 2); asteroidX = random(5, 10); asteroidY = random(5, 10); //Checkbox to display the orbital rings when clicked fill(255); ringCheckbox =createCheckbox('rings',false); ringCheckbox.changed(showRings); ringCheckbox.position(10,20); //dictates the starting point of each planet angle1 = random(-2,3); angle2 = random(-5.6,0.6); angle3 = (-0.2,0.9); angle4 = (-3.14,3.14); angle5 = (0,6.28); //random r value for sun bursts sunR = random(220,255); } //planet rings function showRings(){ if (ringCheckbox.checked()){ stroke(255); noFill(); ellipse(sunX,sunY,ringX,ringY); ellipse(sunX,sunY,ringX*1.75,ringY*1.75); ellipse(sunX,sunY,ringX*2.5,ringY*2.5); ellipse(sunX,sunY,ringX*3.25,ringY*3.25); ellipse(sunX,sunY,ringX*4,ringY*4); } else{ } } //sun size sunW=60; sunH=60; //planet size ringX=100; ringY=100; function draw() { background(0); //display rings function called showRings(); /* drawPlanet function. This function creates a planet at a base location with an initial speed and angle. When called the user can modify the location and orbit rotation. */ function drawPlanet(cx,orbit,angle,radius,speed1,ringW,ringH){ planetX = c + mercOrbit + sin(angle) * radius; planetY = c + mercOrbit + cos(angle) * radius; angle = angle+speed; ellipse(planetX,planetY,ringW*1.75,ringH*1.75); } //sun and sun spots noStroke(); fill(253, 184, 19); ellipse(sunX,sunY,sunW,sunH); fill(255, 153, 0); ellipse(sunX +10,sunY + 5,10,10); fill(255, 0, 0); ellipse(sunX - 10,sunY - 10,12,12); fill(0); ellipse(sunX - 10,sunY - 10, 7,7); //mercury fill(213, 210, 209); stroke(0); drawPlanet(250,mercOrbit,angle1,radius,speed,11,11); angle1=angle1+speed; //Venus fill(139,160,130); stroke(0); drawPlanet(250,venOrbit,angle2,radius*1.5,speed,14,14); angle2=angle2+speed; //Earth fill(125,68,29); drawPlanet(250,venOrbit,angle3,radius*2.3,speed,17,17); angle3=angle3+speed; //Mars fill(193,68,14); drawPlanet(250,venOrbit,angle4,radius*3.25,speed,15,15); angle4=angle4+speed; //Jupiter fill(216,202,157); drawPlanet(250,venOrbit,angle5,radius*4.3,speed,20,20); angle5=angle5+speed; //sun flare fill(sunR,random(255),random(255)); noStroke(); asteroidLocX = asteroidLocX + asteroidSpeed; asteroidLocY = asteroidLocY + asteroidSpeed; //reset asteroid speed if its off screen if(asteroidLocX > width || asteroidLocX < 0 || asteroidLocY > height || asteroidLocY < 0){ asteroidSpeed = random(-5,5); } if(asteroidLocX > width || asteroidLocX < 0){ asteroidLocX = width / 2; } if(asteroidLocY > height || asteroidLocY < 0){ asteroidLocY = height / 2; } //creates the ring of solar flares push(); translate(width / 2, height / 2); for(let i = 0; i < 500; i++){ push(); rotate(i * -10); let randX = random(2,10); let randY = random(2,10); ellipse(asteroidLocX,asteroidLocY,randX,randY); pop(); } pop(); //spaceship let mouseLocX = mouseX; let mouseLocY = mouseY; let changeX = mouseLocX - spaceShipX; let changeY = mouseLocY - spaceShipY; spaceShipX = spaceShipX + changeX * easing; spaceShipY = spaceShipY + changeY * easing; fill(255,165,0); rect(spaceShipX-7,spaceShipY+9,16,3); rect(spaceShipX-7,spaceShipY+3,16,3); fill(255, 0, 0); rect(spaceShipX-5,spaceShipY+2,15,5); rect(spaceShipX-5,spaceShipY+8,15,5); fill(0,0,255); rect(spaceShipX,spaceShipY,50,15,0,100,100,0); //spaceship name fill(255); text("Enterprise",spaceShipX+3,spaceShipY+10); //for loop that makes asteroids appear for(j = 20; j<25; j++){ fill(255); ellipse(random(width),random(height),10,10); } //text for rings textSize(10); fill(255); text('Display Rings',12,20); }