Skip to content

Commit 893315b

Browse files
author
Francois
committed
Adds BASE workshop presentation
1 parent c1be04d commit 893315b

11 files changed

+9248
-0
lines changed

‎.gitmodules

+3
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,6 @@
3737
[submodule "CMU2020/reveal.js"]
3838
path = CMU2020/reveal.js
3939
url = https://github.com/EiffL/reveal.js.git
40+
[submodule "BASE2020/reveal.js"]
41+
path = BASE2020/reveal.js
42+
url = https://github.com/EiffL/reveal.js.git

‎BASE2020/assets

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../assets

‎BASE2020/flowpm_16.html

+243
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<head>
4+
<title>Massive Black II</title>
5+
<style>
6+
body{
7+
background: black;
8+
font-family: "Open Sans", "Helvetica Neue";
9+
font-weight: 300;
10+
font-size: 12px;
11+
color: white;
12+
}
13+
14+
canvas{
15+
position: fixed;
16+
left: 0px;
17+
right: 0px;
18+
top: 0px;
19+
bottom: 0px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="nbody"></div>
25+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
26+
<script src="reveal.js/js/three.min.js"></script>
27+
<script src="reveal.js/js/d3.v3.min.js"></script>
28+
<script src="npy.js"></script>
29+
<script>
30+
31+
var pointGeo = new THREE.Geometry();
32+
var image = document.createElement('img');
33+
var texture = new THREE.Texture('image');
34+
35+
var mat = new THREE.PointCloudMaterial({
36+
vertexColors: true,
37+
size: 5,
38+
color: 0xffffff,
39+
map: THREE.ImageUtils.loadTexture('assets/med-stars.png'),
40+
transparent: true,
41+
side: THREE.DoubleSide,
42+
depthTest: false
43+
});
44+
45+
var scale = d3.scale.linear()
46+
.domain([0,16])
47+
.range([-20,20]);
48+
49+
window.ready_to_update = false;
50+
var points = new THREE.PointCloud(pointGeo, mat);
51+
var pointCount = 16**3;
52+
var frameRate = 30; // ms per timestep (yeah I know it's not really a rate)
53+
54+
renderer = new THREE.WebGLRenderer({ antialias: true });
55+
renderer.setSize(window.innerWidth, window.innerHeight);
56+
container = document.getElementById( 'nbody' );
57+
document.body.appendChild( container );
58+
container.appendChild(renderer.domElement);
59+
60+
// renderer.setSize(window.innerWidth, window.innerHeight);
61+
// document.body.appendChild(renderer.domElement);
62+
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
63+
camera.position.set(0, 0, 75);
64+
camera.lookAt(new THREE.Vector3(0, 0, 0));
65+
scene = new THREE.Scene();
66+
67+
function loadParticles(data){
68+
pointGeo.dispose();
69+
pointGeo.vertices = [];
70+
for (var i = 0; i < pointCount; i ++) {
71+
var x = scale(data[i*3]);
72+
var y = scale(data[i*3+1]);
73+
var z = scale(data[i*3+2]);
74+
pointGeo.vertices.push(new THREE.Vector3(x, y, z));
75+
var color = new THREE.Color(0xffffff);
76+
pointGeo.colors.push(color);
77+
}
78+
scene.add(points);
79+
}
80+
81+
// Load particles from data
82+
let n1 = new npyjs();
83+
n1.load('assets/state_01_16.npy', (array) => {
84+
window.X = array.data.slice(0,3*pointCount)
85+
window.P = array.data.slice(3*pointCount,6*pointCount)
86+
window.F = array.data.slice(6*pointCount)
87+
loadParticles(window.X)
88+
console.log(`You loaded an array with ${array.length} elements and ${array.shape.length} dimensions.`);
89+
});
90+
91+
let n2 = new npyjs();
92+
n2.load('assets/kernels_real_16.npy', (array) => {
93+
window.k_real = array.data
94+
console.log(`You loaded an array with ${array.length} elements and ${array.shape.length} dimensions.`);
95+
});
96+
let n3 = new npyjs();
97+
n3.load('assets/kernels_imag_16.npy', (array) => {
98+
window.k_imag = array.data
99+
console.log(`You loaded an array with ${array.length} elements and ${array.shape.length} dimensions.`);
100+
});
101+
let n4 = new npyjs();
102+
n4.load('assets/factors_16.npy', (array) => {
103+
window.factors = array.data
104+
console.log(`You loaded an array with ${array.length} elements and ${array.shape.length} dimensions.`);
105+
});
106+
window.counter=0
107+
108+
var onupdate = async function(){
109+
window.ready_to_update = false;
110+
console.log('executing worker', window.counter);
111+
if (!window.model) {
112+
window.model = await tf.loadGraphModel('assets/web_model26_16/model.json');
113+
window.step_nbody = (x, p, f, fact, kr, ki) =>{
114+
state = window.model.predict({'X':x, 'P':p, 'F':f,
115+
'factors':fact, 'kernels_real':kr, 'kernels_imag':ki});
116+
return state;};
117+
}
118+
if (window.counter >= 100){
119+
return;
120+
}
121+
122+
const [x, p, f] = tf.tidy(() => {
123+
const xi = tf.tensor(window.X);
124+
const pi = tf.tensor(window.P);
125+
const fi = tf.tensor(window.F);
126+
const ki = tf.tensor(window.k_imag);
127+
const kr = tf.tensor(window.k_real);
128+
const tf_factor = tf.tensor([window.factors[window.counter*3],
129+
window.factors[window.counter*3+1],
130+
window.factors[window.counter*3+2]]);
131+
return window.step_nbody(xi, pi, fi,tf_factor, ki, kr);
132+
});
133+
134+
x.data().then((value) => {
135+
window.X=value;
136+
window.counter+=1;
137+
window.ready_to_update = true;
138+
if(window.counter < 99){
139+
var positions = pointGeo.vertices.array;
140+
for (var i = 0; i < pointCount; i ++) {
141+
points.geometry.vertices[i].x = scale(window.X[i*3]);
142+
points.geometry.vertices[i].y = scale(window.X[i*3 + 1]);
143+
points.geometry.vertices[i].z = scale(window.X[i*3 + 2]);
144+
}
145+
points.geometry.verticesNeedUpdate = true;
146+
}
147+
});
148+
p.data().then((value) => {window.P=value;});
149+
f.data().then((value) => {window.F=value;});
150+
};
151+
152+
renderer.render(scene, camera);
153+
154+
var paused = false;
155+
var down = false;
156+
var sx = 0,
157+
sy = 0,
158+
sz = 0;
159+
160+
container.onmousedown = function(ev) {
161+
down = true;
162+
sx = ev.clientX;
163+
sy = ev.clientY;
164+
};
165+
container.onmouseup = function() {
166+
down = false;
167+
};
168+
169+
window.onmousemove = function(ev) {
170+
if (down) {
171+
var dx = ev.clientX - sx;
172+
var dy = ev.clientY - sy;
173+
scene.rotation.y += dx * 0.01;
174+
scene.rotation.x += dy * 0.01;
175+
// camera.position.y += dy;
176+
sx += dx;
177+
sy += dy;
178+
}
179+
}
180+
181+
window.addEventListener("touchmove", function(ev){
182+
var dx = ev.clientX - sx;
183+
var dy = ev.clientY - sy;
184+
scene.rotation.y += dx * 0.01;
185+
scene.rotation.x += dy * 0.01;
186+
// camera.position.y += dy;
187+
sx += dx;
188+
sy += dy;
189+
});
190+
191+
window.onmousewheel = function(ev){
192+
var dz = 0;
193+
194+
dz -= event.wheelDeltaY * 0.05;
195+
196+
if (camera.position.z <= 200 && camera.position.z >= 0 ) { camera.position.z -= dz } else{ camera.position.z = 200 };
197+
198+
}
199+
//
200+
// window.onkeypress= function(ev) {
201+
// animating = ! animating;
202+
// }
203+
204+
d3.timer(function () {if (window.ready_to_update) {onupdate();}}, frameRate);
205+
206+
var animating = true;
207+
var speed = 0.1
208+
function animate(t) {
209+
210+
// We run the simulation through
211+
if(animating){
212+
213+
//update_position();
214+
scene.rotation.y += speed * 0.02;
215+
sx += speed;
216+
217+
if (camera.position.z <= 200 && camera.position.z >= 5 )
218+
{ camera.position.z -= 0.1*speed }
219+
else
220+
{ };
221+
222+
}
223+
224+
renderer.clear();
225+
camera.lookAt(scene.position);
226+
renderer.render(scene, camera);
227+
window.requestAnimationFrame(animate);
228+
229+
};
230+
window.requestAnimationFrame(animate);
231+
232+
233+
var _transitions = [
234+
{
235+
transitionForward: () => { window.ready_to_update=true;},
236+
transitionBackward: () => {window.ready_to_update=false; animating = false; },
237+
index: 0
238+
}
239+
]
240+
241+
</script>
242+
243+
</body>

0 commit comments

Comments
 (0)