better colors

Sheraff · Sheraff · commit 3300755828e6 · 2025-11-08T19:04:35.000+01:00
diff --git a/src/pages/particle-life-gpu/draw.wgsl b/src/pages/particle-life-gpu/draw.wgsl
@@ -17,13 +17,15 @@ const positions = array<vec2f, 6>(
 	vec2f(-1,  1),
 );
 
-const colors = array<vec4f, 6>(
-	vec4f(1.0, 0.0, 0.0, 1.0), // red
-	vec4f(0.0, 1.0, 0.0, 1.0), // green
-	vec4f(0.5, 0.5, 1.0, 1.0), // blue
-	vec4f(1.0, 1.0, 0.0, 1.0), // yellow
-	vec4f(1.0, 0.0, 1.0, 1.0), // magenta
-	vec4f(0.0, 1.0, 1.0, 1.0), // cyan
+const colors = array<vec4f, 8>(
+	vec4f(0.72, 0.07, 0.02, 1.0), // red
+	vec4f(0.12, 0.67, 0.89, 1.0), // cyan
+	vec4f(0.84, 1.0, 0.19, 1.0), // yellow
+	vec4f(0.53, 0.05, 0.87, 1.0), // indigo
+	vec4f(0.04, 0.56, 0.04, 1.0), // green
+	vec4f(0.56, 0.56, 0.77, 1.0), // lavender
+	vec4f(1.0, 0.65, 0.0, 1.0), // orange
+	vec4f(0.93, 0.51, 0.93, 1.0), // violet
 );
 
 struct VertexOutput {
diff --git a/src/pages/particle-life-gpu/index.tsx b/src/pages/particle-life-gpu/index.tsx
@@ -8,6 +8,10 @@ import drawShader from './draw.wgsl?raw'
 import binShader from './bin-fill.wgsl?raw'
 import updateShader from './update.wgsl?raw'
 
+// const particleCount = 200_000
+const particleCount = 100_000
+// const particleCount = 20_000
+
 export const meta: RouteMeta = {
 	title: 'Particle Life GPU',
 	tags: ['simulation', 'webgpu', 'particles'],
@@ -34,12 +38,14 @@ export default function ParticleLifeGPUPage() {
 			controller.abort()
 		}
 	}, [supported])
+	
+	const [numberFormat] = useState(() => new Intl.NumberFormat('en-US'))
 
 	return (
 		<div className={styles.main}>
 			<div className={styles.head}>
 				<Head />
-				{supported && <pre>{fps} FPS</pre>}
+				{supported && <pre>{numberFormat.format(particleCount)} particles, {fps} fps</pre>}
 				{!supported && <pre>Your browser does not support WebGPU.</pre>}
 			</div>
 			<canvas ref={canvasRef} />
@@ -90,9 +96,8 @@ async function start(
 	const toBinX = widthDivisions / width
 	const toBinY = heightDivisions / height
 	const binCount = widthDivisions * heightDivisions
-	// const particleCount = 200_000
-	const particleCount = 100_000
-	// const particleCount = 20_000
+
+	const numberOfColors = 8
 
 	const particlePositionBuffer = device.createBuffer({
 		label: 'particle position storage buffer',
@@ -118,7 +123,7 @@ async function start(
 	{
 		const staticStorageArray = new Uint32Array(particleColorBuffer.getMappedRange())
 		for (let i = 0; i < particleCount; i++) {
-			staticStorageArray[i] = i % 6
+			staticStorageArray[i] = i % numberOfColors
 		}
 		particleColorBuffer.unmap()
 		onAbort(() => particleColorBuffer.destroy())
@@ -140,16 +145,16 @@ async function start(
 	}
 	const particleInteractionsBuffer = device.createBuffer({
 		label: 'particle interactions storage buffer',
-		size: 6 * 6 * Float32Array.BYTES_PER_ELEMENT,
+		size: numberOfColors * numberOfColors * Float32Array.BYTES_PER_ELEMENT,
 		usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
 		mappedAtCreation: true,
 	})
 	{
 		const staticStorageArray = new Float32Array(particleInteractionsBuffer.getMappedRange())
-		for (let i = 0; i < 6; i++) {
-			for (let j = 0; j < 6; j++) {
-				staticStorageArray[i * 6 + j] = Math.random() * 2 - 1
-				// staticStorageArray[i * 6 + j] = i === j ? 1 : 0
+		for (let i = 0; i < numberOfColors; i++) {
+			for (let j = 0; j < numberOfColors; j++) {
+				staticStorageArray[i * numberOfColors + j] = Math.random() * 2 - 1
+				// staticStorageArray[i * numberOfColors + j] = i === j ? 1 : 0
 			}
 		}
 		particleInteractionsBuffer.unmap()
@@ -612,7 +617,7 @@ async function start(
 		colorAttachments: [
 			{
 				view: null! as GPUTextureView,
-				clearValue: [0.1, 0.1, 0.1, 1],
+				clearValue: [0.06, 0.06, 0.08, 1],
 				loadOp: 'clear',
 				storeOp: 'store',
 			},
