HTML5 Canvas & Processing JS
When I first sat down to redesign my personal site I knew that I wanted to incorporate HTML5 Canvas somewhere in the layout. The problem was that I hadn't worked with canvas before and had to start from scratch. I went through the pain of learning every aspect of adding text, drawing shapes, importing image, etc... before I found the amazing canvas framework Processing.JS The content of this article was originally posted in Joey Cadle Allgaier's blog. For those who don't quite fully grasp what HTML5 Canvas check out the W3Schools entry for the element before reading any further, but it's basically an element that defines graphics. Canvas Basics Adding a canvas element is as simple as adding the below markup. The canvas element alone acts as a block level element with all children hidden without the use of javascript to draw text, objects, images, etc... Please note that HTML5 markup and the canvas element is only support by modern browsers such as Firefox (1.5+), Safari (1.3+), Chrome, Opera (9+), and Internet Explorer (9+). Obviously we don't want to go adding canvas elements without some type of alternative display for browsers that do not support canvas rendering. Thankfully all graphics rendered via canvas are layered above any markup contained within the element. Here's how we degrade canvas so that browsers such as Internet Explorer 8 know they need to stop being lazy and upgrade to a more modern browser. First we'll add a link to an HTML5 element shiv for any user with a browser later than IE9 in the portion of our document, adding the element to our stack of recognized html markup: Now let's update our canvas element to target non-modern browsers: Please upgrade your browser to something newer, like Google Chrome The above markup lets anyone using a non-modern browser that they should probably upgrade their browser. You can put substitute text with an image if you want. For instance, any visitor to this site using a browser that doesn't support HTML5 Canvas is met with a standard JPEG logo as opposed to the canvas alternative. CSS Styling Canvas It's always good practice to style your canvas element as until drawing has been accomplished the styling will act as a kind of start screen. While we're at it, we'll also style the child within our canvas element. Styling the child elements inside of your canvas is important so that in non modern browsers we're taking up the same amount of space. #myCanvas, #myCanvas p { width: 460px; height: 250px; background-color: #f5f5f5; color: #555; text-align: center; } In modern browsers our canvas element now displays exactly as we styled it, and non-modern browsers also show a similar styling but with a note for the user to upgrade their browser. Take note that css such as text coloring and background coloring is only useful until our canvas element is initialized. Once initialized the things we draw onto our canvas can not be styled via css. Now that we've covered the basics, how do we go about drawing to the canvas? We could use modern javascript to draw to the canvas, but in this article we're going learn how to use the javascript framework Processing.JS to handle all our drawing. Getting Started With Processing.JS Processing.JS is a port of the Processing Visual Programming Language developed by Ben Fry and Casey Reas designed for use on the web. You develop code using the processing language and processing.js transforms those actions into canvas elements. You can download the latest version of Processing.JS at their website: http://processingjs.org. Let's get started by adding a link to processing.js in the portion of our document: Processing.JS now adds functionality for us to reference our canvas element to a file (file-type: .pde) in which all of our processing code exists. Let's reference our code by adding the "data-processing-sources" attribute to our canvas element: Please upgrade your browser to something newer, like Google Chrome Now all we have to do is create the source file referenced, (in this case "myProcessingCode.pde") and add our Processing code. Writing Processing Code We're going to cover a few basic drawing methods such as shapes, text, and images, but before that I want to go over the two core functions of Processing.JS: setup, and draw. The setup function contains all of the code we want to run when our canvas is initialized. Most importantly this is where you set such key values such as our canvas element's size and framerate. Let's go ahead and set the size, framerate and background of our canvas element: void setup() { size(500, 250); background(245); framerate(30); } In the above code we're telling Processing.JS to set the size of our canvas to a width/height of 500/250 and to set the background of our canvas to an rgb value of 245, 245, 245 (#F5F5F5) and to set our canvas framerate (essential to looping, which we'll discuss later), all at canvas initialization. Note that all Processing functions are designated with "void" and in this case Processing.js recognizes the setup function as the function to be ran at intialization of our canvas. Adding a custom function is simple: void myFunction() { // do something here } Our initial setup function sets values to what our css styling is for background-color and size and our canvas now mimics what we saw before adding any processing code. Now we'll add a 50x50 pink rectangle with a 1 pixel white stroke to a random position of our canvas using by modifying our setup function. void setup() { size(500, 250); background(245); framerate(30); color pink = #ffb5b5; color white = #ffffff; fill(pink); stroke(white); int positionX = int(floor(random(20, 408))); // 20 pixel left and right padding int positionY = int(floor(random(20, 158))); // 20 pixel top and bottom padding rect(positionX, positionY, 50, 50); // x, y, width, height } Going over each function we see that we first declare some color variables using the following syntax: color myColor = #hexvalue; Always assign complicated colors to color variables so that we can link them to methods such as fill, background, and stroke. You can forego the use of hex values and instead use rgb values as so color myColor = color(255, 181 , 181);. Next we declare our fill by using the fill() method. The color value we assign to this method will be the fill color of any shape method we then call. This also applies to our stroke() method. If you do not call fill() and stroke() before declaring the shape the shape will have a default fill color of white and a default 1 pixel stroke of black. If you don't want to fill or stroke the next shape drawn you can do so by replacing fill() and stroke() with noFill() and/or noStroke() methods. noFill(); // the next shape will not be filled noStroke(); // the next shape will not be stroked We can also declare if we want our shape to be antialiased or "smoothed" (no smoothing set by default) or change the weight of our stroke (default stroke weight is 1px) by calling the smooth() and strokeWeight() methods: smooth(); // antialias our shape strokeWeight(10); // set the stroke weight to 10 pixels We now declare a positionX and positionY variable to randomize where our rectangle should appear by using the data method int, since we know our value will be an integer, and we'll make use of the random() method. The random method can and will return a floated value so we'll use the floor() method to round the number returned by random() down. int myInt = int(floor(random(start, end)) Note that in my example I know that the size the canvas is 500x250 so to ensure that my rectangle is positioned at least 20 pixels from the border of the canvas edges my starting value is 20 and my ending value is 500 (canvas size) minus 40 (20 pixel left/right padding) minus 52 (width/height of rectangle including 1pixel stroke) for the position of X and 250(canvas size) minus ... for the Y position. You, however, can use any value you see fit or declare a non random value like so int positionX = 10; The only thing left is to create our shape. We've chosen to create a rectangle by using the rect() method: rect(x, y, width, height); Remember declaring just a bare rect() without setting any fill() and/or stroke() will result in a shape you can't see, so don't forget to call those methods as stated earlier. If you hate rectangles you can change the shape by changing the rect() method to ellipse(), line(), point(), quad(), arc(), or triangle() ellipse(x, y, width, height); line(xStart, yStart, xEnd, yEnd); // doesn't auto stroke point(x, y); // doesn't auto stroke quad(x1, y1, x2, y2, x3, y3, x4, y4); // x,y position of each corner of a rectangle arc(x, y, width, height, start[radian], stop[radian]); // PI radians with or without math operators eg: PI, PI/2, TWO_PI-PI, PI+TWO_PI, etc... triangle(x1, y1, x2, y2, x3, y3); // x,y of each point of a triangle For more 2D shape methods (including curves) check the reference section of the Processing.JS website. Shapes via SVG If you're familiar with SVG and are constantly working with it you'll want to know that you can define shapes via an SVG file by using PShape Datatype: PShape mySVG; // set the PShape datatype to the mySVG variable mySVG = loadShape("mySVGfile.svg"); // load your .svg file using loadShape(); smooth(); // antialias the shape shape(mySVG, x, y, width, height); Note you must always load your svg file using the loadShape() method before calling the shape() method. Adding Text Processing.JS provides us with the PFont Datatype and the methods loadFont(), textFont(), and text() methods. Font loading in canvas can be a bit complex as, despite the ease of the loadFont() method, font support for canvas varies across browsers. Firefox supports canvas fonts the best, but has a pre-defined list of fonts. As of now it's best to use a surely installed font (such as Arial) or to use the PFont_list() method to check the fonts a user has available to load. For more information see the Processing.JS reference to PFont_list(). Let's add some text to our canvas: void setup() { size(500, 250); background(245); framerate(30); color pink = #ffb5b5; color white = #ffffff; fill(pink); stroke(white); int positionX = int(floor(random(20, 408))); int positionY = int(floor(random(20, 158))); rect(positionX, positionY, 50, 50); fill(64); // color the text #404040 rgb(64, 64, 64) PFont fontArial = loadFont("arial"); // load the Arial font textFont(fontArial, 32); // set the font-size of fontArial to 32 point text("Joey Cadle Rocks!", 110, 60); // Add the text to canvas at x, y position } The draw() Function and Image Loading Processing.JS's draw() function is where most of your drawing should take place. The biggest thing to note is that Processing.JS automaticly loops the draw() function at whatever frameRate() you specify in your setup(). Because of this automatic looping we're given the loop() and noLoop() methods. In this next append to our code we'll be loading images by making use of the PImage Datatype and the methods loadImage(), requestImage(), image(), and get(). Lets use the draw() function to handle our drawing from now on and let's load an image using requestImage() as opposed to loadImage() as loadImage() freezes canvas until the image is loaded while requestImage() does not. Here's a look at just the image loading code: PImage img; // PImage for preloading PImage part; // PImage for display img = requestImage("yourImage.png"); // accepted formats are .jpg, .gif, and .png part = img.get(); // get all pixels from the image image(part, 20, 20); // display the image at x, y coordinates Note that we're now going to initialize our PImage and PFont objects outside of our setup() and draw() functions so that they're accessible throughout our script. PImage img; PImage part; PFont fontArial = loadFont("arial"); void setup() { size(500, 250); background(245); frameRate(30); img = requestImage("yourImage.png"); } void draw() { background(245); part = img.get(); image(part, 20, 20); color pink = #ffb5b5; color white = #ffffff; fill(pink); stroke(white); int positionX = int(floor(random(20, 430))); int positionY = int(floor(random(20, 180))); rect(positionX, positionY, 50, 50); fill(64); textFont(fontArial, 32); text("Joey Cadle Rocks!", 110, 60); noLoop(); // Tell Processing.JS to stop looping. } Now we're getting down the heart of Processing.JS by utilizing it's two main features. Note that most methods, including noLoop() and loop() are accessible in other frameworks such as JQuery. You can do things like: $('.some_div').click(function() { loop(); } By specifying a noLoop() in our draw() function we're able to Making Use of Looping We're going to add some animation and some event listing for a mouse movement. We'll remove our rectangle and choose to move our image and text with our mouse. This can be done by calling the mouseMoved() function and making good use of the looping of our draw() function. Our ability to have our image and text follow our mouse hinges on the fact that Processing.JS consistently holds the current position of our mouse in the variables mouseX and mouseY. We'll add 5 frame delay to our movement with some simple math. PImage img; PImage part; PFont fontArial = loadFont("arial"); void setup() { size(500, 250); background(245); frameRate(30); x = 20; // set initial x position y = 20; // set initial y position mX = x; // set mouseX to above x mY = y; // set mouseY to above y delay = 5; // set the frames we want to delay movement img = requestImage("yourImage.png"); } void draw() { x += (mX - x) / delay; // reset our x with current x position minus mouseX position and delay it y += (mY - y) / delay; // reset our y with current y position minus mouseY position and delay it fontX = x + 90; // add the width of our image to ensure its to the right (in the demo case: 90) fontY = y + 40; // add the height of our image to ensure its level (in the demo case: 40) background(245); part = img.get(); image(part, x, y); // draw our image at x, y based on x,y values above. fill(64); textFont(fontArial, 32); text("Joey Cadle Rocks!", fontX, fontY); // Add the text to canvas at fontX and fontY position } void mouseMoved() { mX = mouseX; // set mX to our mouseX position mY = mouseY; // set mY to our mouseY position } Processing.JS has other built in event listeners such as the mouseClicked() and mouseDragged functions. Check out their website for a full list of listeners, but as far as we're concerned, our canvas is now animated and interactive! For a full demo check out the live example here. Conlusion This article is intended to show simplified use of Processing.JS. Do not in anyway take this article and use it to judge the limits of Processing.JS or Canvas in general. The native canvas API is incredibly powerful, as if Processing.JS, this article is just a taste of what you can achieve. Thanks for reading. Short URL: http://bit.ly/z25Lvg Source: http://joeycadle.com/blog/article/1/2012/22/01/html5-canvas-and-processing-js
January 26, 2012
·
9,913 Views
CORE
