DEV Community: Moulun Kevin

I coded a ASCII art generator in Node JS

Moulun Kevin — Sat, 17 Apr 2021 12:00:27 +0000

Hi 👋
In this article you'll see how to make a ASCII art generator from an image

The result:

but first

what is this ASCII art ?

ASCII art is a graphic design technique that uses computers for presentation and consists of pictures pieced together from the 95 printable characters defined by the ASCII Standard from 1963 and ASCII compliant character sets with proprietary extended characters

Prerequisites

I'll use those packages:
For this project I wanted to use my JS knowledge, so I'll use:

npm i sharp readline-sync

Steps for the program:

When I was thinking of ASCII art, I imagined that it was made with some sort of edge detection algorythm, Oh boy I was wrong, for making an ASCII art you from a picture, you'll need to:

turn the image into a black and white image
resize the image
replace all the black and white pixel by character defines for brightness and darkness / shadow

Alright let's get into it, I'll first create a package.json file by doing a:

npm init

Once I have my package, I'll create a index.js file, this is where my code will be.

Alright once that done, I'll import all the dependencies necessary for this project like this:

const sharp = require("sharp");
const readlineSync = require("readline-sync");
const fs = require("fs");

then let's first ask the user the image that it want to convert

Get the user input

For this I'll create function called loadFileFromPath and into it I will get the user input like this:

var filePath = readlineSync.question("What's the file path ");

Why do we need readlineSync?
You probably wondering what is tha readlineSync package. This allow us to enter a input in the console Synchronously since node JS is Asynchronous, the code continues it's execution, so we use this to wait for the user input

then I'll test if the path is correct or not with a try/catch like this:

try {
    const file = await sharp(filePath);
    return file;
  } catch (error) {
    console.error(error);
  }

and the all function looks like this:

const loadFileFromPath = async () => {
  var filePath = readlineSync.question("What's the file path ");
  try {
    const file = await sharp(filePath);
    return file;
  } catch (error) {
    console.error(error);
  }
};

Convert to black and white

For this I'll first create a function named convertToGrayscale with a path parameter like this:

const convertToGrayscale = async (path) => {
  // code
};

in this function I'll load the img and change it's color values to B&W and finally I return the b&w result

const convertToGrayscale = async (path) => {
 const img = await path; 
 const bw = await img.gamma().greyscale();
 return bw;
};

Resizing the image

For this I'll first create a function named resizeImg with bw and newWidth = 100 parameters like this:

const resizeImg = async (bw, newWidth = 100) => {
  //code
};

t
I'll then await for the bw image and await the blackAndWhite wariable result then get it's metadatas for getting access to the sizes properties

const resizeImg = async (bw, newWidth = 100) => {
  const blackAndWhite = await bw;
  const size = await blackAndWhite.metadata();
};

we then calculate the ratio of the image, for that we just divide the width by the height and we get the ratio. Then we calculate our new height with:

const ratio = size.width / size.height;
newHeight = parseInt(newWidth * ratio);

Then we finally resize the image and return it like this:

const resized = await blackAndWhite.resize(newWidth, newHeight, {
    fit: "outside",
  });
return resized;

The whole function should look like this:

const resizeImg = async (bw, newWidth = 100) => {
  const blackAndWhite = await bw;
  const size = await blackAndWhite.metadata();
  const ratio = size.width / size.height;
  newHeight = parseInt(newWidth * ratio);
  const resized = await blackAndWhite.resize(newWidth, newHeight, {
    fit: "outside",
  });

  return resized;
};

Convert pixels to ASCII characters

For this I'll first create a function named pixelToAscii with a img parameter like this:

const pixelToAscii = async (img) => {
 //code
};

then I'll create variable to hold the img with an await keyword. I'll then get the pixels Array of the image and store it in a variable named pixels.

var newImg = await img;
const pixels = await newImg.raw().toBuffer();
};

Then I'll create a variable named characters which gonna contains an empty String. I then go through each pixel from the pixels array and the ASCII character to the string I created earlier:

characters = "";
pixels.forEach((pixel) => {
    characters = characters + ASCII_CHARS[Math.floor(pixel * interval)];
  });

You might notice two global variable that I did not mentioned yet:

interval
ASCII_CHARS

I'll explain you what both those variables are:

ASCII_CHARS is the variable that hold all the ASCII characters:

ASCII_CHARS = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ".split(
  ""
);

interval is the ascii that should be assign to the color (intensity)

charLength = ASCII_CHARS.length;
interval = charLength / 256;

Okay now we know what are those variable let's get back to the function, it should now look like this:

const pixelToAscii = async (img) => {
  var newImg = await img;
  const pixels = await newImg.raw().toBuffer();
  characters = "";
  pixels.forEach((pixel) => {
    characters = characters + ASCII_CHARS[Math.floor(pixel * interval)];
  });
  return characters;
};

Now we have all our steps, let's create the core of the app:

The main function

For this I'll first create a function named main with newWidth = 100 parameters like this:

const main = async (newWidth = 100) => {
  //code
};

in this function I'll create a function named: *newImgData which gonna be equal to all those function we created earlier nested like so:

const main = async (newWidth = 100) => {
  const newImgData = await pixelToAscii(
    resizeImg(convertToGrayscale(loadFileFromPath()))
  );
};

then I'll get the length of my characters and create an empty variable named ASCII like this:

const pixels = newImgData.length;
let ASCII = "";

then I'll loop through the pixels list like so:

for (i = 0; i < pixels; i += newWidth) {
    let line = newImgData.split("").slice(i, i + newWidth);
    ASCII = ASCII + "\n" + line;
  }

so basicaly I'm setting the line splitting. I'm getting the size of newWidth and then slice the array as a line of this newWidth
and then add the "\n" character to go to the next line.

Export to a text file

And finally in the same function I had this to save the text in a text file

 setTimeout(() => {
    fs.writeFile("output.txt", ASCII, () => {
      console.log("done");
    });
  }, 5000);

and VOILA we got a ASCII art generator from image, oh and of course don't forget the main() to first call the function

the complete code should look like this:

const sharp = require("sharp");
const readlineSync = require("readline-sync");
const fs = require("fs");

ASCII_CHARS = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ".split(
  ""
);
charLength = ASCII_CHARS.length;
interval = charLength / 256;
var newHeight = null;
const main = async (newWidth = 100) => {
  const newImgData = await pixelToAscii(
    resizeImg(convertToGrayscale(loadFileFromPath()))
  );
  const pixels = newImgData.length;
  let ASCII = "";
  for (i = 0; i < pixels; i += newWidth) {
    let line = newImgData.split("").slice(i, i + newWidth);
    ASCII = ASCII + "\n" + line;
  }

  setTimeout(() => {
    fs.writeFile("output.txt", ASCII, () => {
      console.log("done");
    });
  }, 5000);
};

const convertToGrayscale = async (path) => {
  const img = await path;
  const bw = await img.gamma().greyscale();
  return bw;
};

const resizeImg = async (bw, newWidth = 100) => {
  const blackAndWhite = await bw;
  const size = await blackAndWhite.metadata();
  const ratio = size.width / size.height;
  newHeight = parseInt(newWidth * ratio);
  const resized = await blackAndWhite.resize(newWidth, newHeight, {
    fit: "outside",
  });

  return resized;
};

const pixelToAscii = async (img) => {
  var newImg = await img;
  const pixels = await newImg.raw().toBuffer();
  characters = "";
  pixels.forEach((pixel) => {
    characters = characters + ASCII_CHARS[Math.floor(pixel * interval)];
  });
  return characters;
};

const loadFileFromPath = async () => {
  var filePath = readlineSync.question("What's the file path ");
  try {
    const file = await sharp(filePath);
    return file;
  } catch (error) {
    console.error(error);
  }
};
main();

What I learned throughout this project ?

This project was really interesting to make I first discovered that you can nest functions, I also discovered, how does ASCII art was working, I learned about node js Asynchronous problem for user input and how to solve this problem, and finally how to do some basic image manipulation.

Conclusion

Thank you for reading this, I hope this helped you in any way
You can follow me on:
instagram
youtube

Hope you'll have an awesome day / Having an awesome day
and don't forget keep learning

Trying to learn the basic of shaders in 24hours

Moulun Kevin — Fri, 19 Mar 2021 13:25:51 +0000

First of all, I'd like to share with you the experience I had with shader, I promise it won't be long, here it is: None

I always was fascinated by how people can make stunning shader and was like hmmm, I wonder if I can learn the basic of it, in this post I'll show you what I did and learned throughout my experiments

First hour

So the first day I started by googling how to make shaders, and oh boy I was not ready for this, I found a bunch of link containing Math.
I decided to find the basic explanation of a shader to start, I learned that the Shader was handled by the GPU, and it was divided in two part:

Fragment shaders
Vertex shaders

Youtube

Then I found this Youtube Playlist, the person in this video is explaining really well through examples

In the first video he covers different tools to allow us a live preview of the shader itself, here the tool I used for this:

VScode
GLSL-canvas
GLSL-Linter

The basic structure of a simple shader

basicaly the structure of the code looks like C
Here is the basic structure for a red color

void main(){
    vec3 color = vec3(0.3, 0.5, 0.3 );
    gl_FragColor = vec4(color,1);
}

Here we define a Vector3 with 3 value corresponding to the RGB channels, Then we defined a gl_FragColor wich is the final color output with a Vector4 since we have color with RGB, the fourth Vector is for the Alpha

Progress was made

I quickly tried to play with value and got different colors, but I wanted to go way more further than that, I continued on the series and learned the Uniforms wich is a way to pass a data from the CPU into the GPU
GLSL have some existing Uniforms like:

uniform vec2 u_resolution;  // Canvas size (width,height)
uniform vec2 u_mouse;       // mouse position in screen pixels
uniform float u_time;       // Time in seconds since load

My first shape

You have to know that in the opposite of canvas, 3d stuff, p5.js and more, Shader don't have a prebuilt shape system
So I had to create a function that returns a Float for the shape, here is how you can create a circle in GLSL:

uniform vec2 u_resolution;

float circleShape(vec2 position, float radius){
    return step(radius, length(position - vec2(0.5)));
}

void main(){
 vec2 position = gl_FragCoord.xy / u_resolution;

 vec3 color = vec3(0.8392, 0.1608, 0.1608);
 float circle = circleShape(position, 0.2);

 color = vec3(circle);
 gl_FragColor = vec4(color,1.0 );  
}

Okay let me cut that in multiple part for you
first we have the function to return a float for the circle

float circleShape(vec2 position, float radius){
    return step(radius, length(position - vec2(0.5)));
}

Then we have this weird vec2 position wich correspond basicaly to the canvas size

vec2 position = gl_FragCoord.xy / u_resolution;

and then we assign the vec3 of the circle into color

Sin Cos

In this video i've learned how to use a new uniform wich is time, and then applied that to a sin() and cos() functions, to get smooth movement during time

vec2 translate = vec2(0.0, cos(u_time / 2.0));

Water colors

In this video, I've learn the for loop, how to use it with a shape like this:

for(int n = 1; n < 25; n++){
        float i = float(n);
        coord += vec2(0.7 / i *  sin(i* coord.y + u_time + 0.3 * i) + 0.8, 0.4 / i * sin(coord.x + u_time +0.3 * i) + 1.6 );
    }

Light

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main(){
    vec2 coord = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x,u_resolution.y );
    coord.x += sin(u_time) + cos(u_time * 2.1);
    coord.y -= cos(u_time) - sin(u_time * 1.6);
    float color = 0.0;

    color += 0.1 * (abs(sin(u_time)) + 0.1) / length(coord);

    gl_FragColor = vec4(vec3(color, color, color),1.0);
}

And that's pretty much what I've learned so far, I learned that Math was really important and that I was not so good at it 😅, but this challenge allowed me to discover something new, I think I could redo it another time with another subject.

Thank you for ready until here, I hope you liked my story and if you want to challenge yourself to create / learn something in 24hours and document your jouney, I'd love to see it

Have a nice day ! 👋

Creativity is like a dream, you can do anything with your mind, and if you don't suck at math 😅

How to use the fileReader to show a file with Javascript

