evanthebouncy · September 15, 2021 04:35
diff --git a/do_not_run.html b/do_not_run.html
 <!DOCTYPE html>
 <html>
  <body>

  <canvas id="myCanvas" width="800" height="800"
  style="border:1px solid #d3d3d3;">
  Your browser does not support the canvas element.
  </canvas>

  <script>

    var cv = document.getElementById('myCanvas');
    var ctx = cv.getContext('2d');
    var cvWidth = cv.width;
    var cvHeight = cv.height;

    function draw_DDD(ctx, args) {
      // ctx.fillStyle = args[4];
      // ctx.fillRect(args[0], args[1], args[2], args[3]);

      DDDx = args[0];
      DDDy = args[1];
      ballr = args[2];
      width = args[2];
      length = args[3]
      color = args[4];

      args[0] = Math.max(0, args[0] + 2 * (Math.random() - 0.5));
      args[1] = Math.max(0, args[1] + 2 * (Math.random() - 0.5));
      args[2] = Math.max(0, args[2] + 2 * (Math.random() - 0.5));
      args[3] = Math.max(0, args[3] + 2 * (Math.random() - 0.5));

      // ball 1
      ctx.beginPath();
      ctx.arc(DDDx, DDDy-width/2, ballr, 0, 2 * Math.PI, false);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();

      // ball 2
      ctx.beginPath();
      ctx.arc(DDDx, DDDy+width/2, ballr, 0, 2 * Math.PI, false);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();

      // shaft
      ctx.beginPath();
      ctx.fillRect(DDDx, DDDy-width, length, width);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();

      // tip
      ctx.beginPath();
      ctx.arc(DDDx+length, DDDy-width/2, width/1.9, 0, 2 * Math.PI, false);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();

    }

    // Simple scene description : an array of colored rects
    var everyObject = [
      [60, 70, 10, 10, 'yellow']
    ];

    // animation : always running loop.

    function animate() {
      // call again next time we can draw
      requestAnimationFrame(animate);
      // clear canvas
      ctx.clearRect(0, 0, cvWidth, cvHeight);
      // draw everything
      everyObject.forEach(function(o) {
        draw_DDD(ctx, o)
        // ctx.fillStyle = o[4];
        // ctx.fillRect(o[0], o[1], o[2], o[3]);
      });
      // 
      ctx.fillStyle = '#000';
      ctx.fillText('click to add random rects', 10, 10);
    }

    animate();


    // function printMousePos(event) {
    //     document.body.textContent =
    //           "clientX: " + event.clientX +
    //               " - clientY: " + event.clientY;
    // }

    // click handler to add random rects
    window.addEventListener('click', function(e) {
      console.log(e.clientX);
      console.log(e.clientY);
      addRandRect(e.clientX, e.clientY);
    });

    function addRandRect(x, y) {
      var randColor = Math.random() > 0.5 ? 'blue' : 'red';
      everyObject.push([x, y, 10 + Math.random() * 40, 40 + Math.random() * 80, randColor]);
      // everyObject.push([Math.random() * cvWidth, Math.random() * cvHeight, 10 + Math.random() * 40, 40 + Math.random() * 80, randColor]);
    }


  </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<body>

	<canvas id="myCanvas" width="800" height="800"
	style="border:1px solid #d3d3d3;">
	Your browser does not support the canvas element.
	</canvas>

	<script>

	var cv = document.getElementById('myCanvas');
	var ctx = cv.getContext('2d');
	var cvWidth = cv.width;
	var cvHeight = cv.height;

	function draw_DDD(ctx, args) {
	// ctx.fillStyle = args[4];
	// ctx.fillRect(args[0], args[1], args[2], args[3]);

	DDDx = args[0];
	DDDy = args[1];
	ballr = args[2];
	width = args[2];
	length = args[3]
	color = args[4];

	args[0] = Math.max(0, args[0] + 2 * (Math.random() - 0.5));
	args[1] = Math.max(0, args[1] + 2 * (Math.random() - 0.5));
	args[2] = Math.max(0, args[2] + 2 * (Math.random() - 0.5));
	args[3] = Math.max(0, args[3] + 2 * (Math.random() - 0.5));

	// ball 1
	ctx.beginPath();
	ctx.arc(DDDx, DDDy-width/2, ballr, 0, 2 * Math.PI, false);
	ctx.fillStyle = color;
	ctx.fill();
	ctx.closePath();

	// ball 2
	ctx.beginPath();
	ctx.arc(DDDx, DDDy+width/2, ballr, 0, 2 * Math.PI, false);
	ctx.fillStyle = color;
	ctx.fill();
	ctx.closePath();

	// shaft
	ctx.beginPath();
	ctx.fillRect(DDDx, DDDy-width, length, width);
	ctx.fillStyle = color;
	ctx.fill();
	ctx.closePath();

	// tip
	ctx.beginPath();
	ctx.arc(DDDx+length, DDDy-width/2, width/1.9, 0, 2 * Math.PI, false);
	ctx.fillStyle = color;
	ctx.fill();
	ctx.closePath();

	}

	// Simple scene description : an array of colored rects
	var everyObject = [
	[60, 70, 10, 10, 'yellow']
	];

	// animation : always running loop.

	function animate() {
	// call again next time we can draw
	requestAnimationFrame(animate);
	// clear canvas
	ctx.clearRect(0, 0, cvWidth, cvHeight);
	// draw everything
	everyObject.forEach(function(o) {
	draw_DDD(ctx, o)
	// ctx.fillStyle = o[4];
	// ctx.fillRect(o[0], o[1], o[2], o[3]);
	});
	//
	ctx.fillStyle = '#000';
	ctx.fillText('click to add random rects', 10, 10);
	}

	animate();


	// function printMousePos(event) {
	// document.body.textContent =
	// "clientX: " + event.clientX +
	// " - clientY: " + event.clientY;
	// }

	// click handler to add random rects
	window.addEventListener('click', function(e) {
	console.log(e.clientX);
	console.log(e.clientY);
	addRandRect(e.clientX, e.clientY);
	});

	function addRandRect(x, y) {
	var randColor = Math.random() > 0.5 ? 'blue' : 'red';
	everyObject.push([x, y, 10 + Math.random() * 40, 40 + Math.random() * 80, randColor]);
	// everyObject.push([Math.random() * cvWidth, Math.random() * cvHeight, 10 + Math.random() * 40, 40 + Math.random() * 80, randColor]);
	}


	</script>

	</body>
	</html>