-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
143 lines (117 loc) · 3.94 KB
/
index.html
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.js"></script>
<script src="liquidfun.js"></script>
</head>
<body>
<script type="text/paperscript" canvas="canvas-1">
world = null;
function createElasticParticles() {
var gravity = new b2Vec2(0, -10);
world = new b2World(gravity);
var bd = new b2BodyDef();
var ground = world.CreateBody(bd);
bd.type = b2_dynamicBody;
bd.allowSleep = false;
bd.position.Set(0, 1);
var body = world.CreateBody(bd);
var b1 = new b2PolygonShape();
b1.SetAsBoxXYCenterAngle(0.05, 1, new b2Vec2(1, 0), 0);
body.CreateFixtureFromShape(b1, 5);
var b2 = new b2PolygonShape();
b2.SetAsBoxXYCenterAngle(0.05, 1, new b2Vec2(-1, 0), 0);
body.CreateFixtureFromShape(b2, 5);
var b3 = new b2PolygonShape();
b3.SetAsBoxXYCenterAngle(2, 0.05, new b2Vec2(0, 1), 0);
body.CreateFixtureFromShape(b3, 5);
var b4 = new b2PolygonShape();
b4.SetAsBoxXYCenterAngle(2, 0.05, new b2Vec2(0, -1), 0);
body.CreateFixtureFromShape(b4, 5);
var jd = new b2RevoluteJointDef();
//jd.motorSpeed = 0.05 * Math.PI;
jd.maxMotorTorque = 1e7;
jd.enableMotor = true;
this.joint = jd.InitializeAndCreate(ground, body, new b2Vec2(0, 1));
this.time = 0;
// setup particles
var psd = new b2ParticleSystemDef();
psd.radius = 0.04;
psd.dampingStrength = 0.2;
var particleSystem = world.CreateParticleSystem(psd);
var box = new b2PolygonShape();
box.SetAsBoxXYCenterAngle(0.9, 0.9, new b2Vec2(0, 1.0), 0);
var particleGroupDef = new b2ParticleGroupDef();
particleGroupDef.shape = box;
particleGroupDef.flags = b2_elasticParticle;
var particleGroup = particleSystem.CreateParticleGroup(particleGroupDef);
setRasterColors(particleSystem, raster);
}
function setRasterColors(particleSystem, raster) {
var color = particleSystem.GetColorBuffer();
var width = raster.width;
var height = raster.height;
var ww = width / 31
var hh = height / 30
var c = 0;
for (var y = 0; y < 30; ++y) {
for (var x = 0; x < 31; ++x) {
var rect = new Rectangle(x * ww - width/2, height/2 - hh - y * hh, ww, hh);
var col = raster.getAverageColor(rect);
if (col) {
color[c] = col.red * 255;
color[c+1] = col.green * 255;
color[c+2] = col.blue * 255;
} else {
color[c] = 240;
color[c+1] = 240;
color[c+2] = 200;
}
c += 4;
}
}
createCirclePaths(particleSystem);
}
var raster = new Raster('gopher.png');
raster.visible = false;
raster.on('load', function() {
createElasticParticles(raster)
});
var circlePaths = [];
function createCirclePaths(system) {
var particles = system.GetPositionBuffer();
var color = system.GetColorBuffer();
var maxParticles = particles.length
for (var i = 0, c = 0, n = 0; i < maxParticles; i += 2, c += 4, ++n) {
var circle = new Path.Circle({
radius: system.radius * 150,
fillColor: new Color(color[c] / 255, color[c+1] / 255, color[c+2] / 255)
});
circlePaths.push(circle);
}
}
function drawParticleSystem(system) {
var particles = system.GetPositionBuffer();
var maxParticles = particles.length
for (var i = 0, c = 0, n = 0; i < maxParticles; i += 2, c += 4, ++n) {
circlePaths[n].position.x = particles[i] * 200 + 400;
circlePaths[n].position.y = - particles[i+1] * 200 + 400;
}
}
function onFrame(event) {
if (!world) return;
var timeStep = 1.0 / 60.0;
var velocityIterations = 8;
var positionIterations = 3;
world.Step(timeStep, velocityIterations, positionIterations);
for (var i = 0, max = world.particleSystems.length; i < max; i++) {
drawParticleSystem(world.particleSystems[i]);
}
}
</script>
<div class="canvas">
<canvas resize="true" id="canvas-1" style="background:#f2f2f2"></canvas>
</div>
</body>
</html>