# 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);

}```