Experiments with Two.js: Getting started
Write in comments if getting stuck in running below example.
Lets go step by step.
1. var type defines type of content delivered by the two.js drawing as per request / automatic detection using url.js javascript.
var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
var two = new Two({
type: Two.Types[type],
fullscreen: true,
autostart: true
}).appendTo(document.body);
This defines type of the drawing i.e. canvas/webgl. fullscreen behaviour, autostart options and many more things as described here. The last line "appendTo()" decides where our two.js drawing will be rendered. Here, we have taken webpage's body directly to render two.js drawing.
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Two.js: Rubber Ball</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="image_src" href="http://jonobr1.github.io/two.js/images/logo.gif">
<script src="jquery.js"></script>
<script src="two.js"></script>
<script src="url.js"></script>
<style>
* { margin: 0; padding: 0; cursor: none; }
body { background: #fcb215; }
</style>
</head>
<body style="overflow: hidden; margin: 0px; padding: 0px; top: 0px; left: 0px; right: 0px; bottom: 0px; position: fixed;">
<div class="scripts">
<script>
var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
var two = new Two({
type: Two.Types[type],
fullscreen: true,
autostart: true
}).appendTo(document.body);
Two.Resoultion = 32;
var delta = new Two.Vector();
var mouse = new Two.Vector();
var drag = 0.33;
var radius = 50;
var shadow = two.makeCircle(two.width / 2, two.height / 2, radius);
shadow.noStroke().fill = 'rgba(0, 0, 0, 0.2)';
shadow.offset = new Two.Vector(- radius / 2, radius * 2);
shadow.scale = 0.85;
var ball = two.makeCircle(two.width / 2, two.height / 2, radius);
ball.noStroke().fill = 'white';
_.each(ball.vertices, function(v) {
v.origin = new Two.Vector().copy(v);
});
two.bind('update', function() {
delta.copy(mouse).subSelf(ball.translation);
_.each(ball.vertices, function(v, i) {
var dist = v.origin.distanceTo(delta);
var pct = dist / radius;
var x = delta.x * pct;
var y = delta.y * pct;
var destx = v.origin.x - x;
var desty = v.origin.y - y;
v.x += (destx - v.x) * drag;
v.y += (desty - v.y) * drag;
shadow.vertices[i].copy(v);
});
ball.translation.addSelf(delta);
shadow.translation.copy(ball.translation);
shadow.translation.addSelf(shadow.offset);
});
function moveSensor(){
mouse.x = Math.floor((Math.random() * 1000) + 1);
mouse.y = Math.floor((Math.random() * 600) + 1);
shadow.offset.x = 5 * radius * (mouse.x - two.width / 2) / two.width;
shadow.offset.y = 5 * radius * (mouse.y - two.height / 2) / two.height;
}
var auto_refresh = setInterval("moveSensor()", 1000);
</script>
</div>
</body></html>
Comments
Post a Comment