<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js" type="text/javascript"></script>

    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Rubik+Vinyl&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Monoton&display=swap" rel="stylesheet">

body{
/* background-color: rgba(255, 121, 0, 1); */
background-color: rgba(255, 242, 117, 1);
}

.poem{
/* font-family: Rubik Vinyl; */
/* font-family: Alfa Slab One; */
font-family: Monoton;
  color: rgba(255, 242, 117,.7);
font-size: 21px;
width: 75%;
letter-spacing: 1.3px;

}

#canvas{

	position: absolute;
  top:0;
	z-index:-1;
}

//next steps could try to use velocity to animate the opacity of the words coming in
//variables for the suns
var suns = [];
var attractor;

var angle;

// variables for canvas and window width and height to place the canvas correctly
var c;
var window_width;
var window_height;
var x;
var y;
var a;
var b;
var elem;
var k = 6;
var t = 0.01;
var myFont;
function preload() {
  // myFont = loadFont('BEBAS___.ttf');
}
//function to center the p5 canvas, with window resized function at bottom which refreshes the value every time the window size is adjusted to make canvas responsive
// function centerCanvas() {
// var x = (windowWidth - width) / 2;
// var y = (windowHeight - height) / 2;
// c.position(x, y);
// }
function setup() {
// variables to hold the window width and height
window_height = windowHeight;
window_width = windowWidth;
//create canvas
c=  createCanvas(window_width, window_height);
//center the canvas
// centerCanvas()
//add id to canvas to make its position absolute
c.id('canvas');
   var poem = 
    [
        "A Flower bursting into being ",
    "The emerging spiral of history",
    " the convergence of stories", "into the pattern of reality",
    "The persistance of time ",
    "A flaming star ",
     "erupting out from the core",
    "the way something slowly makes its way into being", 
      "from the nothing stew",
    "the way the truth is revealed", "a swelling heart"]
    // position of text
    var a = windowWidth/3;
    var b = 200;
  
  //create text
    for (var i = 0; i < poem.length;i++){
      console.log(poem[i])
    var elem = createP(poem[i])
    elem.position(a,b)
    elem.addClass('poem')
      b+= 30; 
   }
//set initial angle for the circle bars
angle = PI;
//push starting suns into the suns array which will be used to draw suns to canvas below in the draw functon. This is calling from the file suns.js
  
//  LEVER 
//Right now set to begin with just one. But other values are enjoyable as well and can be easily adjusted by changing the value that is currently 1 in the for loop section below: ' i<1'; e.g. 'i<20'
for (var i = 0; i < 20; i++) {
//create the possibility for improvisation by setting a random range for the new suns to begin
suns.push(new Sun(random(0.1, 0.2), random(width), random(height)));
}
}
function draw() {
  translate(windowWidth/2, windowHeight/2)
  // frameRate(10)
//set the initial stroke and fill for the canvas
stroke(50)
    textSize(18)
  //is this stroke doing anything?
   
    // strokeWeight(22);
      for (var i = 0; i < 1; 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();
  }
}
var Sun = function(m, x, y) {
  // LEVER
 this.mass = .01;
  this.position = createVector(x, y);
  this.velocity = createVector(0, 0);
  this.acceleration = createVector(0, 0);
  //LEVER?
  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() {

// var word = createP('WE');
//     var selector = select('#myCanvas')
//     word.parent(selector)
    // ellipse(this.position.x, this.position.y, this.mass*16, this.mass*16);
beginShape();
    
// LEVERS Colors of Shapes
fill('rgba(10, 1, 79,.1)')
//birhgt orange    
// stroke('rgba(255, 242, 117, .1)')
    
//hot blue
stroke('rgba(82, 178, 207, .1)')
// fill('rgba(53, 92, 125, .5)')

    
// LEVER Mass by changes the shape a great deal -- making it .009 makes it a smaller circle 
var massBy = 0.005;
    for (var a = 0; a < TWO_PI; a += 0.01) {
      // this.r = 200 * sin(k * this.a);
      this.r = 200 * noise(sin(k * this.a), t);
      this.position.x = this.r * cos(this.a);
      this.position.y = this.r * sin(this.a);
      point(this.position.x, this.position.y);
      ellipse(this.position.x, this.position.y, this.mass * massBy, this.mass * massBy)
      vertex(this.position.x, this.position.y);
//          beginShape();
// vertex(this.position.x*i, 20);
// vertex(this.position.x*i, 20);
// vertex(this.position.x*i, 75);
// vertex(this.position.x*i, 75);
// endShape(CLOSE);
      
      this.a += 0.01;
      this.mass += 0.02;
    }
    endShape(CLOSE);
  };
  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;
    }
  };
};
//function to make a new Sun every time the button is pressed
function newOne(){
suns.push(new Sun(random(0.1, 0.2), random(width), random(height)));
}
//function to draw the circle bars
//function to recenter the canvas everytime the window is resized to make responsive on desktop
function windowResized() {
// centerCanvas();
window_height = windowHeight;
window_width = windowWidth;
}