Scrollytelling the Penrose triangle

This block experiments scroly telling with D3.

I applied the technics described by bumbeishvili in its Small Scroll-linked Animation Demo block.

The use case is a step by step animated explanations on how to draw a Penrose triangle (and some derivatives, cf. the end of the story).

Acknowledgments to :

D3.js (v.5)
blockbuilder.org
bumbeishvili's Small Scroll-linked Animation Demo block

forked from bumbeishvili's block: Scrolytelling the Penrose triangle

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Scrolytelling the Penrose triangle</title>
  <meta name="description" content="Step by step animated explanations on how to draw a Penrose triangle (and some derivatives), using scrolytelling with D3.js">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body {
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    #wip {
      #display: none;
      position: absolute;
      top: 400px;
      left: 330px;
      font-size: 40px;
      text-align: center;
    }
    
    #container {
      position: relative;
      z-index: 100;
    }
    #sticky { 
      position: absolute; 
      top: 0; 
      right: 0; 
      width: 50%;
      height: 100%;
      z-index: 50;
    }
    #story-container {
      height: 100vh;
      overflow-y: scroll;
    }
    
    .panel {
      height: 100vh;
      position: relative;
      #border-top: dotted 1px;
    }
    .panel:first-child {
      #height: 50vh;
    }
    .panel:last-child {
      margin-bottom: 50vh;
    }
    
    .vertical-positioner {
      position: absolute;
      width:50%;
    }
    .vertical-positioner.center {
      top: 35%;
    }
    .vertical-positioner.top {
      top: 5%;
    }
    .vertical-positioner.bottom {
      bottom: 5%;
    }
    
    .panel p {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .l-shape {
      fill: transparent;
      stroke: grey;
      stroke-width: 2px;
    }
  </style>
</head>

<body>
  <div id="sticky">
  </div>
  
  <div id="story-container">
    <div id="story">
      <div class="panel">
        <div class="vertical-positioner center">
          <p>This <a href="https://bl.ocks.org/Kcnarf/476fe66949490c53f7085c24832612ca">block</a> illustrates how to draw a Penrose Triangle, one of the most famous impossible geometry.</p>
          <p><em>Let's get scrolling!</em></p>
    		</div>
      </div>
      <div class="panel">
        <div class="vertical-positioner bottom">
          <p>1- Draw a triangle</p>
          <p><em>It will be the inner part of the Penrose Triangle.</em></p>
        </div>
      </div>
      <div class="panel">
        <div class="vertical-positioner bottom">
        	<p>2- Extend a line off of each corner.</p>
        </div>
      </div>
      <div class="panel">
        <div class="vertical-positioner bottom">
          <p>3- Draw another line off each of thoose extensions that extends a bit over the corners.</p>
          <p><em>'a bit' means 'the same way as in the previous step'.</em></p>
        </div>
      </div>
      <div class="panel">
        <div class="vertical-positioner bottom">
        	<p>4- Draw a short angle that lines up with the opposite side.</p>
          <p><em>The size should be the same as in the previous steps.</em></p>
        </div>
      </div>
      <div class="panel">
        <div class="vertical-positioner bottom">
        	<p>5- Connect the lines, and you'll get the Penrose Triangle.</p>
        </div>
      </div>
  </div>
   
  <div id="wip">
    Work in progress ...
  </div>
  
  <script>
    //begin: layout conf
    const windowWidth = window.innerWidth,
    			panelHeight = window.innerHeight,
        	svgWidth = 960/2,
          svgHeight = 500,
    			margins = {top: 10, right: 10, bottom:10, left:10},
          width = svgWidth - margins.top - margins.bottom,
      		height = svgHeight - margins.left - margins.right;
    //end: layout conf
    
    //begin: utils
    const cos60 = Math.cos(Math.PI/3);
    const sin60 = Math.sin(-Math.PI/3); //minus becase svg y axe goes to bottom
    const orthoY = function(obliqueY) {
      return [obliqueY*cos60, obliqueY*sin60];
    }
    const orthoCoord = function(obliqueCoord){
      const ortho = orthoY(obliqueCoord[1]);
      return [obliqueCoord[0]+ortho[0], ortho[1]];
    }
    const orthoCoords = function(obliqueCoords) {
      return obliqueCoords.map(function(obliqueCoord) {
        return orthoCoord(obliqueCoord);
      })
    }
    const liner = function (d) {
      let path = "M"+d.orthoStart;
      d.orthoDeltas.forEach(function(orthoDelta) {
        path += "l"+orthoDelta;
      })
      //path += "z";
      return path;
    }
    //end: utils
    
    //begin: data conf
    let ptInnerWidth, ptExtent1, ptExtent2;
    const defaultIW = 50,
          defaultExt1 = defaultIW,
          defaultExt2 = defaultIW;
    const pTData = computePTData(defaultIW, defaultExt1, defaultExt2);
    //end: data conf
    
    //begin: reusable d3 selections
    let svg, drawingArea, penroseTriangle;
    const storyContainer = d3.select('#story-container'),
    		story = d3.select('#story');
    //end reusable d3 selections
    
    //begin: scroll managment
    var scrollTop = 0
    var newScrollTop = 0
    const storyLength = story.node().getBoundingClientRect().height;
    const scrollLength = storyLength - panelHeight;
    storyContainer.on("scroll.scroller", function() {
      	newScrollTop = storyContainer.node().scrollTop;
	    });
    //end: scroll management
    
    initData();
    initLayout();
    
    //begin: first animation (slide to top) utils
    const anim0Start = 0,
          anim0Length = panelHeight,
          anim0End = anim0Start + anim0Length;
    //end: first animation (slide to top) utils
    
    //begin: second animation (Penrose Triangle construction) utils
    //2nd animation uses the strokDashoffset trick to make paths appearing as they were hand drawn
    const anim1Start = anim0End,
          anim1Length = 5.5*panelHeight,
          anim1End = anim1Start + anim1Length;
    //lShape = 1 part of the Penrose triangle
    let lShapeLength = penroseTriangle.select(".l-shape").node().getTotalLength();
    const strokeDashoffsetScale = computeStrokeDashoffsetScale();
    //end: second animation (Penrose Triangle construction) utils
    
    //begin: third animation (changing inner triangle) utils
    const anim2Start = anim1End,
          anim2Length = panelHeight,
          anim2End = anim2Start + anim2Length;
    //end: third animation (changing inner triangle) utils
    
    
    //begin: story-telling management
    const render = function() {
      if (scrollTop !== newScrollTop) {
        scrollTop = newScrollTop;
        
        if (scrollTop < anim0End) {
          // 1st animation consist on sliding SVG to the top until it disappears completly
          let vPos = height/2 - scrollTop;
          penroseTriangle.attr("transform", "translate("+[width/2, vPos]+")");
          penroseTriangle.style("stroke-dashoffset", 0);
        } else if (scrollTop < anim1End) {
          // 2nd animation consist on smoothly drawing the Penrose Triangle.
          // cf. computeStrokeDashoffsetScale() for better understanding. 
         	
          penroseTriangle.attr("transform", "translate("+[width/2, height/2]+")");
          penroseTriangle.style("stroke-dasharray", lShapeLength)
        		.style("stroke-dashoffset", strokeDashoffsetScale(scrollTop));
        } else {
          penroseTriangle.attr("transform", "translate("+[width/2, height/2]+")");
          penroseTriangle.style("stroke-dashoffset", 0);
        }
      }
      
      window.requestAnimationFrame(render);
    }
    //end: story-telling management
    window.requestAnimationFrame(render);
    
    function initData() {
    }
    
    function computePTData(iw, ext1, ext2) {
      /* 
      We consider Penrose Triangles where :
        1- inner width 'iw' is the same along the 3 axes
        2- extension 'ext1' is the same along the 3 axes
        3- extension 'ext2' is the same along the 3 axes
        4- inner width 'iw', extensions 'ext1' and 'ext2' may be of different size
      For convention :
        * oblique x axis 'ox' goes to the right
        * oblique y axis 'oy' goes to the top, in a oblique fashion
        * [0,0] is at the center of the inner triangle (not shown below)
        
      
            /            ext2
        oy /            ______
          /_____       /     /\
            ox        /     /  \
                     /     /    \
                    /     /     .\
                   /     / ext2.  \
                  /     /     .    \
                 /     /     /\     \
                /     / ext1/  \     \
               /     /     /    \     \
              /     /     /\     \     \
             /     /   iw/  \iw   \     \
            /...../_____/____\     \     \
           / ext2  ext1   iw  \     \     \
          /                    \ext1 \     \
         /______________________\     \     \
         \                       .     \    /
      ext2\                       .ext2 \  /ext2
           \_______________________._____\/
      */
      
      //leftLShape encodes information on the L shape with the left most line
      let leftLShape = {};
      leftLShape.obliqueStart = [3*iw/4,-iw/2];
      leftLShape.obliqueDeltas = [
        [-iw,0],
        [-ext1,0],
        [0, 3*ext1+iw],
        [-ext1, 0],
        [0, -4*ext1-iw]
      ];
      leftLShape.orthoStart = orthoCoord(leftLShape.obliqueStart);
      leftLShape.orthoDeltas = orthoCoords(leftLShape.obliqueDeltas);
      
      //rightLShape encodes information on the inverted-L shape with the right most line
      let rightLShape = {};
      rightLShape.obliqueStart = [-iw/4,-iw/2];
      rightLShape.obliqueDeltas = [
        [0, iw,0],
        [0,ext1],
        [3*ext1+iw, -3*ext1-iw],
        [0,ext1],
        [-4*ext1-iw, 4*ext1+iw]
      ];
      rightLShape.orthoStart = orthoCoord(rightLShape.obliqueStart);
      rightLShape.orthoDeltas = orthoCoords(rightLShape.obliqueDeltas);
      
      //bottomLshape encodes information on the inverted-L shape with the bottom most line
      let bottomLShape = {};
      bottomLShape.obliqueStart = [-iw/4, iw/2];
      bottomLShape.obliqueDeltas = [
        [iw,-iw],
        [ext1,-ext1],
        [-3*ext1-iw, 0],
        [ext1,-ext1],
        [4*ext1+iw, 0]
      ];
      bottomLShape.orthoStart = orthoCoord(bottomLShape.obliqueStart);
      bottomLShape.orthoDeltas = orthoCoords(bottomLShape.obliqueDeltas);
      
      return {
        leftLShape: leftLShape,
        rightLShape: rightLShape,
        bottomLShape: bottomLShape,
      }
    }
    
    function computeStrokeDashoffsetScale() {
      // 2nd animation consists on smoothly drawing the Penrose Triangle. It is composed of 3 identical L-shapes (each rotated by 120°). Eech L-shape is composed of 5 segments, hence the animation is compsed of 5 steps.
      // Each step (i) waits the text to reach the viewport's center, and then (ii)  animates the drawing of the corresponding segment.

// on one hand we have 5 panels to scroll (or 10 half-panels, as each step is divided into 2 sub-steps (wait text, draw segment))
      const anim1CPs = [
        anim1Start,									// wait text to reach viewport's center
        anim1Start+0.5*panelHeight, // draw 1st segment
        anim1Start+1*panelHeight,		// wait text
        anim1Start+1.5*panelHeight,	// draw 2nd segment
        anim1Start+2*panelHeight,		// wait text
        anim1Start+2.5*panelHeight,	// draw 3rd segment
        anim1Start+3*panelHeight,		// wait text
        anim1Start+3.5*panelHeight,	// draw 4th segment
        anim1Start+4*panelHeight,		// wait text
        anim1Start+4.5*panelHeight,	// draw 5th segment
        anim1End										// extra space to position last text at center
      ]
      // on the other hand, the L-shape we have to draw is composed of 5 segments of different sizes
      const strokeDashoffsetCPs = [
        lShapeLength,				// wait text to appear, shape complitely hidden
        lShapeLength*11/12,	// 1st segment is size 1
        lShapeLength*11/12,	// wait text
        lShapeLength*10/12,	// 2nd segment is size 1
        lShapeLength*10/12,	// wait text to appear
        lShapeLength*6/12,	// 3rd segment is size 4
        lShapeLength*6/12,	// wait text to appear
        lShapeLength*5/12,	// 4th segment is size 1
        lShapeLength*5/12,	// wait text to appear
        0,									// 5th segment is size 5, shape complitely drawn
        0										// extra space to position last text at center
      ]
      
      return d3.scaleLinear()
      	.domain(anim1CPs)
      	.range(strokeDashoffsetCPs);
    }
    
    function initLayout() {
      svg = d3.select("#sticky").append("svg")
        .attr("width", 960)
        .attr("height", 500)

drawingArea = svg.append("g")
        .classed("drawing-area", true)
        .attr("transform", "translate("+[margins.top, margins.left]+")");
      
      penroseTriangle = drawingArea
      	.classed("penrose-triangle", true)
      	.attr("transform", "translate("+[width/2, height/2]+")");
      
      penroseTriangle
        .selectAll(".l-shape")
      	.data([pTData.leftLShape, pTData.rightLShape, pTData.bottomLShape])
      	.enter()
      		.append("path")
      		.classed("l-shape", true)
      		.attr("d", function(d){ return liner(d); });
    }
  </script>
</body>

https://d3js.org/d3.v5.min.js