akella/letscode.html

## letscode.html
<!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>
	<!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) + bt;
	}

	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(icellSize + cellSize/2,jcellSize + 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>