Popple spiral illusion

This block is a recreation that attemps to recreate an optical illusion I'm particularly fan of, called the popple illusion. This particular illusion disturbs perception of lines. Here, concentric rings no longer appear as rings (at least, for me !). It works also for 3, 2, or even 1 ring(s).

More on this optical illusion at Akiyoshi Kitaoka's dedicated web site's page.

Acknowledgments to:

d3-timer.js (v1)
blockbuilder.org

backgroundContext.fillStyle = "grey";
        backgroundContext.filter = "blur(2px)";
        backgroundContext.translate(halfSize, halfSize);
        backgroundContext.beginPath();
        backgroundContext.arc(0, 0, halfSize-5, 0, _2PI);
        backgroundContext.fill();

backgroundContext.resetTransform();
      })
    }
    
    function makePattern() {
      const patternCanvas = document.querySelector("#pattern")
      			patternContext = patternCanvas.getContext("2d"),
            blur = 1,
            pointRadius = 2;
      
      patternContext.clearRect(0,0,size,size);
      patternContext.filter = "blur("+blur+"px)";
      for (let p=0; p<2; p++) {
        patternContext.translate(halfSize+(-13+17*p)*pointRadius, halfSize+20);
        drawPoint(patternContext, 0, 0, pointRadius, "black");
        patternContext.translate(3*pointRadius, 0);
        if (p<1) {
	        drawPoint(patternContext, pointRadius, _PI/2, pointRadius, "black");
          drawPoint(patternContext, pointRadius, -_PI/2, pointRadius, "white");
        } else {
          drawPoint(patternContext, pointRadius, _PI/2, pointRadius, "white");
          drawPoint(patternContext, pointRadius, -_PI/2, pointRadius, "black");
        }
        patternContext.translate(3*pointRadius, 0);
        drawPoint(patternContext, 0, 0, pointRadius, "white");
        patternContext.translate(3*pointRadius, 0);
        if (p<1) {
          drawPoint(patternContext, pointRadius, _PI/2, pointRadius, "white");
          drawPoint(patternContext, pointRadius, -_PI/2, pointRadius, "black");
        } else {
        	drawPoint(patternContext, pointRadius, _PI/2, pointRadius, "black");
          drawPoint(patternContext, pointRadius, -_PI/2, pointRadius, "white");
        }
        patternContext.resetTransform();
      }
    }
    
    function makeTransparency() {
      const transparencyContext = transparencyCanvas.getContext("2d"),
            lineWidth = halfSize/20/2,
            blur = lineWidth/2;
      let ringRadius;
      
      transparencyContext.clearRect(0,0,size,size);
      
      //begin: draw greyscale 'mate' image
      transparencyContext.fillRect(0,0,size,size);
      
      transparencyContext.lineWidth = lineWidth;
      transparencyContext.strokeStyle = "white";
      transparencyContext.filter = "blur("+blur+"px)";
      transparencyContext.translate(halfSize, halfSize); // position at canvas' center
      transparencyContext.rotate(-_PI/2);
      
      for (let r=0; r<ringNumber; r++) {
        ringRadius = halfSize-spaceFromOuter-r*spaceBetweenRings;
        transparencyContext.beginPath();
        transparencyContext.arc(0, 0, ringRadius, 0, _2PI);
        //transparencyContext.arc(0, 0, ringRadius, 0, _2PI*(0.5+0.5*random()));
        transparencyContext.stroke();
        transparencyContext.stroke(); //twice for saturation
      }
      //end: draw greyscale 'mate' image
      
      //begin: update alpha channel
      const imageData = transparencyContext.getImageData(0, 0, size, size),
            pixels = imageData.data;
      let pixel = 0;
      
      for(pixel=0 ; pixel<size*size*4; pixel+=4) {
        pixels[pixel+3]=pixels[pixel];
      }
      transparencyContext.putImageData(imageData, 0, 0);
      //end: update alpha channel
      
      transparencyContext.resetTransform();
    }
    
    function makeIllusion(illusionType){
      switch (illusionType) {
      case "spiral":
        makeSpiralPoints();
        break;
      case "zigzag":
        makeZigZagPoints();
        break;
      case "cardioid":
        makeCardioidPoints();
        break;
      default:
        makeRandomPoints();
        break;
      }
      makeBlurredPoints();
      makeCroppedBlurredPointsCanvas(
        document.querySelector("#"+illusionType+" .cropped-blurred-points")
      );
    }
    
    function makeSpiralPoints() {
      const pointsContext = pointsCanvas.getContext("2d");
      let ringRadius, pointRadius, ringRadiusPlus, ringRadiusMinus;
      
      pointsContext.clearRect(0,0,size,size);
      pointsContext.translate(halfSize, halfSize); // position at canvas' center
      pointsContext.rotate(-_PI/2);
      
      for (let r=0; r<ringNumber; r++) {
        ringRadius = halfSize-spaceFromOuter-r*spaceBetweenRings;
        pointRadius = ringRadius/pointsPerRing*2;
        ringRadiusPlus = ringRadius+1.5*pointRadius;
        ringRadiusMinus = ringRadius-1.5*pointRadius;
        for (let p=0, j=0; p<pointsPerRing; p++, j+=_2PI/pointsPerRing) {
          if (p%4 === 0) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "black");
        	}
          else if (p%4 === 1) {
            drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "white");
            drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "black");
          }
          else if (p%4 === 2) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "white");
          }
          else /*(p%4 === 3)*/ {
            drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "black");
            drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "white");
          }
        }
      }
      
      pointsContext.resetTransform();
    }
    
    function makeZigZagPoints() {
      const pointsContext = pointsCanvas.getContext("2d");
      let ringRadius, pointRadius, ringRadiusPlus, ringRadiusMinus;
      
      pointsContext.clearRect(0,0,size,size);
      pointsContext.translate(halfSize, halfSize); // position at canvas' center
      pointsContext.rotate(-_PI/2);
      
      for (let r=0; r<ringNumber; r++) {
        ringRadius = halfSize-spaceFromOuter-r*spaceBetweenRings;
        pointRadius = ringRadius/pointsPerRing*2;
        ringRadiusPlus = ringRadius+1.5*pointRadius;
        ringRadiusMinus = ringRadius-1.5*pointRadius;
        for (let p=0, j=0; p<pointsPerRing; p++, j+=_2PI/pointsPerRing) {
          if (p%4 === 0) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "black");
        	}
          else if (p%4 === 1) {
            if (r%2) {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "white");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "black");
            } else {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "black");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "white");
            }
          }
          else if (p%4 === 2) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "white");
          }
          else /*(p%4 === 3)*/ {
            if (r%2) {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "black");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "white");
            } else {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "white");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "black");
            }
          }
        }
      }
      
      pointsContext.resetTransform();
    }
    
    function makeCardioidPoints() {
      const pointsContext = pointsCanvas.getContext("2d");
      let ringRadius, pointRadius, ringRadiusPlus, ringRadiusMinus;
      
      pointsContext.clearRect(0,0,size,size);
      pointsContext.translate(halfSize, halfSize); // position at canvas' center
      pointsContext.rotate(-_PI/2);
      
      for (let r=0; r<ringNumber; r++) {
        ringRadius = halfSize-spaceFromOuter-r*spaceBetweenRings;
        pointRadius = ringRadius/pointsPerRing*2;
        ringRadiusPlus = ringRadius+1.5*pointRadius;
        ringRadiusMinus = ringRadius-1.5*pointRadius;
        for (let p=0, j=0; p<pointsPerRing; p++, j+=_2PI/pointsPerRing) {
          if (p%4 === 0) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "black");
        	}
          else if (p%4 === 1) {
            if (p<pointsPerRing/2) {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "white");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "black");
            } else {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "black");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "white");
            }
          }
          else if (p%4 === 2) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "white");
          }
          else /*(p%4 === 3)*/ {
            if (p<pointsPerRing/2) {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "black");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "white");
            } else {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "white");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "black");
            }
          }
        }
      }
      
      pointsContext.resetTransform();
    }
    
    function makeRandomPoints() {
      const pointsContext = pointsCanvas.getContext("2d");
      let ringRadius, pointRadius, ringRadiusPlus, ringRadiusMinus, slope;
      
      pointsContext.clearRect(0,0,size,size);
      pointsContext.translate(halfSize, halfSize); // position at canvas' center
      pointsContext.rotate(-_PI/2);
      
      for (let r=0; r<ringNumber; r++) {
        ringRadius = halfSize-spaceFromOuter-r*spaceBetweenRings;
        pointRadius = ringRadius/pointsPerRing*2;
        ringRadiusPlus = ringRadius+1.5*pointRadius;
        ringRadiusMinus = ringRadius-1.5*pointRadius;
        for (let p=0, j=0; p<pointsPerRing; p++, j+=_2PI/pointsPerRing) {
          if (p%16 === 0) {
            //lower modulos make more heratic illusion
            slope = (random()>0.5);
          }
          
          if (p%4 === 0) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "black");
        	}
          else if (p%4 === 1) {
            if (slope) {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "white");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "black");
            } else {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "black");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "white");
            }
          }
          else if (p%4 === 2) {
            drawPoint(pointsContext, ringRadius, j, pointRadius, "white");
          }
          else {
            if (slope) {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "black");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "white");
            } else {
              drawPoint(pointsContext, ringRadiusPlus, j, pointRadius, "white");
              drawPoint(pointsContext, ringRadiusMinus, j, pointRadius, "black");
            }
          }
        }
      }
      
      pointsContext.resetTransform();
    }
    
    function drawPoint(context, distance, angle, radius, color) {
      context.beginPath();
      context.fillStyle = color;
      context.arc(distance*cos(angle), distance*sin(angle), radius, 0, _2PI);
      context.fill();
    }
    
    function makeBlurredPoints() {
      const blurredPointsContext = blurredPointsCanvas.getContext("2d"),
            imageData = blurredPointsContext.createImageData(size, size),
            lineWidth = halfSize/20,
            blur = lineWidth/5;
      
      blurredPointsContext.clearRect(0,0,size,size);
      
      blurredPointsContext.filter = "blur("+blur+"px)";
      blurredPointsContext.drawImage(pointsCanvas, 0, 0);
      blurredPointsContext.drawImage(pointsCanvas, 0, 0); //twice for saturation
    }
    
    function makeCroppedBlurredPointsCanvas(canvas) {
      const context = canvas.getContext("2d");
      
      context.clearRect(0,0,size,size);
      
      //begin: use 'blurred-points' to color pixels of the 'transparency' canvas
      context.clearRect(0, 0, size, size);
      context.globalCompositeOperation = "source-over";
      context.drawImage(blurredPointsCanvas, 0, 0);
      context.globalCompositeOperation = "destination-in";
      context.drawImage(transparencyCanvas, 0, 0);
      //begin: use 'blurred-points' to color pixels of the 'transparency' canvas
    }
  </script>

https://d3js.org/d3-timer.v1.min.js