Trippy Solar System

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

 }