DEV Community: MasashiKon

Learning how to type Bopomofo

MasashiKon — Sat, 13 Jan 2024 06:37:46 +0000

I published my first typing practicing site.

Have you ever seen characters like these ㄅㄆㄇㄈ called Bopomofo?

Well, this is a unique in Taiwan and I have been thinking to learn Chinese with these for a few years.

However there are not so many site I can learn typing Bopomofo, So I built it by my self.

The page is pretty simple, but it already has complete typing interface of them.

Try to play around!

Introduction to p5.js

MasashiKon — Wed, 22 Feb 2023 18:48:33 +0000

To make our website more attractive, we often try to add some visualization to it.
However, only with vanilla html, css and javascript, it'll be so hard to do and it it the time p5.js comes in!
In this article, you will know a brief knowledge about p5.js.

Set up your first p5.js

p5.js is a javascript library. That means you can apply it to your project just by adding CDN.
First, visit to p5.js site and copy the script tag for CDN and just paste it inside your header tag.

<script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>

And then your p5.js is ready!
Now you create your own javascript file for the html and start writing your canvas.

Create Canvas

5p.js has some reserved functions and setup() is one of them.

function setup() {}

Once you define this function, you don't need to call it. p5.js automatically invokes the function and code inside the function block will be run when html file is loaded.
Inside the function, we first need to create new canvas using by createCanvas(). It takes two argument: width and height.
If you want to make the canvas having 800px width and 600px height, you just call the function like below.

function setup() {
  createCanvas(800, 600);
}

By this code, p5.js make new html new canvas tags and append it to html body.

Also, you can change background color of the canvas by calling background(). It takes color value as its parameter such as RGBA or hex color.

function setup() {
  createCanvas(800, 600);
  background(255, 0, 0); // "#ff0000" also sets background color red.
}

Set background color

Now, you have created brand new canvas. Let's draw something inside of it!
When you want to draw something in canvas, you call draw() function. As the name says, it draws in your canvas. For example, for drawing a line, you just call line() inside your canvas:

function draw() {
  line(0, 0, width, height);
}

You can see a line goes through the canvas now. line() function takes starting x and y coordinate of the line in first and second parameters and end points as third and fourth.
By default, you can point a position of the canvas by x and y coordinate. They starts from top left corner of the canvas.
That means origin and value of x increases as it goes to right and y goes to bottom. width and heigh variables are both predefined by p5.js. When you call createCanvas(800, 600) in setup(), these arguments are stored to each width and height.

Move line

p5.js is library for creativity. So it has a functionality for this!
Refactor your code inside your function to this and let's see the result.

function draw() {
 line(0 + frameCount, 0, width + frameCount, height);
}

The black object appearing! But why? In this code, frameCount also a reserved variable that has number of how many times the canvas rendered since the canvas html tag created.
That means, yes, the canvas is rendered many of times! By default, 5p.js renders the canvas 60 times per second. And draw() function runs the code inside of it in every that time.
So if you want to move line, you need to refresh the canvas in each rendering by call background().

function draw() {
 background(0, 0, 0); // Reset background to white in each rendering.
 line(0 + frameCount, 0, width + frameCount, height); // On refreshed background, line is rendered.
}

background() function also accepts alpha value as a fourth value.

function draw() {
 background(0, 0, 0, 10); // alpha value between 0 - 255
 line(0 + frameCount, 0, width + frameCount, height);
}

The line has ghost effect as moving!

Web Editor

Now you have understood the very basic of p5.js! If you fell to try, there is a web editor and there are plenty more functions for your creativity.

Microservices For A Macro System

MasashiKon — Tue, 10 Jan 2023 18:52:04 +0000

There are kind like infinite amount of subjects in coding world. When you finish learning one functionality, new feature comes immediately and we may get lost again.
As I was learning JavaScript, sometimes wondering that how broad the JavaScript world is comparing to entire computer science. When I was getting started how it is related to HTML and CSS, the language suddenly says, "Hey, I am able to run on terminal but only web. browser!". What an awful word it was.
The more I learning, the more the world broaden. Well, it is great experience of course. I love to hit APIs or make sprites to move on Phaser. Also, solving a maze by breadth first is so nice thing to code.
Anyway, I found one thing from these studies. That is an importance of separation.
For instance, when you solve the maze problem, you must know the way of handling 2D arrays like nested for loops or other methods. If you have the object notation in your toolbox, you are able to add extra information to each cell of maze such like whether the cell has been visited.
Array and object are quite basic to talk about. However the way of thinking is applying more complex things.
If you want to make complex function, first of all you need to separate factors. That means, what consists the function? How should I ask the user to input something? How should I treat the input? as string or array? Where does it go after processing the input in which data type? Am I understanding that small functionality precisely?
Well, it's getting confusing. It is obvious that to separate functionalities when building it. What I want to say is rather separating, or organizing my toolbox than the function it self.
Let's go back to the maze problem. I insisted that array and object are basic thing for coding. But is it true?
Solving maze is popular problem but not one of the easiest. You may need to take time to think of strategy before actual coding.
In that time, it requires imagination skill. You need to move elements inside of 2D arrays and each has object. So you need to iterate through objects and each object has key-value pairs like isVisited. Besides, the code should have cue array for processing algorithm. A value of isVisited should be toggled to true when it pushed to cue...
It's getting tangled again! However this time, maybe the thinking has gone into a bit deeper than before.
This is because I know about array and object well. I mean, I'm not a newbie at least.
And this is what I meant: knowing what can I do by the tools?
Node.js can handle outside of browser environment. Java is good at to express relationship between real entities. Bootstrap makes designing web pages a lot easier but if you want to transform HTML elements as wish, you may better to use CSS. Labeling the tools with brief description makes it easy to choose what should I use for a situation.
Even if those descriptions are wrong, we can relabeling later. It's better than no description.
Since August last summer, we've learned lot of things. And from that, not only the practical things, I learned the way of learning. This is maybe the most valuable thing for future macro coding.