Shadows

// Determine methods to implement shadows

​

// The simplest method to start should be just implementing a Canvas shadow

// https://www.w3resource.com/html5-canvas/html5-canvas-shadow.php

// Completed: 2022-03-07

​

// TODO: // Can we do better? Looking at CSS box-shadow, there are options for:

//   keyword: inset or none - definitely want this; see tutorial https://riptutorial.com/html5-canvas/example/18941/inner-shadows

//   xOffset

//   yOffset

//   blurRadius     Shadows of sharp-cornered boxes have a much larger radius than looks right to me; can we remedy that?

//   spreadRadius   Instead of a spread radius, maybe a spread ellipse? Or a light-source-size and light-source-location?

//   color

//

// Also look at CSS drop-shadows. https://css-irl.info/drop-shadow-the-underrated-css-filter/

​

// TODO: Why not make a "real" shadow? Try implementing in 3D.

// https://www.reddit.com/r/p5js/comments/8onb0n/shadow_in_p5js/

// https://archive.p5js.org/examples/3d-multiple-lights.html

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100, 100);

  // rectMode(CENTER);

}

​

function draw() {

  var w, h, w2, h2, w4, h4, wh8;

  [w, h, w2, h2, w4, h4, wh8] = [ width, height, width/2, height/2, width/4, height/4, min(width, height)/8 ]

  background(360, 0, 100);

  fill(180,0,100);

  noStroke();

  translate(w2, h2);

  //rect(0, 0, w2, h2, 40);

  setShadow(0, 0, color(0, 0, 0), 60);

  for(var i=6; i>1; i-=2) {

    circle(0, 0, wh8 * i);

  }

}