perlin rows 001 - OpenProcessing

mySketch
xxxxxxxxxx
 
/* knobs & dials */
const config = {
  noiseScale: 0.01,
  // size of lines
  size: 2,
  // how twisty the lines will be
  revolutionScale: 60,
  // percentage of points based on area of canvas
  numberOfPointsFactor: 0.005,
  // hues to select from
  hues: [200, 240, 280], //[50, 271, 336], //[165, 193, 276], //[212, 32, 137],
  // how much to expand beyond the canvas when placing points
  overscan: 20,
  // impacts how saturation, brightness, and alpha change based on xy coordinates
  // the larger the number the more rows (pi is not special here)
  waveFactor: 10.67
};
​
function runtimeConfigSetup() {
  config.canvas = {
    width: 1024,
    height: 768,
    bgColor: [config.hues[0], 100, 10],
  }
  config.waveFactor = config.waveFactor * config.canvas.width / config.canvas.height;
}
​
/* sketch state */
const state = {
  points: [],
  canvas: undefined,
  paused: false
};
​
function setup() {
  runtimeConfigSetup();
  state.canvas = createCanvas(config.canvas.width, config.canvas.height);
  colorMode(HSB);
  noStroke();
  background(config.canvas.bgColor);
​
  for (let i = 0; i < (width * height * config.numberOfPointsFactor); i++) {
    state.points.push({
      x: random(-config.overscan, width + config.overscan),
      y: random(-config.overscan, height + config.overscan)
    });
  }
}
​
function calculateColor(i, point) {
  const sFactor = (sin(point.x / width * config.waveFactor * PI) + 1) / 2;
  const bFactor = (sin(point.y / width * config.waveFactor * PI) + 1) / 2;
  const alpha = (sin(point.y / height * config.waveFactor * PI) + 1) / 2;
  const bgB = brightness(config.canvas.bgColor)
  return [
    config.hues[i % config.hues.length],
    sFactor * 100,
    bgB + (bFactor * (100 - bgB)),
    alpha
  ];
}
​
function draw() {
  if (state.paused) return;
​
  for (let i = 0; i < state.points.length; i++) {
    const pt = state.points[i];
    fill(calculateColor(i, pt));
    ellipse(pt.x, pt.y, config.size, config.size);
​
    const angle = noise(pt.x * config.noiseScale,
      pt.y * config.noiseScale) * TWO_PI * config.revolutionScale;
    state.points[i] = {
      x: pt.x + cos(angle),
      y: pt.y + sin(angle)
    };
  }
}
/**************************************
 interaction
**************************************/
function keyReleased() {
  // press 's' to save an image
  if (keyCode === 83) {
    saveCanvas(state.canvas, 'png');
    return false;
  }
}
function mousePressed(event) {
  // toggle pausing
  state.paused = !state.paused;
}