feat: halftone (#26)

packages/pixel-profile/src/cards/stats.ts

@@ -1,4 +1,6 @@
 import { addBorder, curve, pixelate } from '../shaders'
+// import { glow } from '../shaders/glow'
+import { halftone } from '../shaders/halftone'
 import { scanline } from '../shaders/scanline'
 import {
   AVATAR_SIZE,
@@ -15,7 +17,6 @@ import { Resvg } from '@resvg/resvg-js'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import satori from 'satori'
-// import {glow} from "../shaders/glow";
 
 export type Stats = {
   name: string
@@ -148,8 +149,14 @@ export async function renderStats(stats: Stats, options: Options = {}): Promise<
 
   let { pixels } = await getPixelsFromPngBuffer(pngBuffer)
 
+  if (theme === 'green_phosphor') {
+    pixels = halftone(pixels, width, height)
+  }
+
   if (screenEffect) {
-    pixels = scanline(pixels, width, height)
+    if (theme !== 'green_phosphor') {
+      pixels = scanline(pixels, width, height)
+    }
     // pixels = glow(pixels, width, height)
     pixels = curve(pixels, width, height)
   }

packages/pixel-profile/src/shaders/halftone.ts

@@ -0,0 +1,33 @@
+import { render, RGBA } from '../renderer'
+
+const dotSize = 4
+const dotDensity = 1
+const mat = [
+  [0.1, 0.9, 0.3, 0.9],
+  [0.9, 0.3, 0.9, 0.6],
+  [0.3, 0.9, 0.1, 0.9],
+  [0.9, 0.6, 0.9, 0.6]
+]
+const ditherRange = 0
+
+export function halftone(source: Buffer, width: number, height: number): Buffer {
+  return render(source, width, height, (pixelCoords, texture2D) => {
+    const gridCoords = [Math.floor(pixelCoords[0] / dotSize), Math.floor(pixelCoords[1] / dotSize)]
+
+    const originalColor = texture2D(pixelCoords)
+    const grayValue = (originalColor[0] + originalColor[1] + originalColor[2]) / (3 * 255)
+    const ditherValue = (Math.random() - 0.5) * ditherRange
+    const adjustedGrayValue = Math.min(Math.max(grayValue + ditherValue, 0), 1)
+
+    const relativeCoords = [pixelCoords[0] - gridCoords[0] * dotSize, pixelCoords[1] - gridCoords[1] * dotSize]
+
+    const intensity = mat[relativeCoords[0]][relativeCoords[1]]
+
+    const dotRadius = dotDensity * (1 - adjustedGrayValue)
+    const isInDot = intensity < dotRadius
+
+    const finalColor: RGBA = isInDot ? [7, 85, 59, 255] : [206, 212, 106, 255]
+
+    return finalColor
+  })
+}

packages/pixel-profile/src/theme/index.ts

@@ -59,6 +59,10 @@ export const THEME: Theme = {
     backgroundImage: `url(${IMG_ROAD_TRIP})`,
     backgroundSize: '1226px 430px',
     backgroundRepeat: 'no-repeat'
+  },
+  green_phosphor: {
+    color: 'white',
+    background: 'linear-gradient(to bottom right, #74dcc4, #4597e9)'
   }
 }
 

packages/pixel-profile/src/utils/math.ts

@@ -25,10 +25,18 @@ export function dot2(a: Vec2, b: Vec2): number {
   return a[0] * b[0] + a[1] * b[1]
 }
 
+export function divide2(v: Vec2, scalar: number): Vec2 {
+  return [v[0] / scalar, v[1] / scalar]
+}
+
 export function prod2(v: Vec2): number {
   return v[0] * v[1]
 }
 
+export function floor2(v: Vec2): Vec2 {
+  return [Math.floor(v[0]), Math.floor(v[1])]
+}
+
 export function add3(a: Vec3 | RGBA, b: Vec3 | RGBA): Vec3 {
   return [a[0] + b[0], a[1] + b[1], a[2] + b[2]]
 }
@@ -44,3 +52,17 @@ export function divide3(v: Vec3 | RGBA, scalar: number): Vec3 {
 export function mix3(v1: Vec3 | RGBA, v2: Vec3 | RGBA, t: number): Vec3 {
   return [v1[0] * (1 - t) + v2[0] * t, v1[1] * (1 - t) + v2[1] * t, v1[2] * (1 - t) + v2[2] * t]
 }
+
+export function fract(x: number): number {
+  return x - Math.floor(x)
+}
+
+export function smoothstep(edge0: number, edge1: number, x: number): number {
+  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)))
+
+  return t * t * (3 - 2 * t)
+}
+
+export function luminance(color: Vec3 | RGBA): number {
+  return dot3(color, [0.2126, 0.7152, 0.0722])
+}

packages/pixel-profile/test/theme.test.ts

@@ -65,6 +65,11 @@ describe('Theme', () => {
     )
     expect(png).toMatchImageSnapshot()
   })
+
+  it('Render card with green phosphor theme', async () => {
+    const png = await renderStats({ ...stats, avatarUrl: PURPLE_AVATAR }, { theme: 'green_phosphor' })
+    expect(png).toMatchImageSnapshot()
+  })
 })
 
 describe('Theme with screen effect', () => {
@@ -129,4 +134,12 @@ describe('Theme with screen effect', () => {
     )
     expect(png).toMatchImageSnapshot()
   })
+
+  it('Render card with green phosphor theme', async () => {
+    const png = await renderStats(
+      { ...stats, avatarUrl: PURPLE_AVATAR },
+      { theme: 'green_phosphor', screenEffect: true }
+    )
+    expect(png).toMatchImageSnapshot()
+  })
 })