JavaScript Coding Tutorial — Part 7 — Random Automatic Paint Brushes

In Part 6 we made randomized paint brush effects that followed our mouse cursor and made some pretty interesting looking canvas drawings effects. Now let’s make this a bit more automatic and see what we can do from here.

But, first, let’s take our latest code from Part 6 and add some comments to the top of the page. If you don’t understand exactly what it’s talking about, don’t worry, you can refer back to these comments and glancing at them will start to help give you a sense for the terminology and help later on.

<script>
/* My programming notes here...
  
     Note #1: Learn more JavaScript.
     Note #2: Keep learning JavaScript.
  
*/
// Use HTML DOM method getElementById to find the canvas element.
var canvas = document.getElementById("myCanvas");
// Use built-in HTML object getContext to create a drawing object.
var ctx = canvas.getContext("2d");
// Set fill style of drawing object to color, gradient or pattern.
ctx.fillStyle = "#ffffff";
// Use the fillRect(x,y,width,height) method to draw a rectangle.
ctx.fillRect(0, 0, canvas.width, canvas.height);

Once you are done entering the comments in the above code (or some of your own comments!), you can collapse the forward slash asterisk (star symbol) comment block, as shown below.

When you’re done entering comments into the multi-line comment code block, you can collapse it.

Ok, great, now that you have some comments in there, that will hopefully be helpful to refer back to in the future, let’s start off by switching-up our mouse cursor paint brush effect thing. Go ahead and change your drawMouseCoordinates() function to match the following.

function drawMouseCoordinates(x, y) {
    //ctx.fillStyle = "#000000";
    //ctx.font = '1em sans-serif';
    //ctx.textAlign = 'right';
    //ctx.fillText(x + ',' + y, 597, 17);
    ctx.shadowColor = 0;
    ctx.shadowBlur = 0;
    //ctx.fillStyle = "rgba(238,96,61, 0.5)";
    //ctx.fillRect(x+getRandomNum(1,50), y+getRandomNum(1,300), -50, -50);
    
    ctx.strokeStyle = randomColor();
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 5;
    ctx.strokeRect(x+getRandomNum(1,5), y+getRandomNum(1,300), -50, -50);
}

Let’s switch-up our current mouse cursor paint brush effect a bit.

Cool, looking good, but our text is looking a little stagnant, no? Let’s add these 2 lines of JavaScript right above our init() function, which gives us two variables to randomize and hold the text X,Y coordinate location for us.

var textX = getRandomNum(0, 600);
var textY = getRandomNum(0, 300);

Then if we update the fillText section of our drawText() function, we can get our text showing up in random locations, upon each browser refresh.

ctx.fillText("xpoly", textX, textY);

Hmmm… ok, still kind of boring, eh? Alright, fair enough… Let’s try something a bit new and give it a bit of movement, but instead of just plopping the text in random locations everywhere, we will limit each new random X,Y coordinate location by a smaller amount.

function drawText() {
    textX += getRandomNum(-1, 1);
    textY += getRandomNum(-1, 1);
    ctx.shadowColor = "#000000";
    ctx.shadowBlur = 5;
    ctx.fillStyle = "#ffffff";
    ctx.font = 'bold 3em sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText("xpoly", textX, textY);
}

A bit of incremental randomness to our text X,Y coordinate locations.

Ok, so, you might have notice the negative number in the getRandomNum() part and could be thinking, if it is supposed to get a random number between negative one and one, then why does it seem like it only goes in one direction?If you were actually thinking this, then I’m officially impressed at how observant you are!

The reason is because, if you remember, our getRandomNum() function is min (inclusive) and max (exclusive), so that means we have to compensate for that by changing our drawText() function to something like the following. This provides the incremental offset that we need to get nice balanced up, down, left and right random movement of our text.

function drawText() {
    textX += getRandomNum(-2, 3);
    textY += getRandomNum(-2, 3);
    ctx.shadowColor = "#000000";
    ctx.shadowBlur = 5;
    ctx.fillStyle = "#ffffff";
    ctx.font = 'bold 3em sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText("xpoly", textX, textY);
}

Now with the incremental offset, we get some nice balanced movement in every direction.

There, now you have a text buddy drawing with charcoal, while you paint in colorful dots, haha! Sometimes this is referred to as a “random walk”, because it’s only adding a smaller random number to the existing random number, thus creating a walk-like movement effect.

Remember, to take a few minutes to tweak the numbers back-and-forth to get a feel for how changing a few things can change the look, for example: Want a pile of words vs. a charcoal block?

textX += getRandomNum(-12, 13);
textY += getRandomNum(-12, 13);

Increasing four numbers generates a pile of words instead of a charcoal block.

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