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.

//Circle Code var CP = new paper.Point(paper.view.center); var ThisCircle = new paper.Path.Circle(CP, 50); ThisCircle.strokeColor = 'black'; //Raster Code var evilCatSmall = "images/evilCatSmall.png"; var thisRaster = new paper.Raster(evilCatSmall, CP); // For Feedback FBText1.content = evilCatSmall; FBText2.content = thisRaster; FBText3.content = CP;
Draw Canvas #1



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 Rotate var CP = new paper.Point(paper.view.center); var ThisCircle = new paper.Path.Circle(CP, 50); ThisCircle.strokeColor = 'black'; var evilCatSmall = "images/evilCatSmall.png"; var thisRaster = new paper.Raster(evilCatSmall, CP); thisRaster.rotate(45); // For Feedback FBText1.content = thisRaster.id; FBText2.content = thisRaster.type; FBText3.content = thisRaster.position;
Draw Canvas #2



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.

// Rasters Scale var CP = new paper.Point(paper.view.center); var ThisCircle = new paper.Path.Circle(CP, 50); ThisCircle.strokeColor = 'black'; var evilCatSmall = "images/evilCatSmall.png"; var thisRaster = new paper.Raster(evilCatSmall, CP); thisRaster.rotate(-45); thisRaster.scale(2); // For Feedback FBText1.content = thisRaster.size; FBText2.content = thisRaster.image; FBText3.content = thisRaster.source;
Draw Canvas #3

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.




previous  (last of the BubbleDrop Tutorials)        paper.js tutorial index       next (RastersRevisited)


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