Last active
December 16, 2015 07:29
-
-
Save syntacticsugar/5399574 to your computer and use it in GitHub Desktop.
magic mathz...
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>-=( magic maths )=-</title> | |
| <link rel="stylesheet" href="" /> | |
| </head> | |
| <body bgcolor="#040404"> | |
| <canvas id="canvas" width=960 height=700> | |
| </canvas> | |
| <script src="magic_maths.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| var canvas = document.getElementById("canvas"); | |
| var ctx = canvas.getContext('2d'); | |
| var width = canvas.width, | |
| height = canvas.height, | |
| midX = width/2, | |
| midY = height/2, | |
| angle = 145, | |
| // angle = 145, // this looks cool! | |
| side = 200; | |
| ctx.translate(midX, midY); | |
| function stepDuotone() { | |
| ctx.beginPath(); | |
| ctx.moveTo(0, 0); | |
| ctx.lineTo(0, side*Math.sqrt(2)); | |
| ctx.strokeStyle = "gainsboro"; | |
| ctx.stroke(); | |
| ctx.beginPath(); | |
| ctx.moveTo(-200, 200); | |
| ctx.lineTo(200, 200); | |
| ctx.strokeStyle = "orchid"; | |
| ctx.stroke(); | |
| ctx.rotate(angle * Math.PI/180) | |
| } | |
| // colors! | |
| var innerLight = "rgb(81,83,86)", | |
| innerDark = "rgb(132,137,115)", | |
| outerLight = "rgb(145,217,217)", | |
| outerDark = "rgb(52,115,115)"; | |
| // next... | |
| // how to make it delete old paths | |
| // after 5 rotations or so? | |
| function stepRainbow() { | |
| ctx.beginPath(); | |
| ctx.moveTo(0, 0); | |
| ctx.lineTo(0, side*Math.sqrt(2)); | |
| // gradient colour: | |
| ctx.strokeStyle = "steelblue"; | |
| ctx.stroke(); | |
| ctx.beginPath(); | |
| ctx.moveTo(-200, 200); | |
| ctx.lineTo(200, 200); | |
| // gradient colour: | |
| ctx.strokeStyle = "cadetblue"; | |
| ctx.stroke(); | |
| ctx.rotate(angle * Math.PI/180) | |
| } | |
| // window.onkeyup = step; | |
| setInterval( stepDuotone, 25 ); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment