8000 more work on point · sudhircw/pyscript@6d1888d · GitHub
[go: up one dir, main page]
Skip to content
/ pyscript Public
forked from pyscript/pyscript

Commit 6d1888d

Browse files
verhulstmverhulstm
committed
more work on point
1 parent 518471b commit 6d1888d

File tree

2 files changed

+325
-0
lines changed

2 files changed

+325
-0
lines changed

‎pyscriptjs/examples/webgl/points/index.html

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title></title>
5+
<link type="text/css" rel="stylesheet" href="/webgl/points/main.css">
6+
<script type="text/javascript" src="/webgl/points/js/three.min.js" ></script>
7+
8+
</head>
9+
<body>
10+
11+
<div id="container"></div>
12+
13+
<script defer src="/build/pyscript.js"></script>
14+
<link rel="stylesheet" href="/build/pyscript.css" />
15+
<script>
16+
var group;
17+
var container;
18+
var particlesData = [];
19+
var camera, scene, renderer, obc;
20+
var positions, colors;
21+
var particles;
22+
var pointCloud;
23+
var particlePositions;
24+
var linesMesh;
25+
26+
var maxParticleCount = 1000;
27+
var particleCount = 500;
28+
var r = 800;
29+
var rHalf = r / 2;
30+
31+
var effectController = {
32+
showDots: true,
33+
showLines: true,
34+
minDistance: 150,
35+
limitConnections: false,
36+
maxConnections: 20,
37+
particleCount: 500
38+
};
39+
40+
function init() {
41+
container = document.getElementById( 'container' );
42+
43+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
44+
camera.position.z = 1750;
45+
46+
//obc = new THREE.OrbitControls();
47+
48+
scene = new THREE.Scene();
49+
50+
51+
group = new THREE.Group();
52+
scene.add( group );
53+
54+
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxGeometry( r, r, r ) ) );
55+
helper.material.color.setHex( 0x101010 );
56+
helper.material.blending = THREE.AdditiveBlending;
57+
helper.material.transparent = true;
58+
group.add( helper );
59+
60+
var segments = maxParticleCount * maxParticleCount;
61+
62+
positions = new Float32Array( segments * 3 );
63+
colors = new Float32Array( segments * 3 );
64+
65+
var pMaterial = new THREE.PointsMaterial( {
66+
color: 0xFFFFFF,
67+
size: 3,
68+
blending: THREE.AdditiveBlending,
69+
transparent: true,
70+
sizeAttenuation: false
71+
} );
72+
73+
particles = new THREE.BufferGeometry();
74+
particlePositions = new Float32Array( maxParticleCount * 3 );
75+
76+
for ( let i = 0; i < maxParticleCount; i ++ ) {
77+
78+
var x = Math.random() * r - r / 2;
79+
var y = Math.random() * r - r / 2;
80+
var z = Math.random() * r - r / 2;
81+
82+
particlePositions[ i * 3 ] = x;
83+
particlePositions[ i * 3 + 1 ] = y;
84+
particlePositions[ i * 3 + 2 ] = z;
85+
86+
87+
particlesData.push( {
88+
velocity: new THREE.Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
89+
numConnections: 0
90+
} );
91+
92+
}
93+
94+
particles.setDrawRange( 0, particleCount );
95+
particles.setAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setUsage( THREE.DynamicDrawUsage ) );
96+
97+
98+
pointCloud = new THREE.Points( particles, pMaterial );
99+
group.add( pointCloud );
100+
101+
var geometry = new THREE.BufferGeometry();
102+
103+
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setUsage( THREE.DynamicDrawUsage ) );
104+
geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setUsage( THREE.DynamicDrawUsage ) );
105+
106+
geometry.computeBoundingSphere();
107+
108+
geometry.setDrawRange( 0, 0 );
109+
110+
var material = new THREE.LineBasicMaterial( {
111+
vertexColors: true,
112+
blending: THREE.AdditiveBlending,
113+
transparent: true
114+
} );
115+
116+
linesMesh = new THREE.LineSegments( geometry, material );
117+
group.add( linesMesh );
118+
119+
renderer = new THREE.WebGLRenderer( { antialias: true } );
120+
renderer.setPixelRatio( window.devicePixelRatio );
121+
renderer.setSize( window.innerWidth, window.innerHeight );
122+
renderer.outputEncoding = THREE.sRGBEncoding;
123+
124+
container.appendChild( renderer.domElement );
125+
}
126+
127+
function animate() {
128+
129+
let vertexpos = 0;
130+
let colorpos = 0;
131+
let numConnected = 0;
132+
133+
for ( let i = 0; i < particleCount; i ++ )
134+
particlesData[ i ].numConnections = 0;
135+
136+
for ( let i = 0; i < particleCount; i ++ ) {
137+
138+
var particleData = particlesData[ i ];
139+
140+
particlePositions[ i * 3 ] += particleData.velocity.x;
141+
particlePositions[ i * 3 + 1 ] += particleData.velocity.y;
142+
particlePositions[ i * 3 + 2 ] += particleData.velocity.z;
143+
144+
if ( particlePositions[ i * 3 + 1 ] < - rHalf || particlePositions[ i * 3 + 1 ] > rHalf )
145+
particleData.velocity.y = - particleData.velocity.y;
146+
147+
if ( particlePositions[ i * 3 ] < - rHalf || particlePositions[ i * 3 ] > rHalf )
148+
particleData.velocity.x = - particleData.velocity.x;
149+
150+
if ( particlePositions[ i * 3 + 2 ] < - rHalf || particlePositions[ i * 3 + 2 ] > rHalf )
151+
particleData.velocity.z = - particleData.velocity.z;
152+
153+
if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections )
154+
continue;
155+
156+
157+
for ( let j = i + 1; j < particleCount; j ++ ) {
158+
159+
var particleDataB = particlesData[ j ];
160+
if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
161+
continue;
162+
163+
var dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ];
164+
var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
165+
var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
166+
var dist = Math.sqrt( dx * dx + dy * dy + dz * < 10BC0 span class=pl-s1>dz );
167+
168+
if ( dist < effectController.minDistance ) {
169+
170+
particleData.numConnections ++;
171+
particleDataB.numConnections ++;
172+
173+
var alpha = 1.0 - dist / effectController.minDistance;
174+
175+
positions[ vertexpos ++ ] = particlePositions[ i * 3 ];
176+
positions[ vertexpos ++ ] = particlePositions[ i * 3 + 1 ];
177+
positions[ vertexpos ++ ] = particlePositions[ i * 3 + 2 ];
178+
179+
positions[ vertexpos ++ ] = particlePositions[ j * 3 ];
180+
positions[ vertexpos ++ ] = particlePositions[ j * 3 + 1 ];
181+
positions[ vertexpos ++ ] = particlePositions[ j * 3 + 2 ];
182+
183+
colors[ colorpos ++ ] = alpha;
184+
colors[ colorpos ++ ] = alpha;
185+
colors[ colorpos ++ ] = alpha;
186+
187+
colors[ colorpos ++ ] = alpha;
188+
colors[ colorpos ++ ] = alpha;
189+
colors[ colorpos ++ ] = alpha;
190+
191+
numConnected ++;
192+
193+
}
194+
195+
}
196+
197+
}
198+
199+
200+
linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
201+
linesMesh.geometry.attributes.position.needsUpdate = true;
202+
linesMesh.geometry.attributes.color.needsUpdate = true;
203+
204+
pointCloud.geometry.attributes.position.needsUpdate = true;
205+
206+
requestAnimationFrame( animate );
207+
render();
208+
209+
}
210+
211+
function render() {
212+
213+
var time = Date.now() * 0.001;
214+
215+
group.rotation.y = time * 0.5;
216+
renderer.render( scene, camera );
217+
218+
}
219+
220+
init();
221+
animate();
222+
</script>
223+
<py-script>
224+
from pyodide import create_proxy, to_js
225+
from js import window
226+
from js import Math
227+
from js import THREE
228+
from js import performance
229+
from pyodide import to_js
230+
from js import Object, Float32Array
231+
232+
</py-script>
233+
</body>
234+
</html>

