Skip to content


Subversion checkout URL

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

Cannot retrieve contributors at this time

110 lines (83 sloc) 3.054 kB
<!doctype html>
<html lang="en">
<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">
<h1>Color Waves</h1>
<h2>w/ <a href="">Raphael.js</a></h2>
<div class="grid_12" id="notepad">
<section id="details" class="grid_12">
<aside id="authors" class="grid_6">
created by <a href="">Kyle Phillips</a>
<aside id="usage" class="grid_6">
<p><strong>Usage:</strong><br>move your mouse <em>(or finger)</em> around</p>
<article id="description" class="grid_12">
This example shows using toxi.color.TColor with SVG and the <a href="" target="_blank">Raphael.js</a> library. Moving your mouse or finger around adjusts the size and color of the circles based on distance.
<footer class="grid_12"><a href="">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 =*columnWidth+translateX,r*rowHeight+translateY,1,1);
circle.attr({fill: "#dddddd", "stroke": "#dddddd", "opacity":0.5,"scale": 4.0});
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("+(*255)+","+(*255)+","+(*255)+","+color.alpha()+")";
circle.attr({"fill": rgba, "scale":distance*0.25});
Jump to Line
Something went wrong with that request. Please try again.