Wednesday, December 9, 2009

DPS909 Project – Processing.js – v0.3

And It's A Warp...
… for this phase. This is the last release for this semester's DPS909 project. For this bit strokeCap() and strokeJoin() were ported from Processing to Processing.js. The meat of what was done may be found in previous posts linked to above, so I won't occupy everybody again by repeating it here (after all, it's exam time!)
So without further ado, here are pertinent the pertinent links:

Links to Elsewhere
Links to the Past
And Away!
That's it for now. With a little luck I'll see you right back here in a months time for DPS911.

Wednesday, December 2, 2009

Processing.js – strokeJoin()

Copy and Pasting,,, Works!
Hot on the heels of strokeCap() strokeCap() is strokeJoin(). This blazingly fast turn around was accomplished by the time honoured method of shamelessly lifting previous work wholesale and tweaking.
Observe: here we have strokeCap():

p.strokeCap = function strokeCap( set ){
if ( set == p.ROUND ) {
curContext.lineCap = 'round';
} else if ( set == p.SQUARE ) {
curContext.lineCap = 'butt';
} else if ( set == p.PROJECT ) {
curContext.lineCap = 'square';
}
};


And here we have strokeJoin():

p.strokeJoin = function strokeJoin( set ){
if ( set == p.MITER ) {
curContext.lineJoin = 'miter';
} else if ( set == p.BEVEL ) {
curContext.lineJoin = 'bevel';
} else if ( set == p.ROUND ) {
curContext.lineJoin = 'round';
}
};


As we can see strokeCap() gained a very close sibling in strokeJoin()!

Newborn Boo-boos
This is not to say the birth of the younger didn't affect the elder. Originally the constants for strokeCap() and strokeJoin() were defined separately, like so:

// Stroke cap constants.
p.ROUND = 0;
p.SQUARE = 1;
p.PROJECT = 2;

// Stroke join constants.
p.MITER = 0;
p.BEVEL = 1;
p.ROUND = 2;


p.ROUND was redefined for strokeJoin() and ended up conflicting with strokeCap()'s p.PROJECT. This caused... incorrect behaviour in an otherwise well behaved strokeCap().
The problem was solved simply be consolidating the constants into:

// Stroke cap and join constants.
p.ROUND = 0; // Used by both cap and join.
p.SQUARE = 1; // Used by cap.
p.PROJECT = 2; // Used by cap.
p.MITER = 3; // Used by join.
p.BEVEL = 4; // Used by join.


Pretty Pixels!
To end off here is the code in action compared to the results of the same code in the Processing Development Environment (PDE).



On a side note I've noticed the Processing website's examples are imprecise; their code and images do not match up. The images show the result of strokeCap(SQUARE) or strokeCap(PROJECT) being called, but these calls are missing in the example code.