PCC/sketch.js at main · SyedTahaAbbas/PCC · GitHub

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
import { UPDATE_VERT, UPDATE_FRAG } from "./shader.js"
import { RENDER_VERT, RENDER_FRAG } from "./shader.js"
import Olon, { Data } from "./olon.js"
import { random, floor, min } from "./tool.js"

const MAX_AMOUNT = 500000
const MIN_AGE = 1.5
const MAX_AGE = 2.4
const BIRTH_RATE = 0.5

const ol = Olon(720, 720)
ol.enableCanvas2D()

ol.blend({
	sfactor: ol.SRC_ALPHA,
	dfactor: ol.ONE_MINUS_SRC_ALPHA,
})
ol.enableBlend()

const TFV = ["vPosition", "vAge", "vLife", "vVel"]
const updateProgram = ol.createProgram(UPDATE_VERT, UPDATE_FRAG, TFV)
const renderProgram = ol.createProgram(RENDER_VERT, RENDER_FRAG)

const aPosition = { name: "aPosition", unit: "f32", size: 2 }
const aAge = { name: "aAge", unit: "f32", size: 1 }
const aLife = { name: "aLife", unit: "f32", size: 1 }
const aVel = { name: "aVel", unit: "f32", size: 2 }
const aColor = { name: "aColor", unit: "f32", size: 3 }; // Adding color
const attributes = [aPosition, aAge, aLife, aVel, aColor]

const particleData = []
for (let i = 0; i < MAX_AMOUNT; i++) {
	const life = random(MIN_AGE, MAX_AGE)
	particleData.push(0, 0) // aPosition
	particleData.push(life + 1) // aAge
	particleData.push(life) // aLife
	particleData.push(0, 0) // aVel
	particleData.push(0, 0, 0); // aColor (RGB)
}
const initData = Data(particleData)

const buffer0 = ol.createBuffer(initData, ol.STREAM_DRAW)
const buffer1 = ol.createBuffer(initData, ol.STREAM_DRAW)

// Update stride calculation to include color
const stride = 4 * (2 + 1 + 1 + 2 + 3);

const vao0 = ol.createVAO(updateProgram, {
	buffer: buffer0,
	stride: 4 * 6,
	attributes,
})
const vao1 = ol.createVAO(updateProgram, {
	buffer: buffer1,
	stride: 4 * 6,
	attributes,
})

const buffers = [buffer0, buffer1]
const vaos = [vao0, vao1]
let [read, write] = [0, 1]
let [lastTime, bornAmount] = [0, 0]

ol.uniform("uRandom", [random() * 1024, random() * 1024])

ol.render(() => {
	const time = ol.frame / 60
	const timeDelta = time - lastTime
	lastTime = time

	const nextAmount = floor(bornAmount + BIRTH_RATE * 1000)
	bornAmount = min(MAX_AMOUNT, nextAmount)

	ol.clearColor(0, 0, 0, 0.25)
	ol.clearDepth()

	// Access mouse coordinates
	const [mouseX, mouseY] = ol.mouse;

	ol.use({ program: updateProgram }).run(() => {
		ol.uniform("uTimeDelta", timeDelta);
		ol.uniform("uTime", time);
		ol.uniform("uMouse", [mouseX, mouseY]); // Pass mouse coordinates to shader

		ol.transformFeedback(vaos[read], buffers[write], ol.POINTS, () => {
		  	ol.points(0, bornAmount);
		});
	});

	ol.use({
		program: renderProgram,
		VAO: vaos[write],
	}).run(() => ol.points(0, bornAmount))

	// swap
	;[read, write] = [write, read]
})