norm + lerpcolor

76 views
Skip to first unread message

vitorsilva

unread,
Nov 13, 2008, 3:42:49 AM11/13/08
to Processing.js
so i'm also running through ben fry's "visualizing data" book
examples.
on pag.37 he mentions 2 functions (norm and lerpcolor) that i can't
find on processing.js
i wonder if anyone has already ported those functions to processing.js
if not does anyone know where i can find the original processing
source code?
i tried to look at their repository at
http://dev.processing.org/source/index.cgi/trunk/processing/core/src/processing/
but since i wasn't able to find any kind of search i'm a bit stuck...

F1LT3R

unread,
Nov 13, 2008, 11:26:50 AM11/13/08
to Processing.js
norm() can be calculated in processing like this...

p.norm = function norm( aNumber, low, high ) {
var range = high-low;
return ((1/range)* aNumber) - ((1/range)*low);
};

I added it to my processing.js source. You can see the code here:
http://github.com/F1LT3R/processing-js/tree/master/processing.js
The official up-to-date source is at: http://github.com/jeresig/processing-js/tree/master

It would save you time to just go there, see where the norm() function
is, and copy that bit into your Processing.js; because my version of
processing.js is even messier than my bedroom: so your code would
probably do some weird, unexpected and throughly annoying things... if
it worked. :P

And you can lerp() like so...

p.lerp = function lerp( value1, value2, amt ) {
var range = value2 - value1;
return ( range * amt ) + value1;
}

Code for lerp() also added to source here:
http://github.com/F1LT3R/processing-js/tree/master/processing.js

Hope that works for you,

-Al

http://hyper-metrix.com/processing/docs/




On Nov 13, 3:42 am, vitorsilva <vitorsilva....@gmail.com> wrote:
> so i'm also running through ben fry's "visualizing data" book
> examples.
> on pag.37 he mentions 2 functions (norm and lerpcolor) that i can't
> find on processing.js
> i wonder if anyone has already ported those functions to processing.js
> if not does anyone know where i can find the original processing
> source code?
> i tried to look at their repository athttp://dev.processing.org/source/index.cgi/trunk/processing/core/src/...

Vitor Silva

unread,
Nov 13, 2008, 1:45:27 PM11/13/08
to proces...@googlegroups.com
cool. thanks.
did you created it from scratch or did you "translated" from the processing java source?
i also need lerpColor, but i imagine i could do it to if only i had the processing java source...

2008/11/13 F1LT3R <alistair...@me.com>



--

http://blog.osmeusapontamentos.com/

F1LT3R

unread,
Nov 13, 2008, 3:49:05 PM11/13/08
to Processing.js
The annoying thing was, I couldn't find a norm() or lerp() examples
function in any other language, so I did have a quick look for the
source but I soon got lost in endless, unfamiliar Java files. In the
end I gave up did it side-by-side in the processing application. So...
there may be a faster/better/harder way of doing the math, but I don't
have that kind of education so I think a comparison with the actual
source would probably by a very good idea if the functions make it in
to Processing.js.

Here's the actual Processing sketch if that helps you at all:

void setup(){
size(200,200);
}

void draw(){
// myNorm(40, 570, 1550);
myLerp(25, 50, 100);
exit();
}
void myLerp(float value1, float value2, float amt){

float range = value2 - value1;
float thisLerp = (range*amt)+value1;
println( thisLerp );
println( lerp(value1, value2, amt) );
}

void myNorm(float aNumber, float low, float high){
float range = high-low;
float thisNorm = ((1/range)* aNumber) - ((1/range)*low);
// float thisNorm = ;
println( thisNorm );
println( norm(aNumber, low, high) );
}



On Nov 13, 1:45 pm, "Vitor Silva" <vitorsilva....@gmail.com> wrote:
> cool. thanks.
> did you created it from scratch or did you "translated" from the processing
> java source?
> i also need lerpColor, but i imagine i could do it to if only i had the
> processing java source...
>
> 2008/11/13 F1LT3R <alistairmacdon...@me.com>

F1LT3R

unread,
Nov 14, 2008, 1:46:24 AM11/14/08
to Processing.js
Hi Vitor,

I got lerpColor() working in Processing.js. It turned out to be pretty
simple once I'd figured out how to do lerp(), I just call the function
on each channel like so:

p.lerpColor = function lerpColor( c1, c2, amt ){

// Get RGBA values for Color 1 to floats
var colors1 = p.color(c1).split(",");
var r1 = parseFloat( colors1[0].split("(")[1] );
var g1 = parseFloat( colors1[1] );
var b1 = parseFloat( colors1[2] );
var a1 = parseFloat( colors1[3].split(")")[0] );

// Get RGBA values for Color 2 to floats
var colors2 = p.color(c2).split(",");
var r2 = parseFloat( colors2[0].split("(")[1] );
var g2 = parseFloat( colors2[1] );
var b2 = parseFloat( colors2[2] );
var a2 = parseFloat( colors2[3].split(")")[0] );

// Return lerp value for each channel, INT for color, Float for
Alpha-range
var r = parseInt( p.lerp(r1, r2, amt) );
var g = parseInt( p.lerp(g1, g2, amt) );
var b = parseInt( p.lerp(b1, b2, amt) );
var a = parseFloat( p.lerp(a1, a2, amt) );

aColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
return aColor;
}

I added it after the p.color( function in Processing.js. you can copy
and paste from my source here: http://github.com/F1LT3R/processing-js/tree/master/processing.js

I gotta say, the more I dig into the Processing.js code, the more
impressive John's code looks, it's broken down in such a simple
modular way that anyone can come along and expand it. I really hope
the 3D functions get added within a year or two. I think we are
waiting on W3C before the browser can use the computers OpenGL
hardware on Canvas (for everyone) ???.... I think.




On Nov 13, 1:45 pm, "Vitor Silva" <vitorsilva....@gmail.com> wrote:
> cool. thanks.
> did you created it from scratch or did you "translated" from the processing
> java source?
> i also need lerpColor, but i imagine i could do it to if only i had the
> processing java source...
>
> 2008/11/13 F1LT3R <alistairmacdon...@me.com>
Reply all
Reply to author
Forward
0 new messages