akella · September 23, 2020 16:17
diff --git a/fwdays1.js b/fwdays1.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 = 140;
        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 = 4*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,14*cellSize)
            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 = 140;
	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 = 4noise.simplex2(0.002item.position[0] + 0.3,0.002*item.position[1])
	ctx.rotate(rotation)
	if(Math.random()>0.8) ctx.fillRect(
	0,
	0,
	0.5sizecellSize,14*cellSize)
	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>
No results found