Moulun Kevin — Fri, 29 Jan 2021 16:04:05 +0000

🤔 What is the fileReader ?

"The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read." - MDN web Docs

🤔 So how does it work ?

The user use an upload type input to transfer the data, when we upload it we'll use a addEventListener onChange like this:

💻 A real exemple

Here I'm making a poll app, and before sending the datas into the db, I'm letting the user see the result, I'm using react but this does not really matter, you can do it with vanilla Javascript

HTML side

Here I'm creating a html input element with the type file, I'm using onChange because I'm using react, I'd rather recommend you to add an event listener for the input if you're using something else than react

React way

<input 
id="form__cover" 
type="file" 
onChange={(e) => handleFiles(e, 0)}></input>

Vanilla way

<input 
id="form__cover" 
type="file"
></input>

And then into the Javascript:

const input = document.getElementById("myElement");
input.addEventListener("change", function(){
  //Do something in it
});

The fileReader

const handleFiles = (e) => {
    const reader = new FileReader();
    let file = e.target.files[0];

So in the code above we:

First declare the variable reader equals to a new Filreader Object / Instance
Then with define the file equals to the e (event) target (the element targeted) and then the files[0] because we can have an input with multiple files

  reader.readAsDataURL(e.target.files[0]);
    reader.onload = function () {
      console.log(reader.result);
    };
    reader.onerror = function () {
      console.log(reader.error);
    };

We then here first read the data as Data URL, so the data can be read by the browser as a blob, then we:

Add an event listener for reader wich listen to the load event and then pass a callback function wich will console log the URL of the file
Add a error handling with the on error wich is an event listener for error, we then pass a callback function as well and console.log the error returned by the reader

Conclusion

Using this is really interesting since we can for exemple display a profile picture selected by the user before sending it to the DB, wich allow the user to have a better feedback and not wait until the page has been reload or the server sent back the data

Thank you for reading this article 🙏, I hope this was helpful for you

Responsive square, HOW ? 🤔, here's the solution !

Moulun Kevin — Fri, 15 Jan 2021 01:57:36 +0000

The problem

I've always got some design ideas for galleries in a grid form, but it always required square cover, the only problem was that it wasn't really responsive if I was fixing a height and width in px, but doing the same with % em rem was a nightmare until now

the solution

The solution is quite simple when you think of it, if we take a div with a width in percentage then we apply a padded bottom on a:: after pseudo element, The padding is basing it’s width from the parent container, so when we set padding-bottom to 100%, it basically means 100% of its width, so with this you get a responsive square

I hope this post helped you with this struggle 👍

A trick to change the autocomplete background-color

Moulun Kevin — Tue, 12 Jan 2021 00:44:56 +0000

Story

When I worked on a project as a front end developper I found myself stuck with a little issue, the website was black on the background and when a user would use the input,the autocomplete would turn the box to white background, So I decided to look up on google to find an explanation, it seems that the chrome agent won't let you change your background, so I had to find a new way, here's the solution

The solution


 css
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1b1b1b inset !important;
  -webkit-text-fill-color: white !important;
}

What we've done here is simply select the pseudo element Autofill and then apply a huge box shadow inside of it, so the background would be covered by the Box shadow inset

And then I changed the text-fill-color to white

And the result is:

👍 I hope this post helps you with this CSS property

How to create your spinner using loading.io

Moulun Kevin — Tue, 12 Jan 2021 00:21:48 +0000

Hi
Today I've been in the need of making an AJAX call and so I needed a loader or spinner, I've been wondering if I could make one or download one, and then I land on this result: https://loading.io/

It's a really good tool for making Spinner though it's limited due to the free plan but still fitting my needs

I recommend you to check it out

My z-index nightmare

Moulun Kevin — Fri, 29 May 2020 00:11:37 +0000

My z-index nightmare

Since I started developping, I ran into some issues with CSS, but lately I discovered why I was pulling my hair off

While I was working with my latest project, I encountered z-index issue

I was trying to make it work, but it did not

But why ?

The z-index property needs a position for it to work, that's what I discovered

You might already know that but I wanted to share it

Thank you for taking the time to read this post! 🙏