Pulsating Points with CindyJS

https://github.com/CindyJS/CindyJS/issues/722

by Kajus

HTML

<script src="https://cindyjs.org/dist/latest/Cindy.js"></script>
<script src="https://cindyjs.org/dist/v0.8.7/Cindy.js"></script>
<div id="CSCanvas"></div>

<script>
  CindyJS({
    scripts: "cs*",
    ports: [{
      id: "CSCanvas",
      axes: false,
      width: 500,
      height: 500,
      transform: [{
        visibleRect: [-1, 7, 14, -7]
      }],
      grid: 1,
    }],
    autoplay: true,
    geometry: [
      {name:"A", kind:"P", type:"Free", pos:[0, 0]},
      {name:"P", kind:"P", type:"Free", pos:[9, 5], color:[0,0,0]},
      {name:"Q", kind:"P", type:"Free", pos:[9, 0], color:[0,0,0]},
    ],
  });
</script>


<script id="csinit" type="text/x-cindyscript">
	// init code here
	//...
</script>


<script id="csdraw" type="text/x-cindyscript">

  // code for drawing here
  pv = mod(seconds(),1);
  forall([P,Q], point,
  	fillcircle(point, pv*.5, color->[0,0,0], alpha->1-pv);      
  );

	pts = allpoints();
	sortpts = sort(pts,#.x);
	drawpoly(sortpts);
  fillpoly(sortpts, alpha->0.2, color->"#F00");
  
</script>

<script id="csmove" type="text/x-cindyscript">

  // code for mouseover and mouse interaction here
  
</script>