Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

modified: js/4s0phia/happy_birthday_2012.js

  • Loading branch information...
commit 3d0f409be2661d68bfb98b67d8cb8b86190bcc70 1 parent c07291f
Solomon Ng authored
Showing with 49 additions and 13 deletions.
  1. +49 −13 js/4s0phia/happy_birthday_2012.js
62 js/4s0phia/happy_birthday_2012.js
View
@@ -13,7 +13,8 @@ var movePen=eval(Jscex.compile(
context.beginPath();
context.moveTo(pos.x, pos.y);
var x=startPos.x+(endPos.x-startPos.x)*i/duration;
- var y=startPos.y+(endPos.y-startPos.y)*i/duration;
+ //var y=startPos.y+(endPos.y-startPos.y)*i/duration;
+ var y=0.05*x*x-8*x-1000;
context.lineTo(x, y);
context.closePath();
context.stroke();
@@ -22,6 +23,25 @@ var movePen=eval(Jscex.compile(
}
}));
+var moveBrush=eval(Jscex.compile(
+ 'async',
+ function(startPos, endPos, func, duration)
+ {
+ var d=5;
+ for (var i=0; i<duration; i+=d)
+ {
+ context.beginPath();
+ var x=startPos.x+(endPos.x-startPos.x)*i/duration;
+ //var y=startPos.y+(endPos.y-startPos.y)*i/duration;
+ //var y=0.05*x*x-10*x-800;
+ var y=func(x);
+ context.arc(x, y, 3, 0, 2*Math.PI);
+ context.closePath();
+ context.fill();
+ $await(Jscex.Async.sleep(d));
+ }
+ }));
+
$(function()
{
layers=new sLayer({
@@ -40,19 +60,24 @@ $(function()
context.shadowColor='rgba(0, 0, 0, .5)';
context.lineWidth=2;
- context.beginPath();
- context.moveTo(100, 300);
- context.arc(200, 200, 20, 0.2*Math.PI, 2*Math.PI);
- //context.quadraticCurveTo(200, 200, 400, 300);
- //context.bezierCurveTo(200, 340, 300, 200, 400, 300);
- context.stroke();
+// context.beginPath();
+// context.moveTo(100, 300);
+// context.arc(200, 200, 20, 0.2*Math.PI, 2*Math.PI);
+// context.quadraticCurveTo(200, 200, 400, 300);
+// context.bezierCurveTo(200, 340, 300, 200, 400, 300);
+// context.closePath();
+// context.stroke();
- console.log('hi');
-
- movePen({x:0, y:0}, {x:400, y:400}, 1000).start();
- movePen({x:0, y:0}, {x:100, y:600}, 1000).start();
+ context.rotate(0.25*Math.PI);
+ context.translate(400, 1000);
+ moveBrush({x:0, y:0}, {x:400, y:0},
+ function(x)
+ {
+ return 0.05*x*x-10*x-800;
+ }, 2000).start();
+ //moveBrush({x:100, y:50}, {x:300, y:600}, 1000).start();
- canvas.onclick=function(e)
+ /*canvas.onclick=function(e)
{
if (hitpath(context, e))
{
@@ -62,5 +87,16 @@ $(function()
{
alert('not hit');
}
- }
+ }*/
});
+
+function hitpath(context, event)
+{
+ var canvas=context.canvas;
+ var b=canvas.getBoundingClientRect();
+
+ var x=(event.clientX-b.left)*(canvas.width/b.width);
+ var y=(event.clientY-b.top)*(canvas.height/b.height);
+
+ return context.isPointInPath(x, y);
+}
Please sign in to comment.
Something went wrong with that request. Please try again.