Created
May 9, 2018 06:04
-
-
Save phi-line/160b492d2652c76a6f5353fba3a4d6bb to your computer and use it in GitHub Desktop.
Color Squircle
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <canvas width='1000' height='1000'></canvas> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let canvas = document.querySelector('canvas'); | |
| let c = canvas.getContext('2d'); | |
| canvas.addEventListener("mousedown", e => { | |
| penDown(e.x, e.y); | |
| canvas.onmousemove = e => penDown(e.x, e.y); | |
| }); | |
| canvas.addEventListener("mouseup", e => { | |
| canvas.onmousemove = null; | |
| }); | |
| canvas.addEventListener("click", e => { | |
| c.clearRect(0, 0, canvas.width, canvas.height); | |
| }) | |
| function penDown(x, y) { | |
| c.beginPath(); | |
| c.moveTo(x,y); | |
| c.lineTo(canvas.width/2, canvas.height/2); | |
| // c.quadraticCurveTo(x, y, canvas.width/2,canvas.height/2); | |
| c.lineWidth = 7; | |
| c.stroke(); | |
| if (color >= 360){ | |
| color = 0; | |
| } | |
| } | |
| let color = 0; | |
| function strobe(){ | |
| c.strokeStyle = `hsla(${color++}, 50%, 60%, 90%)`; | |
| if (color >= 360) color = 0; | |
| } | |
| setInterval(function() { strobe() }, 1); | |
| let date = new Date(); | |
| const SPEED = 1/Math.PI; | |
| function mainLoop() { | |
| let t = new Date().getTime() * SPEED; | |
| let size = 1000; | |
| let center = canvas.width/2; | |
| penDown(center + Math.sin(t) * size, center + Math.cos(t) * size); | |
| window.requestAnimationFrame(mainLoop); | |
| } | |
| c.strokeStyle = `hsla(${-1}, 50%, 60%, 90%)`; | |
| mainLoop(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html, canvas { | |
| background-color: #000; | |
| height: 100%; | |
| display: grid; | |
| } | |
| canvas { | |
| margin: auto; | |
| border-radius: 200px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment