Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 85e34be7ce
Fetching contributors…

Cannot retrieve contributors at this time

112 lines (91 sloc) 2.585 kb
<!doctype html>
<html lang="en">
<head>
<title>TColorExample - toxiclibs.js examples</title>
<meta name="author" content="Kyle Phillips">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- Date: 2011-01-09 -->
<script type="text/javascript" src="../build/toxiclibs.js"></script>
<script type="text/javascript" src="js/processing.js"></script>
</head>
<body class="container_12">
<header class="grid_12">
<hgroup>
<h1>TColor Example</h1><h2>w/ <a href="http://processingjs.org">Processing.js</a></h2>
</hgroup>
</header>
<script type="text/processing" data-processing-target="myCanvas">
toxi.color.TColor c1;
toxi.color.TColor c2;
PFont font;
void setup()
{
size(200,200);
font = createFont("Arial",14);
textFont(font);
textSize(14);
//setup colors
c1 = toxi.color.TColor.newRGB(random(1),0,0);
setNextColor();
//NOTICE IM CHANGING THE COLOR MODE TO BE BETWEEN 0.0 - 1.0
colorMode(RGB,1.0);
}
void draw()
{
background(0);
fill(c1.red(),c1.green(),c1.blue());
rect(10,10,25,25);
fill(c2.red(),c2.green(),c2.blue());
rect(45,10,25,25);
fill(1,1,1);
text("blend between 2 colors",10,55);
text("darken colors",10,110);
text("desaturate colors", 10, 170);
stroke(1,1,1);
float mod = (frameCount%1000);
float step = (mod/1000);
if(step == 0.0){
c1 = c2;
setNextColor();
}
toxi.color.TColor c3 = c1.copy().blend(c2,step);
fill(c3.red(),c3.green(),c3.blue());
rect(80,10,110,25);
toxi.color.TColor c1Dark = c1.copy().darken(step);
toxi.color.TColor c2Dark = c2.copy().darken(step);
fill(c1Dark.red(),c1Dark.green(),c1Dark.blue());
rect(10,70,85,25);
fill(c2Dark.red(),c2Dark.green(),c2Dark.blue());
rect(105,70,85,25);
toxi.color.TColor c1de = c1.copy().desaturate(step);
toxi.color.TColor c2de = c2.copy().desaturate(step);
fill(c1de.red(),c1de.green(),c1de.blue());
rect(10,130,85,25);
fill(c2de.red(),c2de.green(),c2de.blue());
rect(105,130,85,25);
noStroke();
fill(0,0,0);
rect(width-100,height-25,100,25);
noFill();
fill(1,1,1);
text("step: "+step,width-80,height-10);
}
void setNextColor(){
c2 = toxi.color.TColor.newHSV(random(1),1.0,1.0);
}
</script>
<canvas id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
<section id="details" class="grid_12">
<aside id="authors" class="grid_6">
<p>example and toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>
</aside>
<article id="description" class="grid_9">
<p>
Works with DOM elements, and any other library as well
</p>
</article>
</section>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.