Groovy Ripple

groovy-ripple.markdown

Groovy Ripple

A Pen by Monica.dev on CodePen.

License.

index.html

rr

script.js

// Based on The Coding Train: Coding Challenge #136.1: Polar Perlin Noise Loops
// https://www.youtube.com/watch?v=ZI1dmHv3MeM

const colors = [
  // "#ffadad",
  // "#ffd6a5",
  // "#fdffb6",
  "#caffbf",
  "#9bf6ff",
  "#a0c4ff",
  "#bdb2ff",
  "#ffc6ff"
];

let phase = 0;
let noiseMax = 0.75;
let slider;
let zOff = 0;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#e9e0f0");

  slider = createSlider(2, 10, 0, 0.1);
  strokeWeight(4);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  // noLoop();
  // translate(-50, -50);
  background("#2b2135");
  translate(width / 2, height / 2);
  //rotate(180+60+20+20)

  //stroke(255);
  stroke("#b4aaff");
  noFill();

  noiseMax = slider.value();
  // let xOff = 0;

  for (let i = 1; i < 50; i += 0.5) {
    beginShape();
    // stroke(random(colors))
    //   strokeWeight(random(.4,2))
    // stroke(random(colors));

    for (let a = 0; a < TWO_PI; a += 0.0125) {
      stroke(colors[round(i) % colors.length]);
      //// let r = 100;//random (50, 100)
      // let nMax = random(.5,.75)
      let nMax = noiseMax + map(i, 0, 5, -2, 2); // cos(a + phase) + sin(a + phase);
      let xOff = map(cos(a + phase), -1, 1, 0, nMax);
      let yOff = map(sin(a + phase), -1, 1, 0, nMax);

      // strokeWeight(map(xOff + yOff), 0, (nMax+nMax), 0,.4);
      let r = map(noise(xOff, yOff, zOff), 0, 1, 100, 200) * (i * 0.7);
      let x = r * cos(a);
      let y = r * sin(a);
      // phase += 0.003;
      //   zOff += 0.01;
      vertex(x, y);
      // xOff = xOff + 0.01
    }
    endShape(CLOSE);
  }
  phase += 0.003;
  zOff += 0.01;
  //  xOff = xOff + 0.01
}

function keyPressed() {
  if (key === "g") {
    saveGif("polar-perlin-noise-loops", 20);
  }
  if (key === "s") {
    saveCanvas("polar-perlin-noise-loops");
  }
  if (key === "r") {
    noiseMax += random(-10, 10);
    redraw();
  }
}

scripts

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

style.css

canvas {
  /* center canvas in middle of page */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  text-align: center;
}