Use mouse to move umbrella around the screen.
A Pen by Liliana Kastilio on CodePen.
Created
April 15, 2014 13:58
-
-
Save lili2311/10734994 to your computer and use it in GitHub Desktop.
A Pen by Liliana Kastilio.
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> | |
| <canvas id="myCanvas"></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
| var canvas = document.getElementById('myCanvas'); | |
| var isMouseDown = false; | |
| var isMouseMove = false; | |
| var message = ""; | |
| var mousePos = { | |
| x:0, | |
| y:0 | |
| }; | |
| if(canvas.getContext && canvas.getContext('2d')) { | |
| context = canvas.getContext('2d'); //context | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| canvas.style.position = 'absolute'; | |
| canvas.style.top = 0; | |
| canvas.style.bottom = 0; | |
| canvas.style.left = 0; | |
| canvas.style.right = 0; | |
| canvas.style.zIndex = -1; | |
| var umbrella = { | |
| top: { | |
| x: 300, | |
| y: 200, | |
| r: 75, | |
| sAngle: Math.PI, | |
| eAngle: 0 | |
| }, | |
| handle: { | |
| width: 2, | |
| height: 90 | |
| } | |
| } | |
| canvas.addEventListener('mousemove', function(evt) { | |
| mousePos = getMousePos(canvas, evt); | |
| message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; | |
| writeMessage(canvas, message); | |
| isMouseMove = true; | |
| }, false); | |
| canvas.addEventListener('mousedown', function(evt) { | |
| isMouseDown = true; | |
| mousePos = getMousePos(canvas, evt); | |
| message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; | |
| writeMessage(canvas, message); | |
| }, false); | |
| canvas.addEventListener('mouseup', function(evt) { | |
| isMouseDown = false; | |
| }, false); | |
| } | |
| function draw_umbrella() { | |
| //umbrella top | |
| context.beginPath(); | |
| context.arc(umbrella.top.x, umbrella.top.y, umbrella.top.r, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
| context.strokeStyle ="#f6f6f6"; | |
| context.lineWidth = umbrella.handle.width; | |
| context.stroke(); | |
| //context.fillStyle="#f6f6f6"; | |
| //context.fill(); | |
| context.closePath(); | |
| //wavy bottom of umbrella | |
| context.beginPath(); | |
| context.lineWidth = umbrella.handle.width; | |
| context.arc(umbrella.top.x - 5*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
| context.arc(umbrella.top.x - 3*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
| context.arc(umbrella.top.x - umbrella.top.r/6, umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
| context.arc(umbrella.top.x + umbrella.top.r/6, umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
| context.arc(umbrella.top.x + 3*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
| context.arc(umbrella.top.x + 5*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
| context.strokeStyle ="#f6f6f6"; | |
| context.lineWidth = umbrella.handle.width; | |
| context.stroke(); | |
| //context.fillStyle="#e74c3c"; | |
| //context.fill(); | |
| context.closePath(); | |
| //umbrella handle | |
| context.beginPath(); | |
| context.arc(umbrella.top.x - umbrella.top.r/6, umbrella.top.y + umbrella.handle.height, umbrella.top.r/6, umbrella.top.eAngle, umbrella.top.sAngle, false); | |
| context.moveTo(umbrella.top.x, umbrella.top.y); | |
| context.lineTo(umbrella.top.x, umbrella.top.y + umbrella.handle.height); | |
| context.strokeStyle ="#f6f6f6"; | |
| context.lineWidth = umbrella.handle.width; | |
| context.stroke(); | |
| context.closePath(); | |
| } | |
| function writeMessage(canvas, message) { | |
| context.clearRect(0, 0, 100, 40); | |
| context.font = '18pt Calibri'; | |
| context.fillStyle = 'black'; | |
| context.fillText(message, 10, 25); | |
| } | |
| function getMousePos(canvas, evt) { | |
| var rect = canvas.getBoundingClientRect(); | |
| return { | |
| x: evt.clientX - rect.left, | |
| y: evt.clientY - rect.top | |
| }; | |
| } | |
| function reset() { | |
| canvas.width = canvas.width; | |
| } | |
| function update() { | |
| writeMessage(canvas, message); | |
| draw_umbrella(); | |
| if(Math.pow((mousePos.x - umbrella.top.x),2) + Math.pow(mousePos.y - umbrella.top.y, 2) < Math.pow(umbrella.top.r,2) ) { | |
| //console.log("INSIDE: " + Math.pow((mousePos.x - umbrella.top.x),2) + " " + Math.pow(mousePos.y - umbrella.top.y, 2) + " r^2: " + Math.pow(umbrella.top.r,2)); | |
| //console.log("Mousedown: " + isMouseDown + " mousemove: " + isMouseMove); | |
| if(isMouseDown & isMouseMove) { | |
| //console.log("Mousedown: " + isMouseDown + " mousemove: " + isMouseMove); | |
| umbrella.top.x = mousePos.x; | |
| umbrella.top.y = mousePos.y; | |
| }} | |
| } | |
| setInterval(function() { | |
| reset(); | |
| update(); | |
| }, 16); | |
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 { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0 auto; | |
| background-color: #e74c3c; | |
| } | |
| canvas { | |
| height: auto; | |
| width:auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment