DEV Community

Cover image for Day 24: Paint by Pixels 🎨
Valeria
Valeria

Posted on

2 1

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay