DEV Community

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

Posted on

3 1 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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn 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

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay