Val Town Code SearchReturn to Val Town

25
26// Converted from: https://github.com/victorqribeiro/imgToAscii/blob/ca7e181b9bb9770798ed3a0d3dfeb344c60953f2/src/imgToAscii.js
27import { createCanvas, loadImage } from "https://deno.land/x/canvas@v1.4.1/mod.ts";
28export async function imageToAscii(src: string, maxWidth?: number) {
29  let string = "";
30  let stringColor = "";
38            "`","'","."," "]
39  }
40  const image = await loadImage(src);
41  let width = image.width();
42  const scale = maxWidth ? maxWidth / width : 1;
43  const height = Math.floor(image.height() * scale * 0.6);
44  width = Math.floor(width * scale);
45  const canvas = createCanvas(width, height);
46  const context = canvas.getContext("2d");
47  context.drawImage(image, 0, 0, canvas.width, canvas.height);
48  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
49  let grayStep = Math.ceil(255 / alphabet[charType].length);
50  for (let i = 0; i < imageData.data.length; i += 4) {
51    for (let j = 0; j < alphabet[charType].length; j++) {
52      let r = imageData.data[i];
53      let g = imageData.data[i + 1];
54      let b = imageData.data[i + 2];
55      if ((r * 0.2126) + (g * 0.7152) + (b * 0.0722) < (j + 1) * grayStep) {
56        const char = alphabet[charType][j];

1# ASCII NYC Traffic Cameras
2
3All of NYC's traffic cameras available as streaming ASCII images: https://maxm-asciinyccameras.web.val.run/
4
5<p align=center>
6<a href="https://maxm-asciinyccameras.web.val.run/">
7<!-- <img width=700 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/9c4e7e22-ae90-420e-4238-df0013d2a300/public"> --> 
8<img width=700 src="https://i.imgur.com/83LBOcN.gif">
9</a>
12
13
14NYC has a bunch of traffic cameras and makes them available through static images [like this one](https://webcams.nyctmc.org/api/cameras/858ef4e8-5058-4db2-96e2-70f71b65aa24/image). If you refresh the page you'll see the image update every 2 seconds or so. I thought it might be fun to make these cameras viewable as an ASCII art video feed. I made a [small library](https://www.val.town/v/maxm/imageToAscii) that takes most of its logic from [this repo](https://github.com/victorqribeiro/imgToAscii). You can see a basic example of how to convert [any image to ASCII here](https://www.val.town/v/maxm/asciiImageExample). 
15
16I pull in [NYC GeoJSON from here](https://observablehq.com/@miaozhang/maps) and then hook up a Server-Sent Events endpoint to stream the ASCII updates to the browser. (Polling would work just as well, I've just been on a bit of a SSE kick lately.)

1null
2
3Migrated from folder: asciiNyc/asciiImageExample

1
2![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2c54c8e1-7549-4e8b-3adc-7ec013fc3e00/public)
3

3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)
6

1import { createCanvas, loadImage } from "https://deno.land/x/canvas@v1.4.1/mod.ts";
2import GifEncoder from "https://esm.sh/gif-encoder";
3import { DateTime } from "https://esm.sh/luxon";
11      const height = 300;
12      const canvas = createCanvas(width, height);
13      const img = await loadImage("https://static.esm.town/build/_assets/valtown-logotype-blackOnWhite-R2XK5XHC.png");
14      const encoder = new GifEncoder(width, height);
15      encoder.setRepeat(0);
32        ctx.rotate(angle);
33        ctx.scale(scale, scale);
34        ctx.drawImage(img, -img.width() / 2, -img.height() / 2, img.width(), img.height());
35        ctx.restore();
36        angle += 0.02;
38        const now = DateTime.now().setZone("America/New_York").toFormat("yyyy-LL-dd hh:mm:ss");
39        ctx.fillText(now, 35, 50);
40        encoder.addFrame(ctx.getImageData(0, 0, width, height).data);
41      }, 20);
42    },
50  return new Response(body, {
51    headers: {
52      "Content-Type": "image/gif",
53    },
54  });

5<p align=center>
6<a href="https://maxm-valtownchatgpt.web.val.run/">
7<img width=600 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c180aba1-997a-4e40-615a-1ed8456b5a00/public">
8</a>
9</p>

3Cobbled together from here: https://github.com/denoland/fresh_charts/tree/main/examples
4
5Render charts as HTML or as images. This image is rendered by the val below: 
6
7![](https://maxm-freshchartsexample.web.val.run/img-chart)

2<h1 align=center>Blooming Button</h1> 
3<p align=center>
4<img width="400px" src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4a5a63c6-4094-44a9-0406-e74b679e1700/public" 
5</p>
6

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val: