Atelier Exp 2

atelier-exp-2.markdown

Atelier Exp 2

A Pen by Brian Nguyen on CodePen.

License.

script.js

// fifty points at random
// evenly distributed
// all should connect by straight lines


let num = 15;
let xp, yp;
let points = [];
let speed = 2;
let controlPoints = [];
let color = [];
let prevMouse = [];
let newPoints = [];

function setup(){
  createCanvas(windowWidth, windowHeight);
  background(0);
  strokeWeight(1.25);
  controlPoints[0] = width/2
  controlPoints[1] = height/2
  controlPoints[2] = width/2
  controlPoints[3] = height/2
  newPoints= [width, height, width, height]
  color = [random(100,255), random(100,255), random(100,255), 100]
  prevMouse = [mouseX, mouseY]

  for(let i=0; i<num; i++){
    let p = {
      xp: random(0, width),
      yp: random(0, height),
    };
    points[i] = p;
    console.log("loop 1")
    
}
  
}

function draw(){
  background(0,0,0,190)
    // background(0,0,0,255)

     fill(255, 160,20,255)
  for (let j=0; j<points.length; j++){
      console.log("loop 2")
    

      
      points[j].xp = points[j].xp + random(-1, 1) * speed;
      points[j].yp = points[j].yp + random(-1, 1) * speed;
    
    
    if(points[j].xp > width) {
      points[j].xp = width;
    } else if (points[j].xp <= 0) {
      points[j].xp = 0;
    }
    
    if(points[j].yp <=0) {
      points[j].yp = 0;
    } else if(points[j].yp > height) {
      points[j].yp = height;
    }
      
      stroke(color[0], color[1],color[2], color[3]);
      fill(color[0], color[1],color[2],255)
      ellipse(points[j].xp, points[j].yp, 12,12)
        fill(0,0,0,0)

    
    for(let i=0; i<points.length; i++) {
            // stroke(random(150,255), random(0,80), random(0,80))
//             stroke(255, 0,0, 100);

//         line(points[j].xp, points[j].yp, points[i].xp, points[i].yp)
      
      
                  stroke(color[0], color[1],color[2], color[3]);

//       bezier(points[j].xp, points[j].yp, width/2, height/2, width/2, height/2, points[i].xp, points[i].yp)
 
      bezier(points[j].xp, points[j].yp, controlPoints[0] ,controlPoints[1], controlPoints[2], controlPoints[3], points[i].xp, points[i].yp)


    }
    
  }
  
let dx = newPoints[0] - controlPoints[0];
 controlPoints[0] += dx * 0.05;
  let dy = newPoints[1] - controlPoints[1];
 controlPoints[1] += dy * 0.05;
  
  let fx = newPoints[2] - controlPoints[2];
 controlPoints[2] += fx * 0.05;
  let fy = newPoints[3] - controlPoints[3];
 controlPoints[3] += fy * 0.05;

  // DEBUG
  
  fill(255,0,0)
  ellipse(controlPoints[0], controlPoints[1], 50,50)
    ellipse(controlPoints[2], controlPoints[3], 50,50)
  fill(0,255,0)
    ellipse(newPoints[0], newPoints[1], 50,50)
      ellipse(newPoints[2], newPoints[3], 50,50)



}
    

function keyTyped() {
  if(key === " ") {
    
//       for(let i=0; i<num; i++){
//     let p = {
//       xp: random(0, width),
//       yp: random(0, height),
//     };
//     points[i] = p;
//     console.log("loop 1")
    
// }
      color = [random(100,255), random(100,255), random(100,255), 100]
  
  // controlPoints = [random(-50, width + 50), random(-50, height + 50), random(-50, width + 50), random(-50, height + 50)]
    
     newPoints = [random(-50, width + 50), random(-50, height + 50), random(-50, width + 50), random(-50, height + 50)]

  }

}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>

style.css

/* these styles remove the space & scrollbars around the canvas */  
body {
  margin:0; 
  padding:0;
}

canvas {
  display:block;
}