CodePen Embed - p5 creative programming celestial objects- Plotron Suns

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<div id = "controlPanel"> </div>


@font-face { font-family: shkoder; font-weight: bold; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/Shkoder%201989%20Light.otf');}

body{
background-color: rgba(0, 1, 13, 1);
/*     background-color: rgba(49, 59, 74,1); */

font-size: 27px;
font-family: 'Oswald', sans-serif;
/* background-color: rgba(40, 40, 40, .7); */
}

#hideShow{
   width: 80px;
  height:50px;
  border-radius: 5%;
  font-family: 'Oswald', sans-serif;
  background-color: transparent;
  color: white;
  font-size: 16px;
  position: absolute;
  left: 80vw;
  top:0;
}
#controlPanel{
  position: absolute;
  top: 0vh;
  left: 70vw;
}

.controls{
  height:25px;
  float:left;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  background-color: transparent;
  color: white;
  font-size: 16px;
  opacity: .9;
  width: 75%;
  margin: .9em;
}

button:focus {outline:0;}
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 0.7px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #484d4d;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 27px;
  width: 18px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.93);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #545a5a;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #484d4d;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 27px;
  width: 18px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.93);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #3c4040;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #484d4d;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 27px;
  width: 18px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.93);
  cursor: pointer;
  height: 25.6px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #484d4d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #545a5a;
}

var suns = [];
var c, window_width, window_height;
//variables for sun function
var m, x, y;
var k = 6;
var t = 0.1;
//variables for poem
var positionX;
var positionY;
var elem;
var myOutline, myColor;
var colors, slider;
function reSize(){
  window_height = windowHeight;
  window_width = windowWidth;
  //create canvas
  c = createCanvas(window_width, window_height);
  c.id("phyCanvas");
}
function setup() {
  reSize()
  var controlsY = 100;
  let flag = false;
  

  /* CONTROL PANEL */
    /* CONTROL PANEL */
  var hideShowButton = createButton('controls')
  hideShowButton.id('hideShow')
  hideShowButton.mousePressed(hideShow)
  function hideShow(){
  var selector = select('#controlPanel')
    if(flag){
  selector.hide()
    flag = !flag;
    }
  else {
    selector.show()
    flag = !flag
    }
  }
  
  let panelSelector = $('#controlPanel')
  
  var elem = createP("SPEED:")
  elem.id('speed')
  elem.addClass('controls')
  var speedGrabber = $('#speed')
  panelSelector.append(speedGrabber)
  elem.style('color', "#FCFCFC")  
  
  slider = createSlider(0, 15, 3);
  slider.id('slider')
  slider.style('width', '175px');
  slider.addClass('controls')
  var $slider = $('#slider')
  panelSelector.append($slider)
  
 
  var button = createButton('STOP')
  button.id('myButton')
  button.addClass('controls')
  var buttonSelector = $('#myButton')
  panelSelector.append(buttonSelector)
  button.mousePressed(stop)

  var startButton = createButton('START')
  startButton.id('startButton')
  startButton.addClass('controls')
  var buttonSelectorTwo = $('#startButton')
  panelSelector.append(buttonSelectorTwo)
  startButton.mousePressed(start)
  
  
  var saveButton = createButton("SAVE");
  saveButton.id('saveButton')
  saveButton.mousePressed(saveMe);
  saveButton.addClass('controls')
  var buttonSelectorThree = $('#saveButton')
  panelSelector.append(buttonSelectorThree)
  panelSelector.hide()
  

  function saveMe() {
    saveCanvas(c, "myCanvas", "jpg");
  }
  
  function stop(){
noLoop()
}
function start(){
loop()
console.log('bye')
}
  
 /* Creating Colors */
   
    hotYellow =color('rgba(248, 250, 15, .09)');
    hotMagenta =color('rgba(206, 108, 128,.09)');
    hotPurple =color('rgba(93, 44, 153, .09)');
    hotPink =color('rgba(177, 67, 161, .09)');
    hotBeige =color('rgba(233, 176, 133, .09)');
    frameColor = color('rgba(252, 252, 252, .01)');
    ocOrange =color('rgba(245, 78, 101, .5)');
    deepBlue = color('rgba(9, 14, 103, .09)');
    briteAqua = color('rgba(7, 225, 255, .09)');
    pPink = color('rgba(187, 0, 194, .`09)');
    lBlue = color('rgba(2, 86, 215, .2)')
    lPink = color('rgba(254, 69, 136, .09)')
    lTeel = color('rgba(202, 251, 229, .09)')
  babyBlue = color('rgba(11, 79, 145, .09)');
  lazyBlue = color('rgba(211, 246, 250, .09)')
  babyRed = color('rgba(154, 2, 29, .08');
  greatGrey = color('rgba(49, 59, 74,.01)')
  lWhite = color('rgba(246, 247, 241, .09)')
  anotherPink = color('rgba(218, 40, 101, .09)')
  theDeep = color('rgba(23, 165, 163, .01)')
  spaceYellow = color('rgba(251,171,82, .1)')
  spaceRed = color('rgba(107,23,13, .1)')
  spaceLiteRed = color('rgba(184,83,73, .1)')
  spaceWhite = color('rgba(247, 243, 232, .1)')
  spaceGrey = color('rgba(213, 225, 221, .1)')
  spaceBlue = color('rgba(119, 190, 210, .1)')
  explodingOrange = color('rgba(246, 73, 74, .1)')
  // spaceYellow = color('')
  
  
  
  pg = createGraphics(1000, 1000);
  pg.background(greatGrey);
  
  image(pg, window_width-(window_width-50), window_height-(window_height-50), window_width-80,window_height-80);
  //push starting shapes into an array
  for (var i = 0; i < 1; i++) {
    suns.push(new Sun(random(5, 25), random(width), random(height)));
  } //end for loop
} //end setup


