akella/fwdays._final.js

## fwdays._final.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>canvas{border: 1px solid red}</style>
</head>
<body>
    <h1>Hello fwdayds!!!! ;-)</h1>
    <canvas id="my"></canvas>
    <script src="noise.js"></script>
    <script>
        let colors = ["#fe4a48","#2ab7ca","#fed766","#e6e6ea","#f4f4f8"]
        let canvas = document.getElementById("my");
        let ctx = canvas.getContext('2d');
        let width = 900;
        let number = 25;
        let margin = 0.2;
        canvas.width = width;
        canvas.height = width;


        const lerp = (a,b,t) =>(a*(1-t)+b*t)

        const createGrid = (count)=>{
            let points = [];
            for (let i = 0; i <= count; i++) {
                for (let j = 0; j <= count; j++) {
                    let x = lerp(margin*width,width - width*margin,i/count);
                    let y = lerp(margin*width,width - width*margin,j/count);
                    points.push({
                        position: [x,y]
                    })
                }
            }
            return points;
        }

        let grid = createGrid(number);
        let cellSize = (width - 2*margin*width)/(number)

        grid.forEach(item=>{
            ctx.save()
            ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)];
            ctx.translate(item.position[0],item.position[1])
            let rotation = 2*Math.PI*noise.simplex2(0.001*item.position[0] +0.2,0.001*item.position[1])
            let size = noise.simplex2(0.002*item.position[0] + 0.3,0.002*item.position[1])
            ctx.rotate(rotation)
            if(Math.random()>0.8) ctx.fillRect(
                0,
                0,
                0.5*size*cellSize,150*cellSize)
            ctx.restore();
        })

        function drawArc(){
            if(Math.random()>0.5) ctx.rotate(Math.PI/2)
            // ctx.strokeRect(
            // -cellSize/2,
            // -cellSize/2,
            // cellSize,cellSize)
            ctx.strokeStyle = colors[Math.floor(Math.random()*colors.length)];
            for (let i = 0; i < 10; i++) {
                ctx.beginPath();
                ctx.arc(-cellSize/2,cellSize/2,cellSize-i,1.5*Math.PI,2*Math.PI)
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(cellSize/2,-cellSize/2,cellSize-i,.5*Math.PI,Math.PI)
                ctx.stroke();
            }

        }

        grid.forEach(item=>{
            ctx.save()
            ctx.translate(item.position[0],item.position[1])
            drawArc()
            ctx.restore();
        })


        // ctx.fillRect(100,100,100,100)


        // let time = 0;
        // function raf(){
        //     time++;
        //     ctx.clearRect(0,0,width,width)
        //     ctx.fillRect(100,100,100+50*Math.sin(time/50),100)
        //     window.requestAnimationFrame(raf)
        // }
        // raf()


    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>canvas{border: 1px solid red}</style>
	</head>
	<body>
	<h1>Hello fwdayds!!!! ;-)</h1>
	<canvas id="my"></canvas>
	<script src="noise.js"></script>
	<script>
	let colors = ["#fe4a48","#2ab7ca","#fed766","#e6e6ea","#f4f4f8"]
	let canvas = document.getElementById("my");
	let ctx = canvas.getContext('2d');
	let width = 900;
	let number = 25;
	let margin = 0.2;
	canvas.width = width;
	canvas.height = width;


	const lerp = (a,b,t) =>(a(1-t)+bt)

	const createGrid = (count)=>{
	let points = [];
	for (let i = 0; i <= count; i++) {
	for (let j = 0; j <= count; j++) {
	let x = lerp(marginwidth,width - widthmargin,i/count);
	let y = lerp(marginwidth,width - widthmargin,j/count);
	points.push({
	position: [x,y]
	})
	}
	}
	return points;
	}

	let grid = createGrid(number);
	let cellSize = (width - 2marginwidth)/(number)

	grid.forEach(item=>{
	ctx.save()
	ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)];
	ctx.translate(item.position[0],item.position[1])
	let rotation = 2Math.PInoise.simplex2(0.001item.position[0] +0.2,0.001item.position[1])
	let size = noise.simplex2(0.002item.position[0] + 0.3,0.002item.position[1])
	ctx.rotate(rotation)
	if(Math.random()>0.8) ctx.fillRect(
	0,
	0,
	0.5sizecellSize,150*cellSize)
	ctx.restore();
	})

	function drawArc(){
	if(Math.random()>0.5) ctx.rotate(Math.PI/2)
	// ctx.strokeRect(
	// -cellSize/2,
	// -cellSize/2,
	// cellSize,cellSize)
	ctx.strokeStyle = colors[Math.floor(Math.random()*colors.length)];
	for (let i = 0; i < 10; i++) {
	ctx.beginPath();
	ctx.arc(-cellSize/2,cellSize/2,cellSize-i,1.5Math.PI,2Math.PI)
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(cellSize/2,-cellSize/2,cellSize-i,.5*Math.PI,Math.PI)
	ctx.stroke();
	}

	}

	grid.forEach(item=>{
	ctx.save()
	ctx.translate(item.position[0],item.position[1])
	drawArc()
	ctx.restore();
	})




	// ctx.fillRect(100,100,100,100)





	// let time = 0;
	// function raf(){
	// time++;
	// ctx.clearRect(0,0,width,width)
	// ctx.fillRect(100,100,100+50*Math.sin(time/50),100)
	// window.requestAnimationFrame(raf)
	// }
	// raf()


	</script>

	</body>
	</html>