paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 10-7-13
JavaScript Tutorial & paper.js primer
Starting with Rasters
(It is my intent to work my way through the JavaScript paper.js library. If this page
doesn't cover the aspect of JavaScript's paper.js that you are interested in, please
see complete index of my paper.js
tutorials completed thus far.)
Setting Up a Raster Object
Don't ask me why they call them Rasters. Rasters are
pictures. Nothing more, nothing less. Well, maybe more and
maybe less, but if so, the fine line distinction has escaped me thus
far.
A Raster is called by this code:
var myNewRasterObject = new paper.Raster(picLocation, position);
where picLocation is the location of the image file in your directory structure
and position is the location on the screen (default upper left, otherwise)
In the code below, to hold the URL location of the image, I use a variable: var evilCatSmall = "images/evilCatSmall.png"; This
is standard practice and saves all sorts of problems in the long
run. When in doubt, save strings as variables rather than
utilizing directly.
JPG, GIF, and PNG image file types are supported in paper.js, probably others.
The circle around the pictures (below), is just to add context. It's not required.
Rasters Rotate()
Once loaded, the image can be modified like any other object.
Unsuprisingly, the code below rotates the raster object by 45 degrees. thisRaster.rotate(45);
Before doing anyting fancy with the Raster, however. I would
recomend making sure that it has loaded. Personally, I find it
difficult to remember when a "/" is
required and when it can be omitted. Leave one out or add an
extra in and the code won't fire. In a debugger, if the file path
is wrong, it will tell you
that the resource isn't available (cannot be located... because the
location is wrong, usually).
Rasters Scale()
.rotate(), .scale(), .clone(), and all the standard paper.js object methods are available to rasters.
Anything having to do with a path, segment, or point, however, is not.
And though, I do believe it's possible to add a raster to the end of a
path, that's not something I'm planning on exploring anytime soon.
I went back to this tutorial layout, becuase I thought it might be
more appropriate for the introduction of a new concept/command.
But having done that, I'm going to go back to the fullScreen Canvas
layout and plug in all the Raster.properties to see what sort of output
I can get (coming to you live in the next tutorial).
Oh, and if I can figure out how to do it, I hoping to be able to cobble
together a meme generator. (Or, so I was. Rather, I think
it might be more helpful to output the canvas to a image file, so I'm
going to focus on that instead, but the required tools are likely very
much the same. Once done, we (or I) should be able to share the
output of a code file (via a jpg, png, or animated gif) without
revealing the underlying code required to make said animation.
Not a big concern at this level of programing, but we all have
dreams. And if I ever make something cutting edge cool, I want to
be able to profit from it.
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)