More Moiré - OpenProcessing

mySketch
xxxxxxxxxx
 
class CircleLooper {
  constructor() {
    this.startDegree = 0;
    this.endDegree = 360;
    this.incrementBy = Math.max(getRandomInt(5), 0.5);
    this.currentDegree = 0;
  }
​
  setCurrentDegrees(moveToDegrees) {
    this.currentDegree = moveToDegrees;
  }
​
  currentDegrees() {
    return this.currentDegree;
  }
​
  next() {
    this.currentDegree += this.incrementBy;
​
    if (this.currentDegree > this.endDegree) {
      this.currentDegree -= this.endDegree
    }
​
    return this.currentDegree;
  }
​
}
​
class ColorShift {
​
  constructor() {
    this.degrees = getRandomInt(360);
    this.t = 0;
    colorMode(HSB, 360, 100, 100);
  }
​
  next() {
    this.degrees = (this.degrees + 0.06) % 360;
​
    this.t += 0.01;
​
    let h = this.degrees;
    let s = 20 * noise(this.t) + 80;
    let b = 20 * noise(this.t + 1) + 80;
​
    return {
      h,
      s,
      b
    }
  }
}
​
let colorShift;
​
function computePosition(degrees, distance) {
  let radians = degrees * (Math.PI / 180);
  let x = distance * Math.cos(radians);
  let y = distance * Math.sin(radians);
  return {
    x: x,
    y: y
  }
}
​
function plotLine(lineEnd) {
  line(0, 0, lineEnd.x, lineEnd.y);
}
​
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}
​
function random360() {
  return getRandomInt(360)
}
​
let circleLooperInner;
let circleLooperMiddle;
let circleLooperOuter;
​
let innerOffset = getRandomInt(50);
let middleOffset = getRandomInt(50);
let outerOffset = getRandomInt(50);
​
function setup() {
  createCanvas(windowWidth, windowHeight);
​
  setupSketch()
}
​
function setupSketch() {
  colorShift = new ColorShift();
  background(20);
​
  circleLooperInner = new CircleLooper();
  circleLooperMiddle = new CircleLooper();
  circleLooperOuter = new CircleLooper();
​
  circleLooperInner.setCurrentDegrees(random360());
  circleLooperMiddle.setCurrentDegrees(random360());
  circleLooperOuter.setCurrentDegrees(random360());
  
  innerCx = width / 2;
  innerCy = height / 2;
  
  middleCx = getRandomInt(innerCx * 1.5) + 0.5 * innerCx;
  middleCy = getRandomInt(innerCy * 1.5) + 0.5 * innerCy;
  
  outerCx = getRandomInt(innerCx * 1.8) + 0.2 * innerCx;
  outerCy = getRandomInt(innerCy * 1.8) + 0.2 * innerCy;
}
​
function drawLine(translateX, translateY, position ) {
  translate(translateX, translateY);
  plotLine(position);
  translate(-translateX, -translateY);
}
​
function draw() {
​
  let hsb = colorShift.next();
  stroke(hsb.h, hsb.s, hsb.b);
​
  drawLine(innerCx, innerCy, computePosition(circleLooperInner.next(), innerCy + innerOffset) );
  
  // translate(innerCx, innerCy);
  // plotLine(computePosition(circleLooperInner.next(), innerCy + innerOffset));
  // translate(-innerCx, -innerCy);
  
  translate(middleCx, middleCy);
  plotLine(computePosition(circleLooperMiddle.next(), innerCx + middleOffset));
  translate(-middleCx, -middleCy);
  
  translate(outerCx, outerCy);
  plotLine(computePosition(circleLooperOuter.next(), innerCy + outerOffset));
}
​
function keyPressed() {
​
  // If you hit the s key, save an image
  if (key == 's') {
    save("more_moire_dbbear.com.png");
  }
  if (key == ' ') {
    setupSketch()
  }
}