Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 85e34be7ce
Fetching contributors…

Cannot retrieve contributors at this time

110 lines (83 sloc) 3.054 kB
<!doctype html>
<html lang="en">
<head>
<title>TColorExample - toxiclibs.js examples</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<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/raphael-min.js"></script>
<body class="container_12">
<header class="grid_12">
<hgroup>
<h1>Color Waves</h1>
<h2>w/ <a href="http://raphaeljs.com">Raphael.js</a></h2>
</hgroup>
</header>
<div class="grid_12" id="notepad">
</div>
<section id="details" class="grid_12">
<aside id="authors" class="grid_6">
created by <a href="http://haptic-data.com">Kyle Phillips</a>
</aside>
<aside id="usage" class="grid_6">
<p><strong>Usage:</strong><br>move your mouse <em>(or finger)</em> around</p>
</aside>
<article id="description" class="grid_12">
<p>
This example shows using toxi.color.TColor with SVG and the <a href="http://raphaeljs.com" target="_blank">Raphael.js</a> library. Moving your mouse or finger around adjusts the size and color of the circles based on distance.
</p>
</article>
</section>
<footer class="grid_12"><a href="http://haptic-data.com/toxiclibsjs/">toxiclibs.js</a></footer>
<script type="text/javascript">
window.onload = function(e){
var columns = 6, rows = 4;
var columnWidth, rowHeight;
var circles = [];
var translateX = 100, translateY = 100;
var width =940;
var height = 600;
var container = document.getElementById("notepad");
var notepad = Raphael(container,width,height);
columnWidth = width / (columns-1);
rowHeight = height / (rows-1);
for(var r=0;r<rows;r++)
{
for(var c=0;c<columns;c++)
{
var circle = notepad.circle(c*columnWidth+translateX,r*rowHeight+translateY,1,1);
circle.attr({fill: "#dddddd", "stroke": "#dddddd", "opacity":0.5,"scale": 4.0});
circles.push(circle);
}
}
document.addEventListener("mousemove",function(event)
{
updateFor(event.pageX,event.pageY);
},false);
document.addEventListener("touchmove",function(event){
event.preventDefault();
updateFor(event.touches[0].pageX,event.touches[0].pageY);
},false);
function updateFor(activeX,activeY)
{
var x = activeX - container.offsetLeft;
var y = activeY - container.offsetTop;
var l = circles.length;
for(var i=0;i<l;i++)
{
var circle = circles[i];
var box = circle.getBBox();
var dx = x - box.x;
var dy = y - box.y;
var distance = Math.sqrt((dx * dx) + (dy * dy));
var color = toxi.color.TColor.newHSV(distance/width,0.5,1.0);
var rgba = "rgba("+(color.red()*255)+","+(color.green()*255)+","+(color.blue()*255)+","+color.alpha()+")";
circle.attr({"fill": rgba, "scale":distance*0.25});
}
}
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.