Skip to content

Instantly share code, notes, and snippets.

@akella
Created June 1, 2021 08:16
Show Gist options
  • Save akella/67d8608b95ca5a63dcbad8a941252ebf to your computer and use it in GitHub Desktop.
Save akella/67d8608b95ca5a63dcbad8a941252ebf to your computer and use it in GitHub Desktop.
letscode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="drawing" width="1800" height="1800" style="width: 900px;height:900px"></canvas>
<script>
function lerp(a,b,t){
return a*(1-t) + b*t;
}
let canv = document.getElementById('drawing');
let ctx = canv.getContext('2d');
let cellSize = 360;
let cols = 1800/cellSize;
let numberOfCircles = 10;
ctx.lineWidth = 4;
for (let i = 0; i < cols; i++) {
for (let j = 0; j < cols; j++) {
ctx.save()
ctx.translate(i*cellSize + cellSize/2,j*cellSize + cellSize/2)
// ctx.rotate(
// (Math.floor(Math.random()*4)/4)*2*Math.PI
// )
// for (let k = 0; k <= numberOfCircles; k++) {
// let radius = lerp(cellSize/2,0,k/numberOfCircles);
// let offset = lerp(0,cellSize/4,k/numberOfCircles);
// ctx.beginPath()
// ctx.arc(
// offset,
// 0,
// radius, // radius
// 0,2*Math.PI)
// ctx.closePath()
// ctx.stroke()
// }
// 22222
// for (let k = 0; k <= numberOfCircles; k++) {
// let center = {x:0,y:60}
// let offset = lerp(-cellSize/2,cellSize/2,k/numberOfCircles)
// ctx.beginPath()
// ctx.moveTo(center.x,center.y)
// ctx.lineTo(offset,cellSize/2)
// ctx.closePath()
// ctx.stroke()
// ctx.beginPath()
// ctx.moveTo(center.x,center.y)
// ctx.lineTo(offset,-cellSize/2)
// ctx.closePath()
// ctx.stroke()
// ctx.beginPath()
// ctx.moveTo(center.x,center.y)
// ctx.lineTo(-cellSize/2,offset)
// ctx.closePath()
// ctx.stroke()
// ctx.beginPath()
// ctx.moveTo(center.x,center.y)
// ctx.lineTo(cellSize/2,offset)
// ctx.closePath()
// ctx.stroke()
// }
// 33333
let numberOfSquares = 140;
for (let k = 0; k <= numberOfSquares; k++) {
let size = lerp(cellSize,120,k/numberOfSquares)
let angle = lerp(0,Math.PI/2,k/numberOfSquares)
let opacity = lerp(0,0.1,k/numberOfSquares)
let red = lerp(0,255,k/numberOfSquares*k/numberOfSquares)
ctx.fillStyle = `rgba(${red},0,0,${opacity})`
ctx.save()
ctx.rotate(angle)
ctx.fillRect(-size/2,-size/2,size,size)
ctx.restore();
}
ctx.restore();
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment