Day 24: Paint by Pixels 🎨
Valeria

Valeria @valeriavg

About: Re-inventor extraordinaire, optimisation addict and open web advocate.

Location:
Stockholm, Sweden
Joined:
Sep 23, 2020

Day 24: Paint by Pixels 🎨

Publish Date: Dec 24 '24
5 0

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("");
Enter fullscreen mode Exit fullscreen mode

Run with e.g. deno run -A main.ts and enjoy this little tree:

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

Enter fullscreen mode Exit fullscreen mode

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?

Buy Me A Coffee

Comments 0 total

    Add comment