<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 doesn't use any external CSS resources.