From 078b7806dddbeca9fff11d984d15450922f4a161 Mon Sep 17 00:00:00 2001 From: dylan <> Date: Sat, 29 Apr 2023 15:16:35 -0700 Subject: [PATCH] it kinda works! --- deps.ts | 1 - index.ts | 204 ++++++++++++++---------------------------------------- window.ts | 164 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 215 insertions(+), 154 deletions(-) create mode 100644 window.ts diff --git a/deps.ts b/deps.ts index 1aaae9f..432703c 100644 --- a/deps.ts +++ b/deps.ts @@ -2,6 +2,5 @@ export { createWindow, getProcAddress, mainloop, - DwmWindow, } from "https://deno.land/x/dwm@0.3.3/mod.ts"; export * as gl from "https://deno.land/x/gluten@0.1.6/api/gles23.2.ts"; \ No newline at end of file diff --git a/index.ts b/index.ts index 6d4a279..1235ba3 100644 --- a/index.ts +++ b/index.ts @@ -1,162 +1,60 @@ import { - createWindow, - getProcAddress, mainloop, - gl, -} from "./deps.ts"; + frame, + setPixelColor, + clearScreen, + setPixelsInRect, +} from "./window.ts"; -const window = createWindow({ - title: "Faux", - width: 1024, - height: 1024, - resizable: false, - glVersion: [3, 2], - gles: true, -}); - -gl.load(getProcAddress); - -function loadShader(type: number, src: string) { - const shader = gl.CreateShader(type); - gl.ShaderSource( - shader, - 1, - new Uint8Array( - new BigUint64Array([ - BigInt( - Deno.UnsafePointer.value( - Deno.UnsafePointer.of(new TextEncoder().encode(src)), - ), - ), - ]).buffer, - ), - new Int32Array([src.length]), - ); - gl.CompileShader(shader); - const status = new Int32Array(1); - gl.GetShaderiv(shader, gl.COMPILE_STATUS, status); - if (status[0] === gl.FALSE) { - const logLength = new Int32Array(1); - gl.GetShaderiv(shader, gl.INFO_LOG_LENGTH, logLength); - const log = new Uint8Array(logLength[0]); - gl.GetShaderInfoLog(shader, logLength[0], logLength, log); - console.log(new TextDecoder().decode(log)); - gl.DeleteShader(shader); - return 0; - } - return shader; -} - -const vShaderSrc = ` -attribute vec4 vPosition; -attribute vec4 vCol; -varying vec4 color; -void main() { - gl_Position = vPosition; - color = vCol; -} -`; - -const fShaderSrc = ` - precision mediump float; - varying vec4 color; - void main() { - gl_FragColor = color; - } - `; - -const vShader = loadShader(gl.VERTEX_SHADER, vShaderSrc); -const fShader = loadShader(gl.FRAGMENT_SHADER, fShaderSrc); - -const program = gl.CreateProgram(); -gl.AttachShader(program, vShader); -gl.AttachShader(program, fShader); - -gl.BindAttribLocation(program, 0, new TextEncoder().encode("vPosition\0")); -gl.BindAttribLocation(program, 1, new TextEncoder().encode("vCol\0")); - -gl.LinkProgram(program); - -const status = new Int32Array(1); -gl.GetProgramiv(program, gl.LINK_STATUS, status); -if (status[0] === gl.FALSE) { - const logLength = new Int32Array(1); - gl.GetProgramiv(program, gl.INFO_LOG_LENGTH, logLength); - const log = new Uint8Array(logLength[0]); - gl.GetProgramInfoLog(program, logLength[0], logLength, log); - console.log(new TextDecoder().decode(log)); - gl.DeleteProgram(program); - Deno.exit(1); -} - -gl.ClearColor(0.0, 0.0, 0.0, 1.0); - -addEventListener("resize", (event) => { - gl.Viewport(0, 0, event.width, event.height); -}); - -const pixelsPerRow = 128; - -const top = 1; -const left = -1; -const cell = 2/pixelsPerRow; - -const px = (x: number, y: number) => { - // deno-fmt-ignore - return [ - left + x*cell, top - y*cell, 0, - left + (x+1)*cell, top - y*cell, 0, - left + x*cell, top - (y+1)*cell, 0, - left + (x+1)*cell, top - y*cell, 0, - left + x*cell, top - (y+1)*cell, 0, - left + (x+1)*cell, top - (y+1)*cell, 0, - ]; -} - -const palette = [ - [0, 0, 0, 0], - [0, 0, 0, 1], - [1, 1, 1, 1], - [1, 0, 0, 1], - [1, 1, 0, 1], - [0, 1, 0, 1], - [0, 0, 1, 1], +// deno-fmt-ignore +const sprites = [ + [ + 2, 2, 2, 2, 2, 2, 2, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 2, 2, 2, 2, 2, 2, 2, + ], + [ + 2, 2, 2, 2, 2, 2, 2, 2, + 2, 3, 3, 1, 1, 3, 3, 2, + 2, 3, 3, 1, 1, 3, 3, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 1, 1, 1, 1, 1, 1, 2, + 2, 3, 3, 1, 1, 3, 3, 2, + 2, 3, 3, 1, 1, 3, 3, 2, + 2, 2, 2, 2, 2, 2, 2, 2, + ], + [ + 2, 2, 2, 2, 2, 2, 2, 2, + 2, 4, 4, 4, 4, 5, 5, 2, + 2, 4, 4, 4, 5, 5, 5, 2, + 2, 4, 4, 5, 5, 5, 6, 2, + 2, 4, 5, 5, 5, 6, 6, 2, + 2, 5, 5, 5, 6, 6, 6, 2, + 2, 5, 5, 6, 6, 6, 6, 2, + 2, 2, 2, 2, 2, 2, 2, 2, + ], ] -const c = (n: number) => { - return [ - ...palette[n], - ...palette[n], - ...palette[n], - ...palette[n], - ...palette[n], - ...palette[n], - ]; +const drawSprite = (x: number, y: number, spr: number) => { + setPixelsInRect(x, y, 8, sprites[spr]); } -const allPixelTriangles = new Float32Array( - Array(pixelsPerRow*pixelsPerRow).fill(null).flatMap((_, i) => px(i%pixelsPerRow,Math.floor(i/pixelsPerRow))) -) - -const choose = (alts: Array): T => { - return alts[Math.floor(Math.random()*alts.length)]; -} - -const allPixelColors = new Float32Array( - Array(pixelsPerRow*pixelsPerRow).fill(null).flatMap(() => c(choose([1,2,3,4,5,6]))) -) - -const frame = () => { - gl.Clear(gl.COLOR_BUFFER_BIT); - gl.UseProgram(program); - gl.VertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, allPixelTriangles); - gl.VertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 0, allPixelColors); - gl.EnableVertexAttribArray(0); - gl.EnableVertexAttribArray(1); - gl.DrawArrays(gl.TRIANGLES, 0, 6*pixelsPerRow*pixelsPerRow); - window.swapBuffers(); -} - -await mainloop(() => { +await mainloop((t) => { + console.log(t/1000); + clearScreen(); + for (let i = 0; i < 256; i++) { + drawSprite(Math.floor(Math.random()*120), Math.floor(Math.random()*120), 0); + drawSprite(Math.floor(Math.random()*120), Math.floor(Math.random()*120), 1); + drawSprite(Math.floor(Math.random()*120), Math.floor(Math.random()*120), 2); + } + setPixelColor(0, 0, 3); + setPixelColor(0, 127, 4); + setPixelColor(127, 0, 5); + setPixelColor(127, 127, 6); frame(); }); diff --git a/window.ts b/window.ts new file mode 100644 index 0000000..f7cc84f --- /dev/null +++ b/window.ts @@ -0,0 +1,164 @@ +import { + createWindow, + getProcAddress, + gl, +} from "./deps.ts"; +export {mainloop} from "./deps.ts"; + +const window = createWindow({ + title: "Faux", + width: 1024, + height: 1024, + resizable: false, + glVersion: [3, 2], + gles: true, +}); + +gl.load(getProcAddress); + +function loadShader(type: number, src: string) { + const shader = gl.CreateShader(type); + gl.ShaderSource( + shader, + 1, + new Uint8Array( + new BigUint64Array([ + BigInt( + Deno.UnsafePointer.value( + Deno.UnsafePointer.of(new TextEncoder().encode(src)), + ), + ), + ]).buffer, + ), + new Int32Array([src.length]), + ); + gl.CompileShader(shader); + const status = new Int32Array(1); + gl.GetShaderiv(shader, gl.COMPILE_STATUS, status); + if (status[0] === gl.FALSE) { + const logLength = new Int32Array(1); + gl.GetShaderiv(shader, gl.INFO_LOG_LENGTH, logLength); + const log = new Uint8Array(logLength[0]); + gl.GetShaderInfoLog(shader, logLength[0], logLength, log); + console.log(new TextDecoder().decode(log)); + gl.DeleteShader(shader); + return 0; + } + return shader; +} + +const vShaderSrc = ` +attribute vec4 vPosition; +attribute vec4 vCol; +varying vec4 color; +void main() { + gl_Position = vPosition; + color = vCol; +} +`; + +const fShaderSrc = ` + precision mediump float; + varying vec4 color; + void main() { + gl_FragColor = color; + } + `; + +const vShader = loadShader(gl.VERTEX_SHADER, vShaderSrc); +const fShader = loadShader(gl.FRAGMENT_SHADER, fShaderSrc); + +const program = gl.CreateProgram(); +gl.AttachShader(program, vShader); +gl.AttachShader(program, fShader); + +gl.BindAttribLocation(program, 0, new TextEncoder().encode("vPosition\0")); +gl.BindAttribLocation(program, 1, new TextEncoder().encode("vCol\0")); + +gl.LinkProgram(program); + +const status = new Int32Array(1); +gl.GetProgramiv(program, gl.LINK_STATUS, status); +if (status[0] === gl.FALSE) { + const logLength = new Int32Array(1); + gl.GetProgramiv(program, gl.INFO_LOG_LENGTH, logLength); + const log = new Uint8Array(logLength[0]); + gl.GetProgramInfoLog(program, logLength[0], logLength, log); + console.log(new TextDecoder().decode(log)); + gl.DeleteProgram(program); + Deno.exit(1); +} + +gl.ClearColor(0.0, 0.0, 0.0, 1.0); + +addEventListener("resize", (event) => { + gl.Viewport(0, 0, event.width, event.height); +}); + +const pixelsPerRow = 128; + +const top = 1; +const left = -1; +const cell = 2/pixelsPerRow; + +const px = (x: number, y: number) => { + // deno-fmt-ignore + return [ + left + x*cell, top - y*cell, 0, + left + (x+1)*cell, top - y*cell, 0, + left + x*cell, top - (y+1)*cell, 0, + left + (x+1)*cell, top - y*cell, 0, + left + x*cell, top - (y+1)*cell, 0, + left + (x+1)*cell, top - (y+1)*cell, 0, + ]; +} + +const palette: Array<[number, number, number, number]> = [ + [0, 0, 0, 0], + [0, 0, 0, 1], + [1, 1, 1, 1], + [1, 0, 0, 1], + [1, 1, 0, 1], + [0, 1, 0, 1], + [0, 0, 1, 1], +]; + +const paletteX6 = palette.map(rgba => [...rgba, ...rgba, ...rgba, ...rgba, ...rgba, ...rgba]); + +const c = (n: number) => { + return paletteX6[n]; +} + +const allPixelTriangles = new Float32Array( + Array(pixelsPerRow*pixelsPerRow).fill(null).flatMap((_, i) => px(i%pixelsPerRow,Math.floor(i/pixelsPerRow))) +) + +const allPixelColors = new Float32Array( + Array(pixelsPerRow*pixelsPerRow).fill(null).flatMap(() => c(1)) +) + +export const setPixelColor = (x: number, y: number, color: number) => { + const col = c(color); + allPixelColors.set(col, 4*6*(128*y+x)); +} + +export const setPixelsInRect = (x: number, y: number, w: number, pixels: Array) => { + for (let i = 0; i < pixels.length; i++) { + setPixelColor(x+i%w, y+Math.floor(i/w), pixels[i]); + } +} + +export const clearScreen = () => { + allPixelColors.fill(0); +} + +export const frame = () => { + gl.Clear(gl.COLOR_BUFFER_BIT); + gl.UseProgram(program); + gl.VertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, allPixelTriangles); + gl.VertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 0, allPixelColors); + gl.EnableVertexAttribArray(0); + gl.EnableVertexAttribArray(1); + gl.DrawArrays(gl.TRIANGLES, 0, 6*pixelsPerRow*pixelsPerRow); + window.swapBuffers(); +}