paper.JS Tutorial - Full Page Canvas Sandbox Set Up

paper.js (paperJS) javaScript & paperScript Tutorial
by Brett Paufler 9-6-13
Full Page Canvas Setup - my default Sandbox for paper.js projects
(explanation after canvas, which tends to work best if it's at the top of the page, so you'll need to scroll down)

HTML - PAGE SETUP for a PAPERSCRIPT PROJECT

The bare bones basics to create a html webpage with a full page paperscript canvas is as follows (or get a link here).
Cut and paste into a text editor (might I recomend NotePad++ with JSLint) and save as myWebpage.html & you're good to go. To test, open the saved file with your favorite browser. Nothing could be easier. And this in itself goes a long way towards explaining why I started coding in JavaScript as apposed to any of the other countless languages out there.

The HTML code is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="code/paper.js"></script>
        <script type="text/paperscript" canvas="canvas">
            // 2013 Copyright Brett Paufler
            // paperscript code goes here
        </script>
    </head>
    <body>
        Critical! Important! Do Not Overlook!
        Copyright Brett Paufler 2013
        <canvas id="canvas" resize></canvas>
        Critical! Important! Do Not Overlook!
        Copyright Brett Paufler 2013
    </body>
</html>

One cannot overstate the value of the © Copyright Brett Paufler 2013 notice. I create content. And that is the first bit of information I put on every single item of content I create. This is my work. I want credit for it. Otherwise, I could be surfing (not very well mind you, but instead of practicing code, I could be practising that). Also note, you should have to scroll down to see the second copyright notice, that's how you know the canvas is working in full screen mode.

The line of code below is what loads the external paper.js source code. I keep my copy in a /code directory.
<script type="text/javascript" src="code/paper.js"></script>

This line of code assigns a canvas to the paperscript scope. In this case, I've ingeniously called the canvas 'canvas'. However, this scheme will fail when multiple scopes are involved. See my initial tutorial in this series for how to set up mutliple scopes.
<script type="text/paperscript" canvas="canvas">

This line of html creates a canvas, gives it an id ('canvas' in this case, ingenious, I know), and then resize sets it to full screen (though this is not fullproof).
<canvas id="canvas" resize></canvas>
Setting the canvas to full screen is a real easy way of optimitizing the output whether the viewer is logging on with a smartphone, tablet, 15", or collosal 27" monitor. In all cases, it's full screen. Or almost all cases. If you really want to be sure, don't have anything else between the body tags.
    <body>
        <canvas id="canvas" resize></canvas>
    </body>
If that's your html body, the canvas will be full screen no ifs ands or buts about it (at least until HTML 6.0 is released). Who knows what will happen then?

(So, if you're looking at this on a smartphone and the canvas isn't coming out right or not at all, it's because of the text above the canvas, the text below the canvas, or the other doodads on the page. Because everything interferes with everything else, it's the nature of code.)

TESTING THE CANVAS - DEFAULT PAPERSCRIPT CODE

How do you know the canvas works? Place something on it and see if you get a result. The feedback is imediate and one of the chief advantages of JavaScript and/or PaperScript:

I've covered this in depth in previous tutorials at this point (Circles for one), so creating a circles should be old hat by now (or at least, it is to me). So simple, I don't even think about it. Open this webpage with an editor (FireBug, for instance, or Inspect HTML in most browsers) and this is what you will see:
// place test object onto canvas
var CP = new Point(view.center);
var centerCircle = new Path.Circle(CP, 25);
centerCircle.fillColor = 'black';

In a PaperScript project, I almost always create a Point that represents the view.center, the center of the user's screen. And I call this Point CP. From there, it's just a matter of making a circle, since it's in the center, why don't we call it centerCircle?

I like using PointText objects for feedback. It's easy to create loads of these at once.

This line of code creates an array to hold all the PointText objects
// create array for PointText
var FBText = [];

While this for loop initializes the PointTexts and places them on the screen.
// create PointText Objects
for (i = 1; i <= 10; i++){
    FBText[i] = {};
    FBText[i] = new PointText(new Point(0, 20*i));
    FBText[i].fillColor = 'black';
}

Assigning values to the PointTexts takes a little more effort as each one needs to be assigned individually. But as they all have the same format, it's really just a bunch of cutting and pasting.
// Feedback about this paperscope object
FBText[1].content = 'The following lists all the properties for the current paperscope object:';
FBText[2].content = 'paper.version = ' + paper.version;
FBText[3].content = 'paper.project = ' + paper.project;
FBText[4].content = 'paper.projects (note the s) = ' + paper.projects;
FBText[5].content = 'paper.view = ' + paper.view;
FBText[6].content = 'paper.tool = ' + paper.tool;
FBText[7].content = 'paper.tools (note the s) = ' + paper.tools;
FBText[8].content = '';
FBText[9].content = 'var CP = new Point(view.center); // ' + CP;
FBText[10].content = 'var centerCircle = new Path.Circle(CP, 25); // ' + centerCircle;
Nothing is assigned to FBText[8] because I didn't need it, yet.
Notice how I list out both the name of the value as a string 'paper.version = ' and then call the actual object/property afterwards. This is an absolute must in a long list like this. And two or three days from now when I'll come back and proofread this tutorial, it's pretty much the only way I'll know what the values represent (without cracking open the base code and that's just annoying to have to do). So, I say, label those feedback values but good. It'll save you time (lots of time) in the long run. And for the most, it's the only way to understand what's going on under the hood.

Oh, and I don't know what most of those values mean any more than you do -- maybe a lot less. What I do know is that those are the properties that a paperscope is listed as having on the paper.js website, so I just went down the list and added them all. Though, with any luck, the output should provide some clue as to their utility and purpose, so feel free to give them a looksie.

And that's it for the day. I'm going to take a pass? Balk? Push? Honestly, I can't remember the word for when you're in an elimination match and you get a free pass to the next round. Anyhow, that's what I'm going to take tommorrow and post a project I did earlier for paper.js -- an Affine Transform Demo. The syntax under the hood for setting up the page isn't going to be the exact same as I just showed (as I did it a month or so ago), but it should give you a fairly good idea of what can be done simply and easily once a canvas is set up.

And then, I'll move on to some sort of interactive page demo on angles, paperscript coordinates, and that sort of thing (after onFrame, I forgot about onFrame).

previous (Two Point Methods)        paper.js tutorial index       next (Affine Transform Demo)

Back to BrettCode Home

Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)

paper.js official site = http://www.paperJS.org

© Copyright 2013 Brett Paufler
(Use code at your own risk. It's free. And in this world, you get what you pay for.)