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.)
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)