-
Notifications
You must be signed in to change notification settings - Fork 64
Expand file tree
/
Copy pathspace.add.js
More file actions
74 lines (54 loc) · 2.03 KB
/
space.add.js
File metadata and controls
74 lines (54 loc) · 2.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//// 0. Describe this demo
window.demoDescription = "A very simple demo of Pt's main concepts: extending Pt classes, drawing with Form, and animating in Space.";
//// 1. Define Space and Form
var colors = {
a1: "#ff2d5d", a2: "#42dc8e", a3: "#2e43eb", a4: "#ffe359",
b1: "#96bfed", b2: "#f5ead6", b3: "#f1f3f7", b4: "#e2e6ef",
c1: "#111", c2: "#567", c3: "#abc", c4: "rgba(255,255,255,.9)"
};
var space = new CanvasSpace("pt").setup( {bgcolor: colors.b2} );
var form = new Form( space );
form.stroke( false );
//// 2. Create Elements
// A Dust is a kind of Vector
function Dust() {
Vector.apply( this, arguments ); // call Vector's constructor
this.age = 0;
this.maxAge = Math.random() * 500 + 50;
this.weight = 0.25 + Math.random()*3;
this.color = (this.weight > 0.7) ? colors["a"+Math.ceil(Math.random()*4)] : "#000";
}
Util.extend( Dust, Vector ); // extends Vector class
// define an animate function so it can be animated when added into Space
Dust.prototype.animate = function(time, fps, context) {
// drift movement
this.add( rand(1), (Math.random() - Math.random()*(1-this.weight/1.5)) );
// remove when done
if (this.age++ > this.maxAge) space.remove(this);
// glitter
var gray = (this.maxAge-this.age)/this.maxAge * 0.4;
gray = Math.max(0, Math.min( 0.6, (Math.random() > 0.5) ? gray + 0.05 : gray - 0.05 ) );
// draw dust
form.fill( Util.toRGBColor( this.color, true, gray ) );
form.point( this, this.weight, true );
};
// a helper function for randomness
function rand(r) { return Math.random() * r - Math.random() * r; }
//// 3. Visualize, Animate, Interact
space.add({
animate: function(time, fps, context) {},
onMouseAction: function(type, x, y, evt) {
// When mouse moved, add two dust into space
if (type=="move") {
space.add( new Dust( x+rand(5), y+rand(5) ) );
space.add( new Dust( x+rand(5), y+rand(5) ) );
}
},
onTouchAction: function(type, x, y, evt) {
this.onMouseAction( type, x, y );
}
});
// 4. Start playing
space.bindMouse();
space.bindTouch();
space.play();