function draw() {
  var val = slider.value();
  console.log(val)
  frameRate(val);
translate(window_width/2, window_height/2);
//drawing the sun to the canvas

for (var i = 0; i < suns.length; i++) {

var wind = createVector(0.01, 0);
var gravity = createVector(0, 0.1);
suns[i].applyForce(wind);
suns[i].applyForce(gravity);
suns[i].update();
suns[i].display();
suns[i].checkEdges();
} //end for loop
} // end draw


//function to create the sun

var Sun = function(m, x, y) {
this.mass = 0.01;
this.position = createVector(x, y);
this.velocity = createVector(0, 0);
this.acceleration = createVector(0, 0);
this.a = 50;
this.applyForce = function(force) {
var f = p5.Vector.div(force, this.mass);
this.acceleration.add(f);
};
this.update = function() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.acceleration.mult(0);
};
this.display = function() {
   strokeWeight(.1)

  beginShape();

var massBy = 0.02;
for (var j = 0; j < TWO_PI; j += 0.01) {

  this.r = window_height/5 * noise(sin(k * this.a), t);
  this.position.x = this.r * cos(this.a);
  this.position.y = this.r * sin(this.a);
  
  stroke(explodingOrange)
  // fill(lWhite)
  noFill()
// create the shapes that will make up the sun
  point(this.position.x, this.position.y);
 
  // vertex(this.position.x, this.position.y);
 
  vertex(this.position.x*-PI, this.position.y*-PI);
     // quadraticVertex(this.position.x * -massBy, this.position.y * -massBy, this.position.x * -PI, this.position.y * PI); 
  point(this.position.x*massBy, this.position.y*massBy);
  point(this.position.x, this.position.y);
  
  point(this.position.x*TWO_PI, this.position.y*TWO_PI);
 vertex(this.position.x*-PI, this.position.y*-PI); 

//velocity baby!
this.a += 0.01;
this.mass += 0.2;
} //end for loop

endShape(CLOSE); 

  /* shape 2 */
  beginShape();
var massBy = 0.002;
for (var j = 0; j < TWO_PI; j += 0.01) {

  this.r = window_height/5.5 * noise(sin(k * this.a), t);
  this.position.x = this.r * cos(this.a);
  this.position.y = this.r * sin(this.a);
//   stroke(lPink)
  strokeWeight(5)
  // fill(spaceYellow)
  fill(spaceRed)
  // stroke(explodingOrange)
  stroke(spaceYellow)
  // stroke(spaceWhite)
  // noFill()
//  vertex(this.position.x*-PI, this.position.y*-PI); 
 ellipse(this.position.x, this.position.y, this.mass * massBy, this.mass * massBy);
 ellipse(this.position.x* HALF_PI, this.position.y* HALF_PI, this.r, this.r);
  
 // ellipse(this.position.x * TWO_PI, this.position.y*TWO_PI, this.mass * massBy, this.mass * massBy);
//velocity baby!
this.a += 0.01;
this.mass += 0.2;
}
endShape(CLOSE); 
  
    /* shape 2: simulacra */
  beginShape();
var massBy = 0.002;
for (var j = 0; j < TWO_PI; j += 0.01) {

  this.r = window_height/5.5 * noise(sin(k * this.a), t);
  this.position.x = this.r * cos(this.a);
  this.position.y = this.r * sin(this.a);
//   stroke(lPink)
  strokeWeight(5)
  // fill(spaceYellow)
  fill(spaceRed)
  stroke(explodingOrange)
  // stroke(spaceYellow)
  // stroke(spaceWhite)
  // noFill()
//  vertex(this.position.x*-PI, this.position.y*-PI); 
 ellipse(this.position.x* HALF_PI, this.position.y* HALF_PI, this.r, this.r);
 // ellipse(this.position.x * TWO_PI, this.position.y*TWO_PI, this.mass * massBy, this.mass * massBy);
//velocity baby!
this.a += 0.01;
this.mass += 0.2;
}
endShape(CLOSE); 
//     /* shape 2: second simulacra */
//   beginShape();
// var massBy = 0.002;
// for (var j = 0; j < TWO_PI; j += 0.01) {

//   this.r = window_height/5.5 * noise(sin(k * this.a), t);
//   this.position.x = this.r * cos(this.a);
//   this.position.y = this.r * sin(this.a);
// //   stroke(lPink)
//   strokeWeight(5)
//   // fill(spaceYellow)
//   fill(spaceRed)
//   stroke(explodingOrange)
//   // stroke(spaceYellow)
//   // stroke(spaceWhite)
//   // noFill()
// //  vertex(this.position.x*-PI, this.position.y*-PI); 
//  ellipse(this.position.x* PI, this.position.y* PI, this.r, this.r);
//  // ellipse(this.position.x * TWO_PI, this.position.y*TWO_PI, this.mass * massBy, this.mass * massBy);
// //velocity baby!
// this.a += 0.01;
// this.mass += 0.2;
// }
// endShape(CLOSE); 
    /* shape 3 */
  
  beginShape();
  strokeWeight(.1)

var massBy = 0.002;
for (var j = 0; j < TWO_PI; j += 0.01) {

  this.r = window_height/5.5 * noise(sin(k * this.a), t);
  this.position.x = this.r * cos(this.a);
  this.position.y = this.r * sin(this.a);
  stroke(spaceYellow)
  // fill(lTeel)
  // stroke(lTeel)
  noFill()
    vertex(this.position.x*-TWO_PI, this.position.y*-TWO_PI); 
       quadraticVertex(this.position.x, this.position.y, this.position.x * PI, this.position.y * -PI);
 
//  vertex(this.position.x*-PI, this.position.y*-PI); 
 // ellipse(this.position.x, this.position.y, this.mass * massBy, this.mass * massBy);
//velocity baby!
this.a += 0.01;
this.mass += 0.2;
} //end for loop

endShape(CLOSE); 
}; //end display funtion

//check edges function
this.checkEdges = function() {
if (this.position.x > width) {
this.position.x = width;
this.velocity.x *= -1;
} else if (this.position.x < 0) {
this.velocity.x *= -1;
this.position.x = 0;
}
if (this.position.y > height) {
this.velocity.y *= -1;
this.position.y = height;
}

}; //end check edges function


}; //end sun function


//function to recenter the canvas everytime the window is resized to make responsive on desktop
function windowResized() {
reSize()
}

This Pen is owned by Daniel Silber-Baker on CodePen.

See more by @Daniel_Silber-Baker on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js