Dynamic BG

"Boing!"

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>

    <h1 id='screen'></h1>
 <p id='shizz'>
 
 </p>
  <canvas id="canvas1">
  </canvas>

CSS

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
* {
  overflow: hidden;
}

#canvas1 {
  position: absolute;
  background: radial-gradient(rgb(52, 52, 52) 20%, rgb(14, 24, 27) 80%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

h1 {
  font: bold 5em 'Shrikhand', system-ui;
  color: whitesmoke;
  text-shadow: 0 0 10px black;
  position: relative;
  text-align: center;
  margin: 100px 0 0 0;
  z-index: 2;
}

 #shizz {
   font: lighter 2em 'Permanent Marker', system-ui;
   color: charcoal;
  text-shadow: 0 0 1px black;
  position: relative;
  top: 10px;
  text-align: center;
  z-index: 2;
 }

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 = 'destination-over'
window.devicePixelRatio = 2

let number = 5
let scale = 200 
let hue = Math.sqrt(number) 

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

//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 > 440) return;
  requestAnimationFrame(animate)
}
animate()

var i = setInterval(timer, 800);
function timer() {
document.getElementById('screen').innerHTML = "Boing!"
}
function myStopFunction() {
  clearInterval(i);
}

/* var j = setInterval(timer2, 1600);
function timer2() {
document.getElementById('shizz').innerHTML = "Buy my shizz!"
}
function myStopFunction() {
  clearInterval(j);
} */