* Creative Coding Workshop #3 Preview - Blob with Noise

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

let nSlider, radiusSlider, lodSlider, falloffSlider;

let nSpan, radiusSpan, lodSpan, falloffSpan;

let modeSelection;

let controlsDiv;

​

function setup() {

  createCanvas(512, 512);

  noiseSeed(0);

  nSpan = createSpan();

  nSlider = createSlider(3, 100, 10, 1);

  radiusSpan = createSpan();

  radiusSlider = createSlider(5, width, 150, 1);

  lodSpan = createSpan();

  lodSlider = createSlider(0, 10, 4, 1);

  falloffSpan = createSpan();

  falloffSlider = createSlider(0, 1, 0.5, 0.01);

  nSlider.class("slider");

  radiusSlider.class("slider");

  lodSlider.class("slider");

  falloffSlider.class("slider");

​

  modeSelection = createSelect();

  modeSelection.option('Curve');

  modeSelection.option('Lines');

  modeSelection.option('Triangles');

  modeSelection.option('Triangle Strip');

  modeSelection.option('Quads');

  constrolsDiv = createDiv();

  constrolsDiv.id("controls");

  constrolsDiv.child(modeSelection);

  constrolsDiv.child(nSpan);

  constrolsDiv.child(nSlider);

  constrolsDiv.child(radiusSpan);

  constrolsDiv.child(radiusSlider);

  constrolsDiv.child(lodSpan);

  constrolsDiv.child(lodSlider);

  constrolsDiv.child(falloffSpan);

  constrolsDiv.child(falloffSlider);

  strokeWeight(5);

}

​

function draw() {

  background(0);

  stroke(127);

  let n = nSlider.value();

  let radius = radiusSlider.value();

  let lod = lodSlider.value();

  let falloff = falloffSlider.value();

  nSpan.html("Number of vertices: "+n);

  radiusSpan.html("Base radius: "+radius);

  lodSpan.html("LOD: "+lod);

  falloffSpan.html("Falloff: "+falloff);

  noiseDetail(lod, falloff);

​

  // move origin to the center of the canvas

  translate(width/2, height/2);

  // set beginShape() based on selection

  if (modeSelection.selected()==="Triangles") {

    beginShape(TRIANGLES);

  } else if (modeSelection.selected()==="Triangle Strip") {

    beginShape(TRIANGLE_STRIP);

  } else if (modeSelection.selected()==="Quads") {

    beginShape(QUADS);

  } else {

    beginShape();

  }

  for (let i = 0; i < n + 3; i++) {

    // angle for current vertex

    let angle = TWO_PI*i/n;

    // calculated radius with noise

    let actualRadius = radius*noise(1+sin(angle), 1+cos(angle), frameCount/50);

    // use curveVertex only if 'Curve' is selected

    if (modeSelection.selected()==='Curve') {

      curveVertex(actualRadius*sin(angle), actualRadius*cos(angle));

    } else {

      vertex(actualRadius*sin(angle), actualRadius*cos(angle));

    }

  }

  endShape();

}

​