JSFiddle - React, Tailwind, and code Playground

by Kristy Bond

HTML

<button onclick="doDrawing();">Start Drawing</button>
<button onclick="stopDrawing();">Stop Drawing</button>
<BR />
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

// Define Variables

var t = 0;
var c = document.getElementById("myCanvas");
var R = 90 + Math.random() * 55;
var ctx = c.getContext("2d");
var r = 75;
var inc = 0.3;
var O = 20;
var timesRun = 0;
 var xskew  = 1;//Math.random()*3+5/15; for reading later for other concepts. http://www.newtechnologysite.com/tutorials/canvas/transformation_canvas.html
var x = (c.width / 2) + (R + r) * Math.cos(t) - (r + O) * Math.cos(((R + r) / r) * t);
var y = (c.width / 2) + (R + r) * Math.sin(t) - (r + O) * Math.sin(((R + r) / r) * t);


function pastelColors(){
    var r = (Math.round(Math.random()* 127) + 127).toString(16);
    var g = (Math.round(Math.random()* 127) + 127).toString(16);
    var b = (Math.round(Math.random()* 127) + 127).toString(16);
    return '#' + r + g + b;
}

function stopDrawing() {

	ctx.clear();
  timesRun = 99999;
}

function doDrawing() {
xskew  = Math.random()*3+5/15;//Math.random()*3+5/15; this seems to look best so far
  t = 0;
  inc = Math.random()*10/25;
  timesRun = 0;
// R = Math.random()*25+50; dont like this one
// r = Math.random()*(R/2)+5;second best
 // r +=5; maybe later

  O += Math.random() * 3 ;

  // Clear the Canvas
  // ctx.clear();

  // Create a random color
  // var timesRun = 0;
  var color = '#' + Math.floor(Math.random() * 16777215).toString(16);

color = pastelColors();

  // Start the Drawing
  ctx.beginPath();
  ctx.lineWidth = Math.random()*13+1;
  ctx.strokeStyle = color;
  ctx.moveTo(x, y) * (c.width/2);

  //Use the timer to create drawing
  var interval = setInterval(function() {
    timesRun += 1;
    if (timesRun > 30000) {
      clearInterval(interval);
    }

xskew-=.01;

    drawCircle();
  }, 5);

}

function drawCircle() {
  t += inc;
  
  x = (c.width / 2) + Math.floor((R + r) * xskew * Math.cos(t) - (r + O) * Math.cos(((R + r) / r) * t));
  
  y = (c.width / 2) + Math.floor((R + R) * Math.sin(t) - (r + O) * Math.sin(((R + r) / r) * t));

 // if (timesRun == 0) 
 //...