eventHorizon

JavaScriptWormification

by trentHarlem

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trent-Shapes</title>
  <link rel="stylesheet" href="shapes.css">
</head>
<body>
  <!-- <header><h1>Trent Harlem</h1></header> -->
  <canvas id="canvas1">
  </canvas>

CSS

* {
  overflow: hidden;
}

#canvas1 {
  position: absolute;
  /* background: black; */
  background: radial-gradient(rgb(52, 52, 52) 20%, rgb(14, 24, 27) 80%);
  */
  /* background: radial-gradient(yellowgreen 20%, dodgerblue 80%); */
  border: 2px solid rgba(0, 0, 0, 0.336);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

const canvas = document.getElementById('canvas1')
// getContext---2dAPI has MANY built-in methods
const context = canvas.getContext('2d')
canvas.width = window.innerWidth 
canvas.height = window.innerHeight
// context.scale(2,2)
context.globalCompositeOperation = 'source-over'
window.devicePixelRatio = 2

let number = 0.5
let scale = 20 
let hue = Math.random() * 36 

function drawFlower2() {
  let angle = number * 1.9
  let radius = scale * Math.sqrt(number)
  let posX = radius * Math.sin(angle) + canvas.width / 2
  let posY = radius * Math.cos(angle) + canvas.height / 2
  context.fillStyle = 'hsl('+ hue +', 100%, 50%)';
  context.strokeStyle = 'rgba(111, 0, 0, 0.336)'
  context.lineWidth = 1
  context.beginPath()
  context.arc(posX, posY, number, 0, Math.PI * 2)
  context.closePath()
  context.fill()
  context.stroke()
  number += 0.09
  hue += 0.09
}

//use recursive function to animate
function animate() { 
  //erase the previous position of the path.
  // context.clearRect(0, 0, canvas.width, canvas.height)
  // drawFlower1()
  drawFlower2()
  if (number > 1440) return;
  requestAnimationFrame(animate)
}
animate()