<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">



<!-- <h1>A Language where</h1> -->
<h1>And</h1>
  
<div class = "quote">
  "everything you change changes you"
</div>
body {
  background: #fcfcfc;
  font-family: 'Oswald', sans-serif;
  color: #444;
  font-size: 16px;
  border: 5px solid #444;
  width: 95%;
  height: 650px;
   margin-left: auto;
  margin-right: auto; 
/*   text-align: center; */
  
}

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* trying to figure out how to center horizintally and vertically */
.thing {
/* position: absolute;
  margin-top: auto;
  margin-bottom: auto; */
}

h1 {
  font-size: 260%;
  line-height: 1.2em;
  text-align: center;
}

.quote{
  text-align: center; font-size:190%
}

#cyto{
  width:100%; 
 height:300px;
  z-index:1;
}
/* #cyto{
	  height: 100%;
  width: 100%;
  position: absolute;
  // left: 0;
  top: 25%;
    // display: block;
    font-family: 'Work Sans', sans-serif !important;

} */
var constellations = [];
var movers = [];
var graphics;
var graphicsTwo;
var graphicsToo;
var startOffset=0;
var xpos = 30;
var dir = 1;
var speed = 2;
var x;
var y;
var c;

// function centerCanvas() {
// var x = (windowWidth - width) / 2;
// var y = (windowHeight - height) / .5;
// c.position(x, y);
// }
function preload() {
    myFont = loadFont("https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/Oswald-Medium.ttf");
}
//    fontRegular = loadFont("https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/Oswald-Medium.ttff");

// }
function setup() {
  // window_width = 600;
  window_width = windowWidth;
  window_height = windowHeight;
  // window_height = 400;

//create canvas
// c=  createCanvas(window_width-(window_width/4), 500);
c= createCanvas(1000, 400);
c.position(200, 200);
  
//center the canvas
// centerCanvas()
  // c= createCanvas(windowWidth-150, 360);
  // c.id('myCanvas');
  
    //this draws to the invisible canvas in the computer memory
  //this lets you ;leave a trail' and have a background color

      graphics = createGraphics (windowWidth-0,100)
    // graphicsTwo = createGraphics (windowWidth-10,40)
  // graphicsToo = createGraphics (windowWidth-150,150)
  // graphics.background('rgba(12, 56, 95,0.05)');
  
  // graphics.background('rgba(6, 47, 79, 1)');
 graphics.background('rgb(6, 47, 79)')

  // graphicsTwo.background('rgba(6, 47, 79, .9)');
  // graphicsToo.background('rgba(6, 47, 79, .9)');
  // graphicsToo.background('rgba(184, 84, 20, 1)');
  
  
  // graphics.background('rgba(17, 9, 30, 1)');
 
//using p5 audio to instantiate an instance of audio in
         // mic = new p5.AudioIn();
   //start taking audio data from the computer's built in mic
   // mic.start();
   //create an instance of p5's fft method to visualize audio
   // fft = new p5.FFT();
   //set the mic-from audioIn to be the input for the fft visualizer
   // fft.setInput(mic);

   //next I want to tie the fft input to the behavior of the balls
    // fill('#EF6E73');

  for (var i = 0; i < 20; i++) {
    // fill('rgba(239, 110, 115, 1)');
   
    movers[i] = new Mover(random(0.1, 5), 0, 0);
    // constellations[i] = new Constellation(random(0.1, 5), 0, 0);
  }
}

function draw() {
 
  // background('rgba(8, 44, 53,.09)');
  background('rgba(95, 47, 243, .009)');
       image(graphics, 0, 0)
       // image(graphicsToo, 50, 100)
       // image(graphicsTwo, -50, 300)
  
  // graphics.fill(0, 255, 0, 100)
  // graphics.fill('rgba(0, 255, 0, 1)')
  // graphics.fill('rgba(222, 231, 242,1)')
    
  

   //p5 method beginShape following the following logic
//   beginShape();
// vertex(30, 20);
// vertex(85, 20);
// vertex(85, 75);
// vertex(30, 75);
// endShape(CLOSE);
  //set up the fft analyzer 
     // var spectrum = fft.analyze();
// console.log(spectrum)
// fill('rgba(12, 56, 95, .05)')

   beginShape();
   //draw out the fft spectrum as visualization
   // for (i = 0; i<spectrum.length; i++) {
     //maping spectrum i from a value between 0 and 225 to a value between height and 0
     //where is the height value coming from
    // vertex(i, map(spectrum[i], 0, 255, height, 0) );
   // }
   endShape();
   
   // for (var i = 0; i < movers.length; i++) {
   for (var i = 0; i < 1; i++) {
     
    var wind = createVector(0.01, 0);
    var gravity = createVector(0, 0.1);
    movers[i].applyForce(wind);
    movers[i].applyForce(gravity);
    movers[i].update();
    movers[i].display();
    movers[i].checkEdges();
  }
  // for (var i = 0; i <constellations.length; i++) {
  //   var wind = createVector(0.01, 0);
  //   var gravity = createVector(0, 0.1);
  //   constellations[i].applyForce(wind);
  //   constellations[i].applyForce(gravity);
  //   constellations[i].update();
  //   constellations[i].display();
  //   constellations[i].checkEdges();
  // }
}


// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com

var Mover = function(m, x, y) {
  this.mass = m;
  this.position = createVector(x, y);
  this.velocity = createVector(0, 0);
  this.acceleration = createVector(0, 0);

  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() {
    textSize(36)
    textFont(myFont);
    stroke('rgba(238, 229, 230, 1)')
     // stroke('rgba(17, 9, 30, 1)')
    // strokeWeight(12);
    // fill(255, 127);
    //font color
    // fill('rgba(238, 229, 230, 1)')
    
    // fill('rgba(17, 9, 30, 1)')
    fill('rgba(238, 229, 230, 1)')

    var poem = [ "everything", "you change", "changes", "you"]
    for (var i = 0; i < poem.length;i++){
    text(poem[i], this.position.x*i, this.position.y);
    }
// var word = createP('WE');
//     var selector = select('#myCanvas')
//     word.parent(selector)
    // ellipse(this.position.x, this.position.y, this.mass*16, this.mass*16);
  };

  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 windowResized() {
// centerCanvas();
// window_height = windowHeight;
// window_width = windowWidth;
}
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js
  4. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js
  5. //cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.ui.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js
  7. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.sound.min.js