Repeated patterns

This section will cover turning our window into a set of blocks with their own X and Y coordinates, then drawing with another set of coordinates within each block.

The new coordX and coordY will replace the x/y we're used to.

The block that we draw within will be given it's x/y coordinates with cvX and cvY.

C_C is the constant spacing we use - the height and width of each block.

What our DO loop is doing is -

• drawing a filled circle in each block
• moving to the next block to the right until we hit the width of the canvas
• moving to the next row and back to the left

The checks for a block being at the end of it's line adds the constant spacing so we don't have circles half on the screen and half off the screen.

function drawShapes() {

    var coordX = 1,
        coordY = 1;

    var cvX = 1,
        cvY = 1;
    var C_C = 25,
        R = 12.5;

    do {
        coordX = C_C * cvX;
        coordY = C_C * cvY;

        drawCircle(coordX, coordY, R);

        cvX++;

        if (coordX >= w - C_C) {
            cvX = 1;
            cvY++;
        }
    }

    while (C_C * cvY + C_C < h);
}

Render a Heart (Worthy)

From placing pixels on the screen, let's move on to a couple of new Canvas concepts.

All of the dimensions (x, y, and radius) are fractions of the screen dimensions so that our heart will look like a heart as long as the canvas parameter is even.

We'll use stroke() often, and only have to set the color once, so we do it early in the code.

c.beginPath() is what we do before starting a path to move to the correct x/y rather than 0/0.

Canvas arcs accept (x, y, radius, startCircle, endCircle, clockWise) as parameters.

• We pass in x's and y's that are simple
• We calculated radius earlier that is (1/2)*(x2-x1) so they meet each other evenly
• Starting at 0, we work clockwise(true) toward Math.PI to create a full arc (Math.PI*2 makes a circle)

1)moveTo() and 2)lineTo() is the same as 1)place canvas stroke/fill start at x/y and 2)stroke/fill toward given x/y

Then we finally apply the "stroke", which actually applies the arcs and lines to the canvas.

function drawShapes() {

radius=w/6;

c.strokeStyle="red";

c.beginPath();

c.arc(w/3,h/3, radius, 0, Math.PI, true);

c.moveTo(w*(2/3)+radius, h/3);

c.arc(w*(2/3), h/3, radius, 0, Math.PI, true);

c.moveTo(w/3-radius,h/3);

c.lineTo(w/2,h*(3/4));

c.lineTo(w*(2/3)+radius, h/3);

c.stroke();

}

If you need a radian chart, examples, or any other quick references, www.mathwords.com is a great tool to use and I whole-heartedly endorse www.coolmath.com for learning concepts.

Placing pixels in the window

Moving onto the first rendering - since we're going to work with and change our coordinates often, let's declare and initialize an x and a y.  Loop through and "put a pixel" (fillRect that is 1x1) in our current x and y locations, then add 1 to y to move down the screen.  Once we've reached the bottom, add a number to the x coordinate to start all over again.  Continue until x is still within the width of the screen.

Replace the following code with the drawShapes(){} method found at my template.

function drawShapes() { var x = 10, y = 0, lineColor = randomColor(); do { c.fillRect(x, y, 1, 1); c.fillStyle = lineColor; y++; if (y > h) { x += 10; y = 0; lineColor=randomColor(); } } while (x < w); }

Intro to Template

This blog will cover designs using the JavaScript canvas - useful for web coding.

I have a template set up in an interactive environment over at FiddleSalad, the link is http://fiddlesalad.com/javascript/html-canvas-template/

A couple quick details about the template -

• The method main() is our entry into the program to keep the code clean and well-formed.
• I've added a couple of useful methods that you'll find useful such as createBorder() and randomColor() which do what the name implies.  Note that when you use drawCircle() you'll have to include the (x,y,r) dimensions.
• setInterval() is a time-based method that we'll touch on in later posts.  For now, select entire drawShapes() method and replace with the code given.

For anything else, refer to a beginner Javascript tutorial.  I recommend TheNewBoston.org (->"Tutorials" tab->JavaScript)

Here's a picture of the layout I use, there's a lot of windows that just clutter the screen - just give half of the screen to the "JavaScript" window and the other half to the "Result" window.

var c, w, h;

main();

function main() {

    c = document.getElementById('canvas').getContext('2d');
    h = canvas.height;
    w = canvas.width;

    createBorder();
    drawShapes();
}

function drawShapes() {

    setInterval(function() {

        //=========DRAW HERE=================


    }, 500);
}

function randomColor() {
    switch (Math.floor(Math.random() * 8)) {
    case 0:
        return "yellow";
    case 1:
        return "green";
    case 2:
        return "blue";
    case 3:
        return "red";
    case 4:
        return "orange";
    case 5:
        return "black";
    case 6:
        return "brown";
    case 7:
        return "purple";
    default:
        return "white";
    }
}

function drawCircle(x,y,r) {
    c.beginPath();
    c.arc(x, y, r, 0, Math.PI * 2, true);
    c.fillStyle = "black";
    c.fill();
}

function createBorder() {
    c.moveTo(0, 0);
    c.lineTo(0, h);
    c.lineTo(w, h);
    c.lineTo(w, 0);
    c.lineTo(0, 0);
    c.stroke();
}