Created
February 5, 2022 09:41
-
-
Save heiswayi/f832facb594fb5e8c6a5c45e72ae4e42 to your computer and use it in GitHub Desktop.
A simple HTML webpage to randomly generate shapes and colors for my toddler when playing with computer keyboard
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
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" itemscope itemtype="http://schema.org/WebPage"> | |
| <head> | |
| <link href="http://gmpg.org/xfn/11" rel="profile"> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta http-equiv="Expires" content="30"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <meta http-equiv="refresh" content="30" /> | |
| <title>Mawar Allyssa - Random Shapes - Keyboard Smashing - 2020</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| background: #fefefe; | |
| } | |
| canvas { | |
| display: block; | |
| } | |
| .copyright { | |
| z-index: 100; | |
| bottom: 0; | |
| right: 0; | |
| position: absolute; | |
| background: #eee; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| padding: 5px 10px; | |
| } | |
| .copyright a { | |
| color: #069; | |
| text-decoration: none; | |
| } | |
| .copyright a:hover { | |
| background: #069; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <span class="copyright">Made with <span style="color:#FF4136">♥</span> by <a href="https://heiswayi.nrird.com/about">Mawar Allyssa's Father</a></span> | |
| <script> | |
| (function () { | |
| var canvas = document.getElementById('canvas'), | |
| context = canvas.getContext('2d'); | |
| var startx = 0, | |
| starty = 0; | |
| window.addEventListener('resize', resizeCanvas, false); | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| drawStuff(); | |
| } | |
| resizeCanvas(); | |
| function drawStuff() { | |
| var centerX = canvas.width / 2; | |
| var centerY = canvas.height / 2; | |
| function drawCircle(coords) { | |
| var radius = 70; | |
| var coord = coords || randomCoord(); | |
| context.beginPath(); | |
| context.arc(coord.x, coord.y, radius, 0, 2 * Math.PI, false); | |
| context.fillStyle = randomColor(); | |
| context.fill(); | |
| context.lineWidth = 2; | |
| context.strokeStyle = 'rgba(0,0,0,1)'; | |
| context.stroke(); | |
| } | |
| function randomCoord() { | |
| return { | |
| x: Math.floor(Math.random() * canvas.width), | |
| y: Math.floor(Math.random() * canvas.height) | |
| }; | |
| } | |
| function rand(max) { | |
| return Math.floor(Math.random() * max); | |
| } | |
| function randomColor() { | |
| const colors = "#0000FF #FF0000 #FFFF00 #FF6600 #00FF00 #7F00FF #FF00FF".split(" "); // blue red yellow orange green purple pink | |
| return colors[rand(colors.length)]; | |
| } | |
| function drawSquare(coord) { | |
| const p = coord || randomCoord() | |
| context.beginPath(); | |
| context.rect(p.x, p.y, 150, 150); | |
| context.fillStyle = randomColor(); | |
| context.fill(); | |
| context.lineWidth = 2; | |
| context.strokeStyle = 'rgba(0,0,0,1)'; | |
| context.stroke(); | |
| } | |
| function randEl(arr) { | |
| arr[rand(arr.length)]; | |
| } | |
| function drawRectangle(coord) { | |
| const p = coord || randomCoord() | |
| context.beginPath(); | |
| context.rect(p.x, p.y, 200, 100); | |
| context.fillStyle = randomColor(); | |
| context.fill(); | |
| context.lineWidth = 2; | |
| context.strokeStyle = 'rgba(0,0,0,1)'; | |
| context.stroke(); | |
| } | |
| const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; | |
| function randomLetter() { | |
| return letters.charAt(rand(letters.length)); | |
| } | |
| function drawLetter(coord) { | |
| const p = coord || randomCoord(); | |
| const letter = randomLetter(); | |
| context.font = "900 200px sans-serif"; | |
| context.lineWidth = 3; | |
| context.strokeStyle = 'rgba(0,0,0,1)'; | |
| context.strokeText(letter, p.x, p.y); | |
| context.fillStyle = randomColor(); | |
| context.fillText(letter, p.x, p.y); | |
| context.stroke(); | |
| } | |
| function drawTriangle(coord) { | |
| const p = coord || randomCoord(); | |
| context.beginPath(); | |
| context.moveTo(p.x, p.y); | |
| context.lineTo((p.x - 150), (p.y + 150)); | |
| context.lineTo((p.x + 150), (p.y + 150)); | |
| context.closePath(); | |
| context.fillStyle = randomColor(); | |
| context.fill(); | |
| context.lineWidth = 2; | |
| context.strokeStyle = 'rgba(0,0,0,1)'; | |
| context.stroke(); | |
| } | |
| function drawShape(coord) { | |
| coord = coord || randomCoord(); | |
| var funs = [drawRectangle, drawCircle, drawSquare, drawLetter, drawTriangle]; | |
| funs[rand(funs.length)](coord); | |
| } | |
| window.drawLetter = drawLetter; | |
| function touch(e) { | |
| const coord = e.changedTouches[0]; | |
| drawShape({ | |
| x: coord.pageX, | |
| y: coord.pageY | |
| }); | |
| } | |
| canvas.addEventListener("touchstart", touch, false); | |
| document.addEventListener('keypress', x => { | |
| drawShape(); | |
| }); | |
| document.addEventListener('click', drawShape); | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment