JavaScript Coding Tutorial — Part 8 — Polygons and Volcanos!

In Part 7 we made some random and automatic paint brush effects for our text and that followed our mouse cursor. Let’s see about drawing one of my favorite things to draw… polygons!

Let’s dig right in and comment-out the drawText() and drawMouseCoordinates() function calls in our draw() function, and then add a new drawPolygon() function call, like the following.

drawPolygon();
//drawText();
//drawMouseCoordinates(mouseX, mouseY)

Then we can put in the following JavaScript code right below our draw() function to create our simple convex quadrilateral polygon or what you could call an isosceles trapezoid, by drawing from coordinate point to point.

function drawPolygon() {
    ctx.fillStyle = '#f89f44';
    
    ctx.beginPath();
    ctx.moveTo(280, 200);
    ctx.lineTo(200, 300);
    ctx.lineTo(400, 300);
    ctx.lineTo(320, 200);
    ctx.closePath();
    
    ctx.fill();
}

Kind of cute, right? Almost like a little orange volcano… In fact, let’s give our little volcano some kind of smoke cloud, by adding a couple lines.

function drawPolygon() {
  
    ctx.shadowColor = "#ccc";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = -150;

The shadowOffsetY tell the canvas to draw the shadow, but offset it away from our volcano and a negative number in the Y axis should move it up.

Also, we can go back up to the top of our code and set the canvas background color to a nice light blue, gives us a bit of a nature scene.

Our cute little orange convex quadrilateral polygon volcano with an offset smoke cloud.

ctx.fillStyle = "#88d3ff";

Not bad, but don’t we want it to come to life a little? Sure… let’s, go ahead and use what we did previously for a sort of random-walk for the top part of our volcano to simulate it’s erupting and changing shape.

var upperLeftX = 280;
var upperLeftY = 200;
var upperRightX = 320;
var upperRightY = 200;
var upperRightX = 200;
function drawPolygon() {
    ctx.shadowColor = "#ccc";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = -150;
    ctx.fillStyle = '#f89f44';
    
    ctx.beginPath();
    ctx.moveTo(upperLeftX, upperLeftY);
    ctx.lineTo(200, 300);
    ctx.lineTo(400, 300);
    ctx.lineTo(upperRightX, upperRightY);
    ctx.closePath();
    
    ctx.fill();
    
    upperLeftX += getRandomNum(-2, 3);
    upperLeftY += getRandomNum(-2, 3);
    upperRightX += getRandomNum(-2, 3);
    upperRightY += getRandomNum(-2, 3);
  }

Adding some of our previous random-walk code, but the shape isn’t right.

Ummm… ok, the movement is kind of cool, but the shape starts off like some strange self-intersecting polygon…

Ugh… After what felt like hours of searching through our code… I finally found the issue! Did you? Looks like we accidentally put upperRightX variable in twice with two different values!

var upperRightX = 320;
var upperRightY = 200;
var upperRightX = 200;

Yikes! To avoid this (redeclaration) in the future, we’re gonna change our keyword “var” to “let” throughout our entire code, so that if we try to create or declare a variable a second time it will at least be more clear that there’s a mistake or this sort vs. us maybe thinking we drew the shape wrong.

let upperLeftX = 280;
let upperLeftY = 200;
let upperRightX = 320;
let upperRightY = 200;

After replacing all of the var keywords with let, it looks good after removing the duplicate line.

Much better, but needs more fire, right?! After all, it’s supposed to be a volcano, so… Let’s create a gradient fill, which will let us give the fill style two colors and then it will gradually transition from one color to the next (in our case red to orange).

// context.createLinearGradient(x0,y0,x1,y1);
let grd = ctx.createLinearGradient(300, 150, 300, 300);
grd.addColorStop(0, "#ff0000");
grd.addColorStop(1, "#f89f44");
ctx.fillStyle = grd;

We can add a linear gradient fill to add some hot lava and fire to our volcano.

There we go! If I squint my eyes hard enough, I can almost see the lava exploded off to the side of the volcano. Cool huh?! (I mean… err… more like real hot!)

Now, I highly suggest you experiment with the gradient fill to help you understand it better. Keep in mind that you are giving two coordinate points, each with an X,Y location and it fills in the gradient into the shape based on those start and stop locations.

Try changing the location of the gradient points and see how it changes the way the gradient shows-up as your volcano erupts, or try crazy color combinations and see how the two colors blend together.

Alright… that’s the end of the JavaScript Coding Tutorial — Part 8.