Skip to content

Commit 85cfe7a

Browse files
davidevignozzidavidevignozzi
committed
🚚 Galaxy generator (vite)
1 parent 5abbd51 commit 85cfe7a

File tree

15 files changed

+91
-46
lines changed

15 files changed

+91
-46
lines changed

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>18 - Particles</title>
6+
<title>19 - Galaxy Generator</title>
77
<link rel="stylesheet" href="./style.css">
88
</head>
99
<body>

‎src/script.js‎

Lines changed: 90 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,50 +15,103 @@ const canvas = document.querySelector('canvas.webgl')
1515
const scene = new THREE.Scene()
1616

1717
/**
18-
* Textures
18+
* Galaxy
1919
*/
20-
const textureLoader = new THREE.TextureLoader()
21-
const particleTexture = textureLoader.load('/textures/particles/1.png')
22-
23-
/**
24-
* Particles
25-
*/
26-
// Geometry
27-
const particlesGeometry = new THREE.BufferGeometry()
28-
const count = 50000
29-
30-
const positions = new Float32Array(count * 3)
31-
const colors = new Float32Array(count * 3)
32-
33-
for(let i = 0; i < count * 3; i++)
20+
const parameters = {}
21+
parameters.count = 100000
22+
parameters.size = 0.01
23+
parameters.radius = 5
24+
parameters.branches = 3
25+
parameters.spin = 1
26+
parameters.randomness = 0.2
27+
parameters.randomnessPower = 3
28+
parameters.insideColor = '#ff6030'
29+
parameters.outsideColor = '#1b3984'
30+
31+
let geometry = null
32+
let material = null
33+
let points = null
34+
35+
const generateGalaxy = () =>
3436
{
35-
positions[i] = (Math.random() - 0.5) * 10
36-
colors[i] = Math.random()
37-
}
37+
// Destroy old galaxy
38+
if(points !== null)
39+
{
40+
geometry.dispose()
41+
material.dispose()
42+
scene.remove(points)
43+
}
3844

39-
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
40-
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
45+
/**
46+
* Geometry
47+
*/
48+
geometry = new THREE.BufferGeometry()
4149

42-
// Material
43-
const particlesMaterial = new THREE.PointsMaterial()
50+
const positions = new Float32Array(parameters.count * 3)
51+
const colors = new Float32Array(parameters.count * 3)
4452

45-
particlesMaterial.size = 0.1
46-
particlesMaterial.sizeAttenuation = true
53+
const colorInside = new THREE.Color(parameters.insideColor)
54+
const colorOutside = new THREE.Color(parameters.outsideColor)
4755

48-
particlesMaterial.color = new THREE.Color('#ff88cc')
56+
for(let i = 0; i < parameters.count; i++)
57+
{
58+
// Position
59+
const i3 = i * 3
60+
61+
const radius = Math.random() * parameters.radius
62+
63+
const spinAngle = radius * parameters.spin
64+
const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2
65+
66+
const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
67+
const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
68+
const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
69+
70+
positions[i3 ] = Math.cos(branchAngle + spinAngle) * radius + randomX
71+
positions[i3 + 1] = randomY
72+
positions[i3 + 2] = Math.sin(branchAngle + spinAngle) * radius + randomZ
73+
74+
// Color
75+
const mixedColor = colorInside.clone()
76+
mixedColor.lerp(colorOutside, radius / parameters.radius)
77+
78+
colors[i3 ] = mixedColor.r
79+
colors[i3 + 1] = mixedColor.g
80+
colors[i3 + 2] = mixedColor.b
81+
}
4982

50-
particlesMaterial.transparent = true
51-
particlesMaterial.alphaMap = particleTexture
52-
// particlesMaterial.alphaTest = 0.01
53-
// particlesMaterial.depthTest = false
54-
particlesMaterial.depthWrite = false
55-
particlesMaterial.blending = THREE.AdditiveBlending
83+
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
84+
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
85+
86+
/**
87+
* Material
88+
*/
89+
material = new THREE.PointsMaterial({
90+
size: parameters.size,
91+
sizeAttenuation: true,
92+
depthWrite: false,
93+
blending: THREE.AdditiveBlending,
94+
vertexColors: true
95+
})
96+
97+
/**
98+
* Points
99+
*/
100+
points = new THREE.Points(geometry, material)
101+
scene.add(points)
102+
}
56103

57-
particlesMaterial.vertexColors = true
104+
gui.add(parameters, 'count').min(100).max(1000000).step(100).onFinishChange(generateGalaxy)
105+
gui.add(parameters, 'size').min(0.001).max(0.1).step(0.001).onFinishChange(generateGalaxy)
106+
gui.add(parameters, 'radius').min(0.01).max(20).step(0.01).onFinishChange(generateGalaxy)
107+
gui.add(parameters, 'branches').min(2).max(20).step(1).onFinishChange(generateGalaxy)
108+
gui.add(parameters, 'spin').min(- 5).max(5).step(0.001).onFinishChange(generateGalaxy)
109+
gui.add(parameters, 'randomness').min(0).max(2).step(0.001).onFinishChange(generateGalaxy)
110+
gui.add(parameters, 'randomnessPower').min(1).max(10).step(0.001).onFinishChange(generateGalaxy)
111+
gui.addColor(parameters, 'insideColor').onFinishChange(generateGalaxy)
112+
gui.addColor(parameters, 'outsideColor').onFinishChange(generateGalaxy)
58113

59-
// Points
60-
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
61-
scene.add(particles)
114+
generateGalaxy()
62115

63116
/**
64117
* Sizes
@@ -88,6 +141,8 @@ window.addEventListener('resize', () =>
88141
*/
89142
// Base camera
90143
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
144+
camera.position.x = 3
145+
camera.position.y = 3
91146
camera.position.z = 3
92147
scene.add(camera)
93148

@@ -113,16 +168,6 @@ const tick = () =>
113168
{
114169
const elapsedTime = clock.getElapsedTime()
115170

116-
// Update particles
117-
for(let i = 0; i < count; i++)
118-
{
119-
let i3 = i * 3
120-
121-
const x = particlesGeometry.attributes.position.array[i3]
122-
particlesGeometry.attributes.position.array[i3 + 1] = Math.sin(elapsedTime + x)
123-
}
124-
particlesGeometry.attributes.position.needsUpdate = true
125-
126171
// Update controls
127172
controls.update()
128173

‎static/textures/particles/1.png‎

-748 Bytes
Binary file not shown.

‎static/textures/particles/10.png‎

-513 Bytes
Binary file not shown.

‎static/textures/particles/11.png‎

-432 Bytes
Binary file not shown.

‎static/textures/particles/12.png‎

-537 Bytes
Binary file not shown.

‎static/textures/particles/13.png‎

-544 Bytes
Binary file not shown.

‎static/textures/particles/2.png‎

-983 Bytes
Binary file not shown.

‎static/textures/particles/3.png‎

-1.35 KB
Binary file not shown.

‎static/textures/particles/4.png‎

-529 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)