3let w, d, n1, s1, p1, w2;
4let t = 0;
5export function setup() {
6 document.body.style.margin = "0";
7 document.body.style.backgroundColor = "slategrey";
20}
21
22export function draw() {
23 translate(width / 2, height / 2);
24 t += 0.005;
11};
12
13async function createSessionTable(tableName: string) {
14 await sqlite.execute(`CREATE TABLE ${tableName} (
15 id TEXT NOT NULL PRIMARY KEY,
19}
20
21async function createSession(tableName: string, valSlug: string): Promise<Session> {
22 try {
23 const expires_at = new Date();
39}
40
41async function getSession(tableName: string, sessionID: string, valSlug: string): Promise<Session> {
42 try {
43 const { rows, columns } = await sqlite.execute({
80</html>`;
81
82export function redirect(location: string): Response {
83 return new Response(null, {
84 headers: {
98const cookieName = "auth_session";
99
100export function passwordAuth(next, options?: PasswordAuthOptions) {
101 const sessionTable = options?.sessionTable || "password_auth_session";
102 return async (req: Request) => {
10];
11
12async function getImage(url: string) {
13 const data = await fetch(url).then((e) => e.arrayBuffer()).then((e) => new Uint8Array(e));
14 const image = await loadImage(data);
23}
24
25export default async function(req: Request): Promise<Response> {
26 const url = new URL(req.url);
27 const imgUrl = url.searchParams.get("url")
101
102// Main app component
103function App() {
104 const canvasRef = useRef(null);
105 const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });
116 }, []);
117
118 // Drawing context functions
119 const addDrawing = (id, drawingData) => {
120 setDrawings(prev => ({ ...prev, [id]: drawingData }));
181 }, [dimensions, drawings]);
182
183 // Helper function to create SVG-like rounded rectangle path
184 function drawRoundedRectPath(x, y, width, height, radius) {
185 return [
186 `M${x + radius},${y}`,
264}
265
266function client() {
267 createRoot(document.getElementById("root")).render(<App />);
268}
272}
273
274export default async function server(request: Request): Promise<Response> {
275 return new Response(`
276 <!DOCTYPE html>
100};
101
102// Helper function to create SVG-like rounded rectangle path
103function drawRoundedRectPath(x, y, width, height, radius) {
104 return [
105 `M${x + radius},${y}`,
117
118// Main app component
119function App() {
120 const canvasRef = useRef(null);
121 const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });
133 }, []);
134
135 // Drawing context functions
136 const addDrawing = (id, drawingData) => {
137 setDrawings(prev => ({ ...prev, [id]: drawingData }));
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
5 return new Response(
6 renderToString(
43
44/** Get a histogram of frequency of colors. */
45export function getHistogram(colors: Color[]): ColorHistogram {
46 const histo = new ColorHistogram();
47 let i = 0;
4import type { ColorRange } from "./common.ts";
5
6export function quantizeByMedianCut(
7 pixels: Color[],
8 extractCount: number,
13}
14
15function quantize(
16 vbox: ColorRange,
17 histo: ColorHistogram,
73
74/** Get number of colors in vbox */
75function vboxSize(vbox: ColorRange, histo: ColorHistogram): number {
76 let count = 0;
77 let ri = vbox.r.min;
92
93/** Get volume by dimensions of vbox */
94function vboxVolume(vbox: ColorRange): number {
95 return ~~(vbox.r.max - vbox.r.min) * ~~(vbox.g.max - vbox.g.min) *
96 ~~(vbox.b.max - vbox.b.min);
98
99/** Cut vbox into two */
100function medianCutApply(
101 vbox: ColorRange,
102 histo: ColorHistogram,
2
3/** Box blur with r = 3 */
4export function boxBlur(image: { pixels: Color[]; width: number }) {
5 let i = 0;
6 // pixels is an array of pixels with r, g, b values
6 * Uses two-row Sierra matrix
7 */
8export function sierra2(
9 pixels: Color[],
10 width: number,
68 * Use twoRowSierraDither for more accuracy
69 */
70export function sierraLite(
71 pixels: Color[],
72 width: number,
