Wandering Ribbon

index.html

<div id="controls">
</div>

script.js

let points = [];
let colors = [];
const numGroups = 2;
const depth = 3000;

function Point(x, y){
  this.x = x;
  this.y = y;
  this.a = random()*PI*2;
  this.dx = cos(this.a)/2;
  this.dy = sin(this.a)/2;
  
  this.sx = x;
  this.sy = y;
  this.a2 = random()*PI*2;
  this.sdx = cos(this.a2)*3;
  this.sdy = sin(this.a2)*3;
  
  this.aMod = random()/400 + .001;
  
  this.tick = function(){
    this.x += this.dx;
    this.y += this.dy;
    if (this.x < 0 || this.x > width) this.dx *= -1;
    if (this.y < 0 || this.y > height) this.dy *= -1;
  }
  
  this.tick2 = function(){
    this.sx += this.sdx;
    this.sy += this.sdy;
    if (this.sx < 0 || this.sx > width) this.sdx *= -1;
    if (this.sy < 0 || this.sy > height) this.sdy *= -1;
    this.sx = constrain(this.sx, 0, width);
    this.sy = constrain(this.sy, 0, height);
  }
  
  this.reset = function(){
    this.x = this.sx;
    this.y = this.sy;
    
    this.a -= this.aMod;
    this.dx = cos(this.a)/2;
    this.dy = sin(this.a)/2;
  }
}

function setup(){
  createCanvas();
  colorMode(HSB, 360, 100, 100, 100);
  ellipseMode(CENTER);
  windowResized();
}

function draw(){
  background(0);
  if (colors.length < 1) return;
  strokeWeight(.02);
  
  for (let n = 0; n < depth; n++){
    stroke(colors[n]);
    for (let i = 0; i < points.length; i+=2){
      let p1 = points[i];
      let p2 = points[i+1];
      p1.tick();
      p2.tick();
      line(p1.x, p1.y, p2.x, p2.y);
    }
  }
  for (let i = 0; i < points.length; i++){
    points[i].tick2();
    points[i].reset();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  background(0);
  
  points = [];
  for (let i = 0; i < numGroups*2; i++){
    points.push(new Point(random()*width, random()*height));
  }
  
  for (let i = 0; i < depth; i++){
    colors.push(color((i/depth)*60 + 120, 100, 100))
  }
  
  points[0].dx = .5;
  points[0].dy = -.5;
}

scripts

<script src="https://github.com/processing/p5.js/releases/download/0.5.6/p5.min.js"></script>

style.css

* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden;} 
canvas { display:block; }
#controls {
  margin: 20px;
  position: absolute;
  top: 0; left: 0;
  color: white;
}

wandering-ribbon.markdown

Wandering Ribbon

A Pen by Ben Matthews on CodePen.

License.