Skip to content

Commit 8ba5d3e

Browse files
lith-xlith-x
committed
add linkedin, some memory optimizations in bg
1 parent 507c744 commit 8ba5d3e

6 files changed

Lines changed: 85 additions & 43 deletions

File tree

‎public/fonts/SUSE-Thin.ttf‎

75.2 KB
Binary file not shown.

public/github-mark-white.svg renamed to public/github-icon.svg

File renamed without changes.

‎public/linkedin-icon.svg‎

Lines changed: 30 additions & 0 deletions
Loading

‎src/pages/index.astro‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import "../styles/global.css";
3-
import githubLogo from "../../public/github-mark-white.svg";
3+
import githubLogo from "../../public/github-icon.svg";
4+
import linkedinLogo from "../../public/linkedin-icon.svg";
45
import { Image } from "astro:assets";
56
---
67

@@ -19,17 +20,26 @@ import { Image } from "astro:assets";
1920
<div
2021
class="pl-[6vw] pt-[8vh] inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(139,92,246,0.25),_transparent_70%)]"
2122
>
22-
<div class="flex">
23-
<a class="self-center" href="https://github.com/lith-x">
24-
<Image
25-
src={githubLogo}
26-
alt="GitHub Profile"
27-
class="gh-logo glow-anim w-12 h-12 mr-4"
28-
/>
29-
</a>
30-
<h1 class="text-7xl glow-anim self-center font-[SUSE] font-thin">
23+
<div class="flex md:flex-row flex-col items-start">
24+
<h1 class="text-7xl glow-anim font-[SUSE] font-thin">
3125
Aaron Zandt
3226
</h1>
27+
<div class="flex justify-center mt-0 flex-row gap-2 md:flex-col md:ml-4">
28+
<a class="" href="https://github.com/lith-x">
29+
<Image
30+
src={githubLogo}
31+
alt="GitHub Profile"
32+
class="glow-anim w-7 h-7"
33+
/>
34+
</a>
35+
<a href="https://github.com/lith-x">
36+
<Image
37+
src={linkedinLogo}
38+
alt="LinkedIn Profile"
39+
class="glow-anim w-7 h-7"
40+
/>
41+
</a>
42+
</div>
3343
</div>
3444
<br />
3545
<div class="max-w-3xl font-[MPLUS1p]">

‎src/styles/global.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ a {
1919

2020
@font-face {
2121
font-family: SUSE;
22-
src: url("/fonts/SUSE-VariableFont_wght.ttf") format("opentype");
23-
font-weight: 100 800;
22+
src: url("/fonts/SUSE-Thin.ttf") format("opentype");
23+
font-weight: 100;
2424
font-style: normal;
2525
font-display: swap;
2626
}

‎src/ts/bg-webgl.ts‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export const main = async () => {
179179
if (points.isNotSpawned(i))
180180
continue;
181181

182-
points.positions[points.activeIdx[i]] += dt * points.signs[i] * points.speeds[i];
182+
points.positions[points.activeIdx[i]] += dt * points.speeds[i];
183183
if (points.isOutOfBounds(i)) {
184184
points.free(i);
185185
continue;
@@ -272,22 +272,19 @@ class CubeInstanceArray {
272272
private data: ArrayBuffer;
273273
public count = 0;
274274
public instanceCenters: Float32Array; // float vec3
275-
public instanceColors: Float32Array; // float vec4
275+
public instanceColors: Float32Array; // float vec3
276276
public instanceSizes: Float32Array; // float
277277

278278
constructor(instanceNum: number, maxCubesPerPosition: number) {
279279
const instances = instanceNum * maxCubesPerPosition;
280280
const vec3Elts = 3 * instances;
281-
const vec4Elts = 4 * instances;
282-
this.data = new ArrayBuffer((vec3Elts + vec4Elts + instances) * Float32Array.BYTES_PER_ELEMENT);
281+
this.data = new ArrayBuffer((vec3Elts * 2 + instances) * Float32Array.BYTES_PER_ELEMENT);
283282

284283
let offset = 0;
285284
this.instanceCenters = new Float32Array(this.data, offset, vec3Elts);
286285
offset += vec3Elts * Float32Array.BYTES_PER_ELEMENT;
287-
288-
this.instanceColors = new Float32Array(this.data, offset, vec4Elts);
289-
offset += vec4Elts * Float32Array.BYTES_PER_ELEMENT;
290-
286+
this.instanceColors = new Float32Array(this.data, offset, vec3Elts);
287+
offset += vec3Elts * Float32Array.BYTES_PER_ELEMENT;
291288
this.instanceSizes = new Float32Array(this.data, offset, instances);
292289
}
293290

@@ -320,7 +317,6 @@ class PointsArray {
320317
public nextFreeOrSpawned: Int32Array; // int32
321318
public activeIdx: Int32Array; // int32
322319
public directions: Int8Array; // char
323-
public signs: Int8Array; // char (signed)
324320

325321
// freelist constants, if name collisions become an issue wrap these in a frozen object
326322
private static readonly HEAD_IDX = 0;
@@ -339,7 +335,7 @@ class PointsArray {
339335
vec3Bytes * 3 + // positions, colors, scales
340336
floatBytes + // speeds
341337
int32Bytes * 2 + // nextFreeOrSpawned, activeIdx
342-
int8Bytes * 2 // directions, signs
338+
int8Bytes // directions
343339
);
344340

345341
let offset = 0;
@@ -356,8 +352,6 @@ class PointsArray {
356352
this.activeIdx = new Int32Array(this.data, offset, poolSize);
357353
offset += int32Bytes;
358354
this.directions = new Int8Array(this.data, offset, poolSize);
359-
offset += int8Bytes;
360-
this.signs = new Int8Array(this.data, offset, poolSize);
361355

362356
// initialize freelist
363357
for (let i = 0; i < poolSize - 1; i++)
@@ -368,36 +362,44 @@ class PointsArray {
368362
}
369363

370364
public spawn() {
371-
if (this.freelist[PointsArray.HEAD_IDX] == PointsArray.LIST_END) return PointsArray.LIST_END;
365+
// pop from freelist, return if none available
366+
if (this.freelist[PointsArray.HEAD_IDX] == PointsArray.LIST_END)
367+
return PointsArray.LIST_END;
368+
372369
const idx = this.freelist[PointsArray.HEAD_IDX];
370+
373371
this.freelist[PointsArray.HEAD_IDX] = this.nextFreeOrSpawned[idx];
374372
if (this.freelist[PointsArray.HEAD_IDX] == PointsArray.LIST_END)
375373
this.freelist[1] = PointsArray.LIST_END;
376374
this.nextFreeOrSpawned[idx] = PointsArray.IS_SPAWNED;
377-
const lerpA = PRNG.nextRange(0, 1);
378-
const lerpB = 1 - lerpA;
379-
const [pr, pg, pb] = getVec3Idx(idx);
380-
this.colors[pr] = (0xC7 / 255) * lerpA + (0x61 / 255) * lerpB;
381-
this.colors[pg] = (0x51 / 255) * lerpA + (0x0C / 255) * lerpB;
382-
this.colors[pb] = (0x08 / 255) * lerpA + (0xCF / 255) * lerpB;
383-
384-
const [bx, by, bz] = getVec3Idx(idx);
375+
376+
// got the next available point, initialize
377+
const lerpVal = PRNG.nextRange(0, 1);
378+
const oneMinusLerpVal = 1 - lerpVal;
379+
const [px, py, pz] = getVec3Idx(idx);
380+
this.colors[px] = (0xC7 / 255) * lerpVal + (0x61 / 255) * oneMinusLerpVal;
381+
this.colors[py] = (0x51 / 255) * lerpVal + (0x0C / 255) * oneMinusLerpVal;
382+
this.colors[pz] = (0x08 / 255) * lerpVal + (0xCF / 255) * oneMinusLerpVal;
383+
385384
this.directions[idx] = 1 << (Math.trunc(Math.random() * Direction.LEN)) as DirVals;
386-
this.signs[idx] = this.directions[idx] & (Direction.PX | Direction.PY | Direction.PZ) ? 1 : -1;
387-
this.activeIdx[idx] = this.directions[idx] & (Direction.PX | Direction.NX) ? bx
388-
: this.directions[idx] & (Direction.PY | Direction.NY) ? by : bz;
385+
this.activeIdx[idx] = this.directions[idx] & (Direction.PX | Direction.NX) ? px
386+
: this.directions[idx] & (Direction.PY | Direction.NY) ? py : pz;
389387

390-
this.speeds[idx] = PRNG.nextRange(Spawn.SPEED.MIN, Spawn.SPEED.MAX);
388+
const sign = this.directions[idx] & (Direction.PX | Direction.PY | Direction.PZ) ? 1 : -1;
389+
this.speeds[idx] = PRNG.nextRange(Spawn.SPEED.MIN, Spawn.SPEED.MAX) * sign;
391390

392391
const pointRadius = PRNG.nextRange(Spawn.RADIUS.MIN, Spawn.RADIUS.MAX);
393-
this.scales[bx] = pointRadius;
394-
this.scales[by] = pointRadius;
395-
this.scales[bz] = pointRadius;
392+
393+
this.scales[px] = pointRadius;
394+
this.scales[py] = pointRadius;
395+
this.scales[pz] = pointRadius;
396396
this.scales[this.activeIdx[idx]] = PRNG.nextRange(Spawn.LENGTH.MIN, Spawn.LENGTH.MAX);
397-
this.positions[bx] = X_MIN_CUBE_CENTER + Math.trunc(CUBES_X * Math.random()) * Cube.INTERVAL;
398-
this.positions[by] = Y_MIN_CUBE_CENTER + Math.trunc(CUBES_Y * Math.random()) * Cube.INTERVAL;
399-
this.positions[bz] = Z_MIN_CUBE_CENTER + Math.trunc(CUBES_Z * Math.random()) * Cube.INTERVAL;
397+
398+
this.positions[px] = X_MIN_CUBE_CENTER + Math.trunc(CUBES_X * Math.random()) * Cube.INTERVAL;
399+
this.positions[py] = Y_MIN_CUBE_CENTER + Math.trunc(CUBES_Y * Math.random()) * Cube.INTERVAL;
400+
this.positions[pz] = Z_MIN_CUBE_CENTER + Math.trunc(CUBES_Z * Math.random()) * Cube.INTERVAL;
400401
this.positions[this.activeIdx[idx]] = this.getStartPos(idx);
402+
401403
return idx;
402404
}
403405

0 commit comments

Comments
 (0)