reFlower

by trentHarlem

HTML

<!-- <header><h1>Trent Harlem</h1></header> -->
<canvas id="canvas1">
</canvas>

CSS

* {
 margin: 0;
}

#canvas1 {
  background: radial-gradient(rgb(52, 52, 52) 20%, rgb(14, 24, 27) 80%);
  width: 100vw;
  height: 100vh;
}

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

let globComOp = ['xor', 'source-over', 'destination-over', 'overlay', 'lighter']
let choice =Math.floor(Math.random() * globComOp.length)
console.log(choice, globComOp[choice])
context.globalCompositeOperation = globComOp[choice]

let number = 0.2
let scale = 25.6
let hue = Math.random() * 360

function drawFlower2() {
  let angle = number * -50
  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, 20, 0, Math.PI * 2)
  context.closePath()
  context.fill()
  //context.stroke()
  number += 0.09
  hue += 0.09
  return posX
}

function animate() {
  //erase the previous position of the path.
  //context.clearRect(0, 0, canvas.width, canvas.height)
  let win = window.innerWidth
  drawFlower2()
  if (drawFlower2() > win + 25) return;
  requestAnimationFrame(animate)
}
animate()