Emergent Radial Geometry

Course: Advanced Design Scripting, Fall 2018 (Prof. Dennis Shelden)
A Processing-based generative artwork that combines random noise, circular motion, and iterative point plotting to produce a continuously evolving radial form. Each render creates a unique composition driven by parameter variation and controlled randomness.

Code

​<!-- Load p5.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>

<!-- Container where canvas will appear -->
<div id="processing-sketch" style="margin-top:40px; text-align:center;"></div>

<script>
// Run AFTER your page loads
window.addEventListener("DOMContentLoaded", () => {

  let w = 500;
  let currentSketch = 0;

  // ATTACH CANVAS TO THE DIV
  let s = (p) => {

    p.setup = function() {
      let cnv = p.createCanvas(w, w);
      cnv.parent("processing-sketch");
      p.noLoop();
      p.background(15);
    };

    p.draw = function() {
      p.background(15);
      if (currentSketch === 0) {
        drawSketch1(p);
      } else {
        drawSketch2(p);
      }
    };

    // FIRST SKETCH (tab2)
    function drawSketch1(p) {
      p.colorMode(p.HSB, 360,100,100,100);
      p.stroke(255);

      let n = 36;
      for (let j = 0; j < n; j++) {
        let x = p.map(j % 6, 0, 5, 80, 420);
        let y = p.map(Math.floor(j / 6), 0, 5, 80, 420);

        for (let i = 0; i < 4000; i++) {
          let a = Math.PI * 2 * p.random();
          let r = w/16 * Math.pow(p.random(),
            p.map(j, 0, n-1, 0.2, 0.05) - Math.abs(a - Math.PI)/10
          );
          p.point(Math.cos(a)*r + x, Math.sin(a)*r + y);
        }
      }
    }

    // SECOND SKETCH (mySketch2)
    function drawSketch2(p) {
      p.stroke(255);
      let n = 12;

      for (let i = 0; i < n; i++) {
        for (let j = 0; j < 10; j++) {
          let a = Math.PI * 2 * p.random();
          let r = p.map(i,0,n-1,w/3,w/10) *
                  Math.pow(p.random(),
                    p.map(i,0,n-1,0.1,0.2) - Math.abs(a - Math.PI)/10
                  );

          p.point(Math.cos(a)*r + w/2, Math.sin(a)*r + w/2);
        }
      }
    }

    // Switch sketch on key
    p.keyPressed = function() {
      currentSketch = (currentSketch + 1) % 2;
      p.redraw();
    };

  };

  // Start the sketch
  new p5(s);

});
</script>