Created
May 22, 2021 16:56
-
-
Save hekras/f8f10e939cfab0e9e01550d19cd7da99 to your computer and use it in GitHub Desktop.
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> | |
| <head> | |
| <link rel="apple-touch-icon" sizes="57x57" href="../apple-icon-57x57.png"> | |
| <link rel="apple-touch-icon" sizes="60x60" href="../apple-icon-60x60.png"> | |
| <link rel="apple-touch-icon" sizes="72x72" href="../apple-icon-72x72.png"> | |
| <link rel="apple-touch-icon" sizes="76x76" href="../apple-icon-76x76.png"> | |
| <link rel="apple-touch-icon" sizes="114x114" href="../apple-icon-114x114.png"> | |
| <link rel="apple-touch-icon" sizes="120x120" href="../apple-icon-120x120.png"> | |
| <link rel="apple-touch-icon" sizes="144x144" href="../apple-icon-144x144.png"> | |
| <link rel="apple-touch-icon" sizes="152x152" href="../apple-icon-152x152.png"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="../apple-icon-180x180.png"> | |
| <link rel="icon" type="image/png" sizes="192x192" href="../android-icon-192x192.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png"> | |
| <link rel="manifest" href="../manifest.json"> | |
| <meta name="msapplication-TileColor" content="#ffffff"> | |
| <meta name="msapplication-TileImage" content="../ms-icon-144x144.png"> | |
| <meta name="theme-color" content="#ffffff"> | |
| <meta charset="utf-8" /> | |
| <title>Handmixers lost demo</title> | |
| <style type="text/css"> | |
| * { | |
| margin: 0; | |
| background: rgb(0, 0, 0); | |
| border: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas></canvas> | |
| </body> | |
| <script> | |
| var tick = 0; | |
| const dtick = 0.1; | |
| var kisser = {}; | |
| var flag = {}; | |
| var alien = {}; | |
| var love = {}; | |
| var statemachine = 0; | |
| var star = []; | |
| var alpha = "rgba(0, 0, 0, 1.0)"; | |
| var pos = { | |
| x: 0, | |
| xoff: 0, | |
| y: 0, | |
| a: 0, | |
| i: 0, | |
| da: 0.02, | |
| }; | |
| function initStar(i, c) { | |
| var angle = 2 * Math.PI * Math.random(); | |
| var velocity = 3 * Math.random(); | |
| star[i] = { | |
| x: pos.x, | |
| y: pos.y, | |
| dx: velocity * Math.cos(angle), | |
| dy: velocity * Math.sin(angle), | |
| count: 50 * Math.random(), | |
| dead: c, | |
| }; | |
| } | |
| function animateFirework() { | |
| dc.fillStyle = alpha; | |
| dc.fillRect(0, 0, width, height); | |
| switch (statemachine) { | |
| case 0: | |
| star = []; | |
| for (var i = 0; i < 50; i++) { | |
| initStar(i, true); | |
| } | |
| pos.i = -470; | |
| pos.xoff = width * 0.8 * Math.random(); | |
| alpha = "rgba(0, 0, 0, 1.0)"; | |
| statemachine = 1; | |
| break; | |
| case 1: | |
| for (var i = 0; i < star.length; i++) { | |
| star[i].count--; | |
| if (star[i].count > 0) { | |
| star[i].x += star[i].dx; | |
| star[i].y += star[i].dy; | |
| } | |
| else { | |
| pos.x = pos.xoff - pos.i; | |
| pos.y = height * 0.2 + (pos.i * pos.i) / 150; | |
| pos.i++; | |
| initStar(i, false); | |
| } | |
| } | |
| if (pos.i > -200) { | |
| statemachine = 2; | |
| } | |
| break; | |
| case 2: // boom | |
| star = []; | |
| for (var i = 0; i < 250; i++) { | |
| initStar(i, false); | |
| star[i].dcount = 0.1 + 0.2 * Math.random(); | |
| } | |
| alpha = "rgba(0, 0, 0, 0.05)"; | |
| statemachine = 3; | |
| break; | |
| case 3: | |
| var alive = 0; | |
| for (var i = 0; i < star.length; i++) { | |
| if (!star[i].dead) { | |
| star[i].count -= star[i].dcount; | |
| alive++; | |
| if (star[i].count > 0) { | |
| star[i].x += star[i].dx; | |
| star[i].y += star[i].dy; | |
| star[i].dy += 0.01; | |
| star[i].dx *= 0.999; | |
| } | |
| else { | |
| star[i].dead = true; | |
| } | |
| } | |
| } | |
| if (alive == 0) { | |
| statemachine = 0; | |
| } | |
| break; | |
| default: | |
| } | |
| dc.fillStyle = "#FFFF00"; | |
| for (var i = 0; i < star.length; i++) { | |
| if (!star[i].dead) { | |
| dc.fillRect(star[i].x, star[i].y, star[i].count / 2, star[i].count / 2); | |
| } | |
| } | |
| } | |
| function animateLove() { | |
| dc.clearRect(0, 0, width, height); | |
| switch (statemachine) { | |
| case 0: // start the show | |
| love = { | |
| x: width / 2, | |
| y: height / 2, | |
| scale: 0.1, | |
| size: 20.0, | |
| maxscale: 10.0, | |
| angle: 0.0, | |
| targetangle: 0.5, | |
| dangle: 0.015, | |
| mangle: 3.1457, | |
| }; | |
| statemachine = 1; | |
| break; | |
| case 1: // increase size | |
| love.scale *= 1.01; | |
| if (love.scale > love.maxscale) { | |
| statemachine = 1; | |
| } | |
| break; | |
| } | |
| tick += dtick; | |
| var angle = tick / 2; | |
| dc.save(); | |
| dc.translate(love.x, love.y); // center of window | |
| dc.rotate(love.mangle); | |
| var scale = love.size * (1 + Math.sin(love.angle + angle)); | |
| dc.scale(scale, scale); | |
| dc.fillStyle = "#FF0000"; //gc.setFill(Color.RED); | |
| dc.strokeStyle = "#FFFFFF"; //gc.setFill(Color.RED); | |
| dc.lineWidth = 1; | |
| dc.beginPath(); | |
| // init shape coordinates | |
| var dmyt = 6.0 / 60.0; | |
| var index = 0; | |
| for (var myt = -3.5; myt < 3; myt += dmyt) { | |
| var x = 18 * Math.pow(Math.sin(myt), 3); | |
| var y = 14 * Math.cos(myt) - 5 * Math.cos(2 * myt) - 3 * Math.cos(3 * myt) - Math.cos(4 * myt); | |
| dc.lineTo(x, y); | |
| index++; | |
| } | |
| dc.fill(); | |
| dc.stroke(); | |
| dc.restore(); | |
| love.angle += love.dangle; | |
| love.mangle += love.dangle; | |
| } | |
| function animateAlien() { | |
| dc.clearRect(0, 0, width, height); | |
| var s = 5; | |
| switch (statemachine) { | |
| case 0: // start the show | |
| alien = { | |
| x: width / 2, | |
| y: height / 2, | |
| scale: 0.1, | |
| maxscale: 10.0, | |
| angle: 0.0, | |
| targetangle: 0.5, | |
| dangle: 0.015, | |
| }; | |
| statemachine = 1; | |
| break; | |
| case 1: // increase size | |
| alien.scale *= 1.01; | |
| if (alien.scale > alien.maxscale) { | |
| statemachine = 2; | |
| } | |
| break; | |
| case 2: // twist a little | |
| alien.angle += alien.dangle; | |
| if (alien.angle > alien.targetangle) { | |
| alien.targetangle = - 0.5, | |
| statemachine = 3; | |
| } | |
| break; | |
| case 3: // twist a little | |
| alien.angle -= alien.dangle; | |
| if (alien.angle < alien.targetangle) { | |
| alien.targetangle = 0.5, | |
| statemachine = 4; | |
| } | |
| break; | |
| case 4: // twist a little | |
| alien.angle += alien.dangle; | |
| if (alien.angle > alien.targetangle) { | |
| alien.targetangle = - 0.5, | |
| statemachine = 5; | |
| } | |
| break; | |
| case 5: // twist a little | |
| alien.angle -= alien.dangle; | |
| if (alien.angle < alien.targetangle) { | |
| alien.targetangle = 0.5, | |
| statemachine = 6; | |
| alien.maxscale = 100; | |
| } | |
| break; | |
| case 6: // increase size and move out of view | |
| alien.scale *= 1.01; | |
| alien.angle -= alien.dangle; | |
| alien.x += alien.scale * Math.cos(alien.angle); | |
| alien.y += alien.scale * Math.sin(alien.angle); | |
| if (alien.scale > alien.maxscale) { | |
| statemachine = 0; | |
| } | |
| break; | |
| default: | |
| // console.log("statemachine=" + statemachine); | |
| } | |
| tick += dtick; | |
| var angle = tick / 2; | |
| var size = tick / 10; | |
| dc.save(); | |
| var s = 5; | |
| dc.translate(alien.x, alien.y); // center of window | |
| var scale = alien.size + Math.sin(alien.angle); | |
| dc.scale(alien.scale, alien.scale); | |
| dc.rotate(alien.angle); | |
| dc.fillStyle = "RED"; | |
| dc.fillRect(-4 * s, -6 * s, 8 * s, 2 * s); | |
| dc.fillRect(-5 * s, -5 * s, 10 * s, 9 * s); | |
| var xx = s * 3 * Math.sin(tick) - 5 * s; | |
| dc.fillRect(xx, 2 * s, 4 * s, 5 * s); | |
| dc.fillRect(xx + 6 * s, 2 * s, s * 4, s * 5); | |
| dc.fillStyle = "WHITE"; | |
| dc.fillRect(-3 * s, -4 * s, 2 * s, 4 * s); | |
| dc.fillRect(1 * s, -4 * s, 2 * s, 4 * s); | |
| dc.fillStyle = "BLACK"; | |
| dc.fillRect(-3 * s, -2 * s, s, 2 * s); | |
| dc.fillRect(1 * s, -2 * s, s, 2 * s); | |
| dc.restore(); | |
| } | |
| function animateFlag() { | |
| dc.clearRect(0, 0, width, height); | |
| switch (statemachine) { | |
| case 0: // start the show | |
| flag = { | |
| x: width / 2, | |
| y: height / 2, | |
| scale: 10, | |
| size: 20.0, | |
| maxscale: 0.1, | |
| angle: 0.0, | |
| targetangle: 0.5, | |
| dangle: 0.015, | |
| mangle: 3.1457, | |
| }; | |
| statemachine = 1; | |
| break; | |
| case 1: // increase size | |
| flag.scale *= 1.01; | |
| if (flag.scale > flag.maxscale) { | |
| statemachine = 1; | |
| } | |
| break; | |
| default: | |
| // console.log("statemachine=" + statemachine); | |
| } | |
| tick += dtick; | |
| var angle = tick / 2; | |
| dc.save(); | |
| dc.translate(flag.x, flag.y); // center of window | |
| dc.rotate(flag.mangle); | |
| var scale = flag.size * (1 + Math.sin(flag.angle + angle)); | |
| dc.scale(scale, scale); | |
| dc.fillStyle = "#FFFFFF"; //gc.setFill(Color.WHITE); | |
| dc.fillRect(-20.0, -20.0, 60.0, 40.0); | |
| dc.fillStyle = "#FF0000"; //gc.setFill(Color.RED); | |
| dc.fillRect(-20.0, -20.0, 17.0, 17.0); | |
| dc.fillRect(-20.0, 3.0, 17.0, 17.0); | |
| dc.fillRect(3.0, -20.0, 37.0, 17.0); | |
| dc.fillRect(3.0, 3.0, 37.0, 17.0); | |
| dc.restore(); | |
| flag.angle += flag.dangle; | |
| flag.mangle += flag.dangle; | |
| } | |
| function animateKisser() { | |
| dc.clearRect(0, 0, width, height); | |
| switch (statemachine) { | |
| case 0: // start the show | |
| kisser = { | |
| x: width / 2, | |
| y: height / 2, | |
| scale: 0.1, | |
| maxscale: 10.0, | |
| angle: Math.PI, | |
| targetangle: Math.PI + 0.5, | |
| dangle: 0.02, | |
| }; | |
| statemachine = 1; | |
| break; | |
| case 1: // increase size | |
| kisser.scale *= 1.01; | |
| if (kisser.scale > kisser.maxscale) { | |
| statemachine = 2; | |
| } | |
| break; | |
| case 2: // twist a little | |
| kisser.angle += kisser.dangle; | |
| if (kisser.angle > kisser.targetangle) { | |
| kisser.targetangle = Math.PI - 0.5, | |
| statemachine = 3; | |
| } | |
| break; | |
| case 3: // twist a little | |
| kisser.angle -= kisser.dangle; | |
| if (kisser.angle < kisser.targetangle) { | |
| kisser.targetangle = Math.PI + 0.5, | |
| statemachine = 4; | |
| } | |
| break; | |
| case 4: // twist a little | |
| kisser.angle += kisser.dangle; | |
| if (kisser.angle > kisser.targetangle) { | |
| kisser.targetangle = Math.PI - 0.5, | |
| statemachine = 5; | |
| } | |
| break; | |
| case 5: // twist a little | |
| kisser.angle -= kisser.dangle; | |
| if (kisser.angle < kisser.targetangle) { | |
| kisser.targetangle = Math.PI + 0.5, | |
| statemachine = 6; | |
| kisser.maxscale = 100; | |
| } | |
| break; | |
| case 6: // increase size and move out of view | |
| kisser.scale *= 1.01; | |
| kisser.angle += kisser.dangle; | |
| kisser.x += kisser.scale * Math.cos(kisser.angle); | |
| kisser.y += kisser.scale * Math.sin(kisser.angle); | |
| if (kisser.scale > kisser.maxscale) { | |
| statemachine = 0; | |
| } | |
| break; | |
| } | |
| tick += dtick; | |
| var angle = tick / 2; | |
| var size = tick / 10; | |
| dc.save(); | |
| dc.translate(kisser.x, kisser.y); | |
| dc.rotate(kisser.angle); | |
| dc.scale(kisser.scale, kisser.scale); | |
| dc.strokeStyle = "YELLOW"; | |
| dc.scale(0.1, 0.1); | |
| dc.lineWidth = 3; | |
| dc.beginPath(); | |
| dc.lineTo(-0.05058, -16.771209); | |
| dc.lineTo(-1.40512, -14.905512); | |
| dc.lineTo(-5.54724, -11.601373); | |
| dc.lineTo(-11.57766, -7.096828); | |
| dc.lineTo(-16.62438, -1.209467); | |
| dc.lineTo(-17.86506, 5.612500); | |
| dc.lineTo(-14.57386, 11.36275); | |
| dc.lineTo(-8.65170, 13.44752); | |
| dc.lineTo(-3.24035, 11.16190); | |
| dc.lineTo(-0.46455, 7.02084); | |
| dc.lineTo(0.00000, 5.00000); | |
| dc.lineTo(0.46455, 7.02084); | |
| dc.lineTo(3.24035, 11.16190); | |
| dc.lineTo(8.65170, 13.44752); | |
| dc.lineTo(14.57386, 11.36275); | |
| dc.lineTo(17.86506, 5.61250); | |
| dc.lineTo(16.62438, -1.20946); | |
| dc.lineTo(11.57766, -7.09682); | |
| dc.lineTo(5.54724, -11.60137); | |
| dc.lineTo(1.40512, -14.90551); | |
| dc.lineTo(0.05058, -16.77120); | |
| dc.scale(2, 2); | |
| dc.moveTo(-30.05058, -20.771209); | |
| dc.lineTo(-70.05058, -36.771209) | |
| dc.moveTo(30.05058, -20.771209); | |
| dc.lineTo(70.05058, -36.771209) | |
| dc.moveTo(-30.05058, -6.771209); | |
| dc.lineTo(-70.05058, -10.771209) | |
| dc.moveTo(30.05058, -6.771209); | |
| dc.lineTo(70.05058, -10.771209) | |
| dc.moveTo(30.05058, 8.771209); | |
| dc.lineTo(70.05058, 15.771209) | |
| dc.moveTo(-30.05058, 8.771209); | |
| dc.lineTo(-70.05058, 15.771209) | |
| dc.moveTo(70.0, 80.0); | |
| dc.lineTo(60.0, 110.0) | |
| dc.lineTo(30.0, 85.0) | |
| dc.moveTo(60.0, 90.0); | |
| dc.lineTo(55.0, 100.0) | |
| dc.lineTo(40.0, 85.0) | |
| dc.moveTo(-70.0, 80.0); | |
| dc.lineTo(-60.0, 110.0) | |
| dc.lineTo(-30.0, 85.0) | |
| dc.moveTo(-60.0, 90.0); | |
| dc.lineTo(-55.0, 100.0) | |
| dc.lineTo(-40.0, 85.0) | |
| dc.stroke(); | |
| dc.restore(); | |
| } | |
| function animateText() { | |
| dc.clearRect(0, 0, width, height); | |
| switch (statemachine) { | |
| case 0: // start the show | |
| text = []; | |
| for (var i = 0; i < 100; i++) { | |
| text[i] = document.createElement("canvas"); | |
| text[i].width = 1000; | |
| text[i].height = 1; | |
| var tdc = text[i].getContext("2d"); | |
| tdc.translate(0, -i); | |
| tdc.strokeStyle = "white"; | |
| tdc.fillStyle = "red"; | |
| tdc.font = "98px arial"; | |
| var str = "handmixer.dk"; | |
| tdc.fillText(str, 0, 98); | |
| tdc.strokeText(str, 0, 98); | |
| } | |
| statemachine = 1; | |
| break; | |
| case 1: // increase size | |
| statemachine = 1; | |
| break; | |
| default: | |
| // console.log("statemachine=" + statemachine); | |
| } | |
| tick += dtick; | |
| var angle = tick / 2; | |
| for (var j = 1; j < 10; j++) { | |
| dc.save(); | |
| // dc.scale(1, 2); | |
| for (var i = 0; i < text.length; i++) { | |
| var ii = 300 + Math.floor(20 + 200 * Math.sin(tick + i / 200 + j * 0.5)); | |
| dc.drawImage(text[i], ii, i + 100 * j); | |
| } | |
| dc.restore(); | |
| } | |
| } | |
| function animateCalendar() { | |
| dc.clearRect(0, 0, width, height); | |
| window.location.href = "http://handmixer.dk/index.php"; | |
| } | |
| function animateloop() { | |
| // dc.clearRect(0, 0, width, height); | |
| switch (currentmenu) { | |
| case 0: //kisser | |
| animateKisser(); | |
| break; | |
| case 1: //Flag | |
| animateFlag(); | |
| break; | |
| case 2: //Alien | |
| animateAlien(); | |
| break; | |
| case 3: //Love | |
| animateLove(); | |
| break; | |
| case 4: //Firework | |
| animateFirework(); | |
| break; | |
| case 5: //Textfun | |
| animateText(); | |
| break; | |
| case 6: // Calendar | |
| animateCalendar(); | |
| break; | |
| } | |
| if (menutimeout < activitytimer) { | |
| dc.drawImage(menucanvas[currentmenu], 0, 0); | |
| } | |
| menutimeout++; | |
| } | |
| function mouseDown(e) { | |
| if (menutimeout < activitytimer) { | |
| var xxx = e.clientX; | |
| var yyy = e.clientY; | |
| for (var i = 0; i < 6; i++) { | |
| var cx = 75 + 105 * i; | |
| var cy = 75; | |
| var dx = xxx - cx; | |
| var dy = yyy - cy; | |
| var dist2 = dx * dx + dy * dy; | |
| if (dist2 < 2800) { | |
| if (i != currentmenu) { | |
| currentmenu = i; | |
| statemachine = 0; | |
| } | |
| break; | |
| } | |
| } | |
| } | |
| menutimeout = 0; | |
| } | |
| function mouseUp(e) { | |
| menutimeout = 0; | |
| } | |
| function mouseMove(e) { | |
| menutimeout = 0; | |
| var xxx = e.clientX; | |
| var yyy = e.clientY; | |
| var cursor = "default"; | |
| if (menutimeout < activitytimer) { | |
| for (var i = 0; i < 6; i++) { | |
| var cx = 75 + 105 * i; | |
| var cy = 75; | |
| var dx = xxx - cx; | |
| var dy = yyy - cy; | |
| var dist2 = dx * dx + dy * dy; | |
| if (dist2 < 2800) { | |
| cursor = "pointer"; | |
| break; | |
| } | |
| } | |
| } | |
| canvas.style.cursor = cursor; | |
| } | |
| function initMenuCanvas() { | |
| var menuItems = 6; | |
| for (var j = 0; j < menuItems; j++) { | |
| menucanvas[j] = document.createElement("canvas"); | |
| menucanvas[j].width = 1500; | |
| menucanvas[j].height = 135; | |
| var mdc = menucanvas[j].getContext("2d"); | |
| mdc.strokeStyle = "gray"; | |
| mdc.fillStyle = "rgb(100,0,0)"; | |
| for (var i = 0; i < menuItems; i++) { | |
| mdc.beginPath(); | |
| mdc.arc(75 + 105 * i, 75, 50, 0, 2 * Math.PI); | |
| if (i == j) { | |
| mdc.fill(); | |
| } | |
| mdc.stroke(); | |
| } | |
| mdc.fillStyle = "white"; | |
| mdc.font = "14px arial"; | |
| mdc.fillText("Last update: September 18. 2019 / Handmixer", 10, 17); | |
| mdc.save(); | |
| mdc.translate(75, 90); | |
| mdc.rotate(Math.PI); | |
| mdc.scale(1.0, 1.0); | |
| mdc.strokeStyle = "YELLOW"; | |
| mdc.scale(0.2, 0.2); | |
| mdc.lineWidth = 3; | |
| mdc.beginPath(); | |
| mdc.lineTo(-0.05058, -16.771209); | |
| mdc.lineTo(-1.40512, -14.905512); | |
| mdc.lineTo(-5.54724, -11.601373); | |
| mdc.lineTo(-11.57766, -7.096828); | |
| mdc.lineTo(-16.62438, -1.209467); | |
| mdc.lineTo(-17.86506, 5.612500); | |
| mdc.lineTo(-14.57386, 11.36275); | |
| mdc.lineTo(-8.65170, 13.44752); | |
| mdc.lineTo(-3.24035, 11.16190); | |
| mdc.lineTo(-0.46455, 7.02084); | |
| mdc.lineTo(0.00000, 5.00000); | |
| mdc.lineTo(0.46455, 7.02084); | |
| mdc.lineTo(3.24035, 11.16190); | |
| mdc.lineTo(8.65170, 13.44752); | |
| mdc.lineTo(14.57386, 11.36275); | |
| mdc.lineTo(17.86506, 5.61250); | |
| mdc.lineTo(16.62438, -1.20946); | |
| mdc.lineTo(11.57766, -7.09682); | |
| mdc.lineTo(5.54724, -11.60137); | |
| mdc.lineTo(1.40512, -14.90551); | |
| mdc.lineTo(0.05058, -16.77120); | |
| mdc.scale(2, 2); | |
| mdc.moveTo(-30.05058, -20.771209); | |
| mdc.lineTo(-70.05058, -36.771209) | |
| mdc.moveTo(30.05058, -20.771209); | |
| mdc.lineTo(70.05058, -36.771209) | |
| mdc.moveTo(-30.05058, -6.771209); | |
| mdc.lineTo(-70.05058, -10.771209) | |
| mdc.moveTo(30.05058, -6.771209); | |
| mdc.lineTo(70.05058, -10.771209) | |
| mdc.moveTo(30.05058, 8.771209); | |
| mdc.lineTo(70.05058, 15.771209) | |
| mdc.moveTo(-30.05058, 8.771209); | |
| mdc.lineTo(-70.05058, 15.771209) | |
| mdc.moveTo(70.0, 80.0); | |
| mdc.lineTo(60.0, 110.0) | |
| mdc.lineTo(30.0, 85.0) | |
| mdc.moveTo(60.0, 90.0); | |
| mdc.lineTo(55.0, 100.0) | |
| mdc.lineTo(40.0, 85.0) | |
| mdc.moveTo(-70.0, 80.0); | |
| mdc.lineTo(-60.0, 110.0) | |
| mdc.lineTo(-30.0, 85.0) | |
| mdc.moveTo(-60.0, 90.0); | |
| mdc.lineTo(-55.0, 100.0) | |
| mdc.lineTo(-40.0, 85.0) | |
| mdc.stroke(); | |
| mdc.restore(); | |
| mdc.save(); | |
| mdc.translate(170.0, 75.0); | |
| mdc.scale(1.0, 1.0); | |
| mdc.fillStyle = "#FFFFFF"; | |
| mdc.fillRect(-20.0, -20.0, 60.0, 40.0); | |
| mdc.fillStyle = "#FF0000"; | |
| mdc.fillRect(-20.0, -20.0, 17.0, 17.0); | |
| mdc.fillRect(-20.0, 3.0, 17.0, 17.0); | |
| mdc.fillRect(3.0, -20.0, 37.0, 17.0); | |
| mdc.fillRect(3.0, 3.0, 37.0, 17.0); | |
| mdc.restore(); | |
| mdc.save(); | |
| var s = 5; | |
| mdc.translate(285.0, 75.0); | |
| mdc.scale(1.0, 1.0); | |
| mdc.fillStyle = "RED"; | |
| mdc.fillRect(-4 * s, -6 * s, 8 * s, 2 * s); | |
| mdc.fillRect(-5 * s, -5 * s, 10 * s, 9 * s); | |
| var xx = - 6 * s; | |
| mdc.fillRect(xx, 2 * s, 4 * s, 5 * s); | |
| mdc.fillRect(xx + 6 * s, 2 * s, s * 4, s * 5); | |
| mdc.fillStyle = "WHITE"; | |
| mdc.fillRect(-3 * s, -4 * s, 2 * s, 4 * s); | |
| mdc.fillRect(1 * s, -4 * s, 2 * s, 4 * s); | |
| mdc.fillStyle = "BLACK"; | |
| mdc.fillRect(-3 * s, -2 * s, s, 2 * s); | |
| mdc.fillRect(1 * s, -2 * s, s, 2 * s); | |
| mdc.restore(); | |
| mdc.save(); | |
| mdc.translate(390.0, 75.0); | |
| mdc.rotate(Math.PI); | |
| mdc.scale(2.0, 2.0); | |
| mdc.fillStyle = "#FF0000"; | |
| mdc.strokeStyle = "#FFFFFF"; | |
| mdc.lineWidth = 1; | |
| mdc.beginPath(); | |
| // init shape coordinates | |
| var dmyt = 6.0 / 60.0; | |
| var index = 0; | |
| for (var myt = -3.5; myt < 3; myt += dmyt) { | |
| var x = 18 * Math.pow(Math.sin(myt), 3); | |
| var y = 14 * Math.cos(myt) - 5 * Math.cos(2 * myt) - 3 * Math.cos(3 * myt) - Math.cos(4 * myt); | |
| mdc.lineTo(x, y); | |
| index++; | |
| } | |
| mdc.fill(); | |
| mdc.stroke(); | |
| mdc.restore(); | |
| mdc.save(); | |
| mdc.translate(455.0, 80.0); | |
| // mdc.rotate(Math.PI); | |
| // mdc.scale(2.0, 2.0); | |
| mdc.fillStyle = "#FFFF00"; | |
| mdc.strokeStyle = "#FFFFFF"; | |
| mdc.font = "18px arial" | |
| mdc.fillText("Fireworks", 0, 0); | |
| mdc.restore(); | |
| mdc.save(); | |
| mdc.translate(570.0, 80.0); | |
| // mdc.rotate(Math.PI); | |
| // mdc.scale(2.0, 2.0); | |
| mdc.fillStyle = "#FFFF00"; | |
| mdc.strokeStyle = "#FFFFFF"; | |
| mdc.font = "18px arial" | |
| mdc.fillText("Textfun", 0, 0); | |
| mdc.restore(); | |
| } | |
| } | |
| /*********************************** | |
| // main - program starts here !!!!!! | |
| ************************************/ | |
| const canvas = document.querySelector("canvas"); | |
| const width = canvas.width = window.innerWidth; | |
| const height = canvas.height = window.innerHeight; | |
| const dc = canvas.getContext("2d"); | |
| var menucanvas = []; | |
| var currentmenu = 0; | |
| var statemachine = 0; | |
| var menutimeout = 1000; | |
| var activitytimer = 100; | |
| initMenuCanvas(); | |
| canvas.addEventListener("mousedown", mouseDown); | |
| canvas.addEventListener("mouseup", mouseUp); | |
| canvas.addEventListener("mousemove", mouseMove); | |
| canvas.addEventListener("mousedrag", mouseMove); | |
| window.setInterval(animateloop, 1000 / 60); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment