paperJS walk through by Brett Paufler (8-21-13)
Setup Page (in which the design of a code sample page is discussed)

(It is my intent to work my way through the paperJS library, so if page doesn't cover the aspect of paperJS that you are interested in, please see the complete index of my paperJS tutorials completed thus far)

SETTING UP A CODE SAMPLE WEB PAGE

SETTING UP THE ELEMENTS

It took me a long time to figure out how to show code on a web page and then run it.  It still doesn't look very pretty; but eventually, I'll figure that out, as well.  But not today.

This page shows the bare bone basics of getting a code sample for paperJS to run on a web page.

First, we need to create a few HTML elements:

The TextArea:
<textarea id="myTextArea2" name="myTextArea2" style="height: 200px; width: 500px;">
//Copy that appears in TextBox Goes Here
</textarea>

The Button:
<button id="Button2" onclick="DrawCanvas('canvasArea2', 'myTextArea2');" type="button" style="height: 50px; width: 500px;">Draw Canvas #2</button>
(Note: the onclick function call to DrawCanvas() has two passed arguments.)

The Canvas:
<canvas id="canvasArea2" name="canvasArea2" style="height: 200px; width: 500px;"></canvas>

I have three TextAreas, Buttons, & Canvases on the page.  The only code difference between them is the number at the end of the id: myTextArea1, myTextArea2, myTextArea3.

(Samples below do not illustrate setting up the page, but rather show, paperJS samples for the Path.Circle object, to be covered in depth on a later web page in the series.)

I also should note:  I write this copy in Kompozer, edit my JavaScript in Notepad++ (with jsLint), and use FireBug in my browser to debug.  It's perhaps not the best solution, but it's what I currently use.





SETTING UP THE FUNCTION WHICH IS CALLED onclick()

Each Button calls the following DrawCanvas() function onclick, passing both the associated TextArea & Canvas Element as an argument.

If you looked into the HTML for this web page, this is exactly what you would see word for word, though if you have a good text editor running, the color scheme would likely provide more information.
// Evaluates code in Text area and draws to referenced Canvas
function DrawCanvas(thisCanvas, thisTextArea){
    // initializes paperJS scope, probably a way to NOT have to do this everytime
    // but I don't know what it is
    paper.setup(document.getElementById(thisCanvas));
    paper.project.activeLayer.removeChildren();
    document.getElementById(thisCanvas).value = eval(document.getElementById(thisTextArea).value);
    paper.view.draw();
}

From the above, this line tells the function which canvas to use:
paper.setup(document.getElementById(thisCanvas));

This line clears the Canvas, making errors easier to see (otherwise if an error is thrown, JavaScript stops evaluation and nothing would change on the Canvas).
paper.project.activeLayer.removeChildren();

This line is the eval() function that transforms the written text into JavaScript and then evaluates it.  It has been said that 'Eval() is evil.'  In fact, jsLint throws a debugging flag error for every eval() on a page.  Still, this whole website is solely JavaScript, I use no Cookies, PHP, session tokens or other, and eval() could always be inserted by a scripting file, so I don't see what extra vulnerability utilizing eval() inserts into this application.  Still, 'eval() is evil.'  So, avoidance is usually recommended.  I searched for a week for a reasonable alternative.  And didn't find it.  So, I'm using eval.  It's simple.  It works.  This website is so basic and rudimentary (once again, no PHP, SQL, sessions, or cookies), I can't see the harm.  Perhaps I will be rudely enlightened some day...
document.getElementById(thisCanvas).value = eval(document.getElementById(thisTextArea).value);

This line draws the view.  Not strictly required, but if not utilized, the view tends not to get drawn until the canvas is brought into focus (by onMouseOver, or whatever).
paper.view.draw();

(Note: These samples are all written in JavaScript, as apposed to PaperScript.  If utilizing PaperScript, the paper prefix can be omitted in the code.  But I am unaware of any harm in including the prefix even if running as a PaperScript type <script>.)
var ThisPoint = new paper.Point(50,50);
var ThisCircle = new paper.Path.Circle(ThisPoint, 25);
(.paper per above is redundant in PaperScript, but is required in JavaScript)






PRERUNNING THE SCRIPTS onload="

Lastly, I don't want to have to push a button when the page loads to see the initial evaluation of the script.  This is especially annoying during debugging.  So, this function runs onload.

The following is inserted into the HTML body header, so as to include the onload fuction:
<body onload="initialDraw();">

And the following is the initialDraw() function that is called and runs.  Each of the Canvas Elements is preloaded with the appropriate evaluation as directed by the instructions proved in the TextArea.  Probably sounds overly complicated.  An easier way to look at it is once the page is ready, it's as if the first thing that happens is each of the buttons push themselves, calling the appropriate function.

// graphics are drawn to Canvas when page loads
function initialDraw(){
    DrawCanvas('canvasArea1', 'myTextArea1');
    DrawCanvas('canvasArea2', 'myTextArea2');
    DrawCanvas('canvasArea3', 'myTextArea3');
}





Truthfully, I don't know how helpful all of that was.  But it certainly took me a while to figure out.  And until I feel the need to update the layout of the pages, from here on out it's all paperJS: working examples of each and every property and function (or so, that is the plan).

(Oh, perhaps should mention the ads briefly.  The ads are courtesy (or by) Google AdSense.  I could not get them to work until I switched to an asynchronous format.  Also it took like a month for the account to clear initial set-up, which probably says more about how much traffic I was getting (i.e. none) than anything else.  So, individual results may differ.  I like the fact that the ads track the number of page views, myself.)


previous(none)          paperJS tutorial index       next (Circles)

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