Day 24: Paint by Pixels 🎨
We did almost everything in a terminal except for maybe… Drawing!
And that’s exactly what we’re going to be doing today with the help of terminal-canvas.
Let’s install it with e.g. deno add npm:terminal-canvas and create a script, e.g. main.ts:
import { Canvas } from "terminal-canvas";
const canvas = Canvas.create().reset();
for (let i = 8; i < 9; i++) {
canvas.moveTo(i, 1);
canvas.background("green").write(" ");
}
for (let i = 6; i < 11; i++) {
canvas.moveTo(i, 2);
canvas.background("green").write(" ");
}
for (let i = 4; i < 13; i++) {
canvas.moveTo(i, 3);
canvas.background("green").write(" ");
}
for (let i = 2; i < 15; i++) {
canvas.moveTo(i, 4);
canvas.background("green").write(" ");
}
for (let i = 6; i < 11; i++) {
canvas.moveTo(i, 5);
canvas.background("green").write(" ");
}
for (let i = 4; i < 13; i++) {
canvas.moveTo(i, 6);
canvas.background("green").write(" ");
}
for (let i = 2; i < 15; i++) {
canvas.moveTo(i, 7);
canvas.background("green").write(" ");
}
for (let i = 0; i < 17; i++) {
canvas.moveTo(i, 8);
canvas.background("green").write(" ");
}
for (let i = 6; i < 11; i++) {
canvas.moveTo(i, 9);
canvas.background("brown").write(" ");
}
canvas.flush()
console.log("");
console.log("");
Run with e.g. deno run -A main.ts and enjoy this little tree:
But the tree is not decorated at all! That won’t do it!
Let’s change the code to:
import { Canvas } from "terminal-canvas";
const canvas = Canvas.create().reset();
for (let i = 8; i < 9; i++) {
canvas.moveTo(i, 1);
canvas.background("green").write(" ");
}
for (let i = 6; i < 11; i++) {
canvas.moveTo(i, 2);
canvas.background("green").write(" ");
}
for (let i = 4; i < 13; i++) {
canvas.moveTo(i, 3);
canvas.background("green").write(" ");
}
for (let i = 2; i < 15; i++) {
canvas.moveTo(i, 4);
canvas.background("green").write(" ");
}
for (let i = 6; i < 11; i++) {
canvas.moveTo(i, 5);
canvas.background("green").write(" ");
}
for (let i = 4; i < 13; i++) {
canvas.moveTo(i, 6);
canvas.background("green").write(" ");
}
for (let i = 2; i < 15; i++) {
canvas.moveTo(i, 7);
canvas.background("green").write(" ");
}
for (let i = 0; i < 17; i++) {
canvas.moveTo(i, 8);
canvas.background("green").write(" ");
}
for (let i = 6; i < 11; i++) {
canvas.moveTo(i, 9);
canvas.background("brown").write(" ");
}
const colors = ["red", "cyan", "white", "yellow", "blue", "magenta"];
setInterval(() => {
let x = Math.floor(Math.random() * colors.length);
canvas.moveTo(2, 8);
canvas.background(colors[x]).write(" ");
canvas.moveTo(3, 8);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(5, 7);
canvas.background(colors[x]).write(" ");
canvas.moveTo(6, 7);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(11, 7);
canvas.background(colors[x]).write(" ");
canvas.moveTo(12, 7);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(8, 8);
canvas.background(colors[x]).write(" ");
canvas.moveTo(9, 8);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(13, 8);
canvas.background(colors[x]).write(" ");
canvas.moveTo(14, 8);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(8, 6);
canvas.background(colors[x]).write(" ");
canvas.moveTo(9, 6);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(9, 2);
canvas.background(colors[x]).write(" ");
canvas.moveTo(10, 2);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(5, 3);
canvas.background(colors[x]).write(" ");
canvas.moveTo(6, 3);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(11, 4);
canvas.background(colors[x]).write(" ");
canvas.moveTo(12, 4);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(6, 5);
canvas.background(colors[x]).write(" ");
canvas.moveTo(7, 5);
canvas.background(colors[x]).write(" ");
x = (x+1) % colors.length
canvas.moveTo(8, 4);
canvas.background(colors[x]).write(" ");
canvas.moveTo(9, 4);
canvas.background(colors[x]).write(" ");
canvas.flush();
}, 40);
console.log("");
console.log("");
Do you like what you see? Hope you do!
Happy holidays!
Liked the content and would love to have more of it all year long?
