dev-resources.site

for different kinds of informations.

Day 24: Paint by Pixels 🎨

Published at

12/24/2024

Categories

4 categories in total

Author

9 person written this

valeriavg

open

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("");