JavaScript Coding Tutorial — Part 4

In Part 3 we created some nice looking semi-transparent random triangles that looked almost like some kind of generative art. We also widened the canvas and hopefully widened you awareness of what is possible with random functionality.

Once you create something this nice, you might want to name it, label it or put some kind of text on it, so let’s do that real quick and jump straight in to change our draw() function and add a new drawText() function below it.

function draw() {
//drawRect();
drawTriangle();
drawText();
window.requestAnimationFrame(draw);
}

function drawText() {
ctx.fillStyle = “rgba(255, 255, 255, 0.5)”;
ctx.font = ‘bold 3em sans-serif’;
ctx.textAlign = ‘center’;
ctx.fillText(“xpoly”, 300, 287);
}

You’ll notice that the text isn’t immediately visible, but rather it takes some times for the text to appear and this is because we have set the text fill style to match the same color white as the background, thus creating a sort of reveal effect.

At first the text isn’t visible, because the text color is set to the same as the canvas.

Over time the white text will become clear and legible, creating a sort of reveal effect.

At this point, I want to encourage you to not worry about what ever single part of the code means and what it exactly does, instead I would suggestion keeping the momentum and try experimenting with the numbers, colors and random functions. For example, what happens when you change just this one line of code to insert a random vertical coordinate for your new text?

ctx.fillText(“xpoly”, 250, getRandomNum(50, 250));

Something like a semi-artistic video special effect for your new text.

What about other special effects? Well, I’m glad you asked… err… maybe you didn’t, but here’s another one anyway. Just replace your drawTriangle() with the following JavaScript code.

function drawTriangle() {
ctx.beginPath();
ctx.moveTo(200, getRandomNum(50, 60));
ctx.lineTo(100, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.strokeStyle = “#f6e03c”;
ctx.lineWidth = 30;
ctx.stroke();
ctx.fillStyle = “#f5413b”;
ctx.fill();
}

An ultra simple flame animation with JavaScript.

So, great, right? Could’ve been in an early Atari or Nintendo game?! Ok… want to make the flame more agitated, just increase the top of the range.

ctx.moveTo(200, getRandomNum(50, 100));

Are you experimenting and spending at least a little time see how the numbers affect the canvas? One thing you could try is take out the getRandomNum() in your drawTriangle() function and see if you can move the coordinate of the triangle to reveal the white text.

function drawTriangle() {
ctx.beginPath();
ctx.moveTo(300, 160);
ctx.lineTo(200, 280);
ctx.lineTo(400, 280);
ctx.closePath();
ctx.strokeStyle = “#f6c53c”;
ctx.lineWidth = 30;
ctx.stroke();
ctx.fillStyle = “#f5413b”;
ctx.fill();
}

Experiment with the numbers to get the triangle to go over the white text.

Now, you got yourself a nice little watermark text effect for your triangle, nice work! And, if it’s a little frustrating getting working with the x and y coordinates, that would be completely normal. Don’t worry about it at this point, just try to get a feel for how the numbers work and make things move.

Instead of going back to randomness (as much fun as that is), what if you want something a little more tame and sequential, like something happening once per second vs. lightening speed. Ok, let’s do that and no better place to grab a once-per-second timer that your computer’s clock.

So, now add a new line that creates a new Date and Time, then we can use that time to ask specifically for the seconds with time.getSeconds().

function drawTriangle() {
var time = new Date();
ctx.beginPath();
ctx.moveTo(300, 160 - time.getSeconds());
ctx.lineTo(200, 280 - time.getSeconds());
ctx.lineTo(400, 280 - time.getSeconds());

Once per second the triangle will move up and at the end of every minute it will reset to the bottom.

Good, so now you have an animation that moves a triangle up a tiny bit every second and then back down at the end of every minute. Let’s try a few things to make it into more of a clock-a-thingy-thing.

The first thing we can do at the very beginning of the draw() function is to use clearRect() and re-fill in a new blank white canvas on each frame, this mean it will only draw one clean triangle without any trace of the previously drawn triangles on the canvas.

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = “#ffffff”;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Then if we add the following to the bottom of the drawTriangle() function, we can get a better sense of the… let’s say “interesting clock” we have created.

ctx.fillStyle = “rgba(255, 255, 255, 0.5)”;
ctx.font = ‘bold 3em sans-serif’;
ctx.textAlign = ‘center’;
ctx.fillText(time.getSeconds(), 300, 255 - time.getSeconds());

4 additional lines of JavaScript add text inside the triangle to show the seconds on the clock.

You miss the candle effect…? Don’t worry, we can easily add that back in by changing one line of code near the top of the drawTriangle() function.

ctx.moveTo(300, 160 - time.getSeconds() + getRandomNum(5, 20));

Adding back in a getRandomNum function to make a candle seconds clock.

There you go! A candle flame clock thingy to watch the seconds go by!

And… that’s the end of the JavaScript Coding Tutorial — Part 4