‎pyscriptjs/examples/webgl/points/main.css

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
body {
2+
margin: 0;
3+
background-color: #000;
4+
color: #fff;
5+
font-family: Monospace;
6+
font-size: 13px;
7+
line-height: 24px;
8+
overscroll-behavior: none;
9+
}
10+
11+
a {
12+
color: #ff0;
13+
text-decoration: none;
14+
}
15+
16+
a:hover {
17+
text-decoration: underline;
18+
}
19+
20+
button {
21+
cursor: pointer;
22+
text-transform: uppercase;
23+
}
24+
25+
#info {
26+
position: absolute;
27+
top: 0px;
28+
width: 100%;
29+
padding: 10px;
30+
box-sizing: border-box;
31+
text-align: center;
32+
-moz-user-select: none;
33+
-webkit-user-select: none;
34+
-ms-user-select: none;
35+
user-select: none;
36+
pointer-events: none;
37+
z-index: 1; /* TODO Solve this in HTML */
38+
}
39+
40+
a, button, input, select {
41+
pointer-events: auto;
42+
}
43+
44+
.lil-gui {
45+
z-index: 2 !important; /* TODO Solve this in HTML */
46+
}
47+
48+
@media all and ( max-width: 640px ) {
49+
.lil-gui.root {
50+
right: auto;
51+
top: auto;
52+
max-height: 50%;
53+
max-width: 80%;
54+
bottom: 0;
55+
left: 0;
56+
}
57+
}
58+
59+
#overlay {
60+
position: absolute;
61+
font-size: 16px;
62+
z-index: 2;
63+
top: 0;
64+
left: 0;
65+
width: 100%;
66+
height: 100%;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
flex-direction: column;
71+
background: rgba(0,0,0,0.7);
72+
}
73+
74+
#overlay button {
75+
background: transparent;
76+
border: 0;
77+
border: 1px solid rgb(255, 255, 255);
78+
border-radius: 4px;
79+
color: #ffffff;
80+
padding: 12px 18px;
81+
text-transform: uppercase;
82+
cursor: pointer;
83+
}
84+
85+
#notSupported {
86+
width: 50%;
87+
margin: auto;
88+
background-color: #f00;
89+
margin-top: 20px;
90+
padding: 10px;
91+
}

0 commit comments

Comments
 (0)
0