Permalink
Browse files

Added a new sweet multi-canvas demo

  • Loading branch information...
rsandor committed Oct 18, 2010
1 parent d28d032 commit 04d8bd42964cc80fc1fefddb6cbd56f6a4987901
Showing with 336 additions and 9 deletions.
  1. +234 −0 demos/multi-canvas.html
  2. +102 −9 demos/shared.js
View
@@ -0,0 +1,234 @@
+<!--
+ gury - A jQuery inspired canvas utility library
+ By Ryan Sandor Richards
+-->
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>multi-canvas - By Ryan Sandor Richards</title>
+ <style type="text/css" media="screen">
+ #content {
+ width: 355px;
+ margin: 0 auto;
+ }
+ #content canvas {
+ float: left;
+ margin-left: 8px;
+ }
+ #content #val {
+ margin-left: 50px;
+ margin-top: 8px;
+ }
+ </style>
+ </head>
+ <body style="font-family: helvetica; background-color: #444; color: #ddd; text-align: center">
+
+ <h1>multi-canvas</h1>
+ <p>By Ryan Sandor Richards</p>
+
+ <div id="content">
+ <canvas style="cursor: crosshair" id="hue"></canvas>
+ <canvas id="scene"></canvas>
+ <canvas style="cursor: crosshair" id="sat"></canvas>
+ <canvas style="cursor: crosshair" id="val"></canvas>
+ </div>
+ <div id="controls" style="clear: both;"></div>
+
+ <!-- Nice little link back to the repo -->
+ <p><a href="http://github.com/rsandor/gury" style="color: white">Project on github</a></p>
+
+ <!-- Add jQuery for load behaviors -->
+ <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
+ <!-- Include the gury library -->
+ <script type="text/javascript" charset="utf-8" src="../gury.js"></script>
+
+ <!-- Include some shared helper classes -->
+ <script type="text/javascript" charset="utf-8" src="shared.js"></script>
+
+ <!-- Now script up a neato canvas scene! -->
+ <script type="text/javascript" charset="utf-8">
+ $(function() {
+ function Slider(x, y, width, height, orient) {
+ this.x = x || 0;
+ this.y = y || 0;
+ this.width = width || 32;
+ this.height = height || 128;
+ this.orient = orient || 'vertical';
+
+ this._value = 1;
+ this._gradient = null;
+ this._down = false;
+
+ this._changeListeners = [];
+ }
+ Slider.prototype = {
+ _setValue: function(e) {
+ if (this.orient == 'vertical') {
+ this._value = (e.canvasY - this.y) / this.height;
+ }
+ else {
+ this._value = (e.canvasX - this.x) / this.width;
+ }
+ this.change(e);
+ },
+
+ change: function(e) {
+ each(this._changeListeners, function(l) {
+ if (typeof l.change == "function") {
+ l.change();
+ }
+ });
+ },
+
+ addChangeListener: function(ob) {
+ this._changeListeners.push(ob);
+ },
+
+ mousedown: function(e) {
+ this._down = true;
+ this._setValue(e);
+ },
+
+ mousemove: function(e) {
+ if (this._down) {
+ this._setValue(e);
+ }
+ },
+
+ mouseup: function(e) {
+ this._down = false;
+ }
+ };
+
+ function HueSlider() {
+ Slider.apply(this, arguments);
+ this._gradient = null;
+ }
+ HueSlider.prototype = extend(new Slider(), {
+ getGradient: function(ctx) {
+ if (!this._gradient) {
+ var mw, mh;
+ if (this.orient == "vertical") {
+ mw = 0;
+ mh = this.height;
+ }
+ else {
+ mw = this.width;
+ mh = 0;
+ }
+
+ var grad = this._gradient = ctx.createLinearGradient(0, 0, mw, mh);
+ grad.addColorStop(0, '#f00'); // Red
+ grad.addColorStop(1/6, '#ff0'); // Yellow
+ grad.addColorStop(2/6, '#0f0'); // Green
+ grad.addColorStop(3/5, '#0ff'); // Cyan
+ grad.addColorStop(4/6, '#00f'); // Blue
+ grad.addColorStop(5/6, '#f0f'); // Magenta
+ grad.addColorStop(1, '#f00'); // Red
+ }
+ return this._gradient;
+ },
+
+ draw: function(ctx, canvas) {
+ ctx.fillStyle = this.getGradient(ctx);
+ ctx.fillRect(this.x, this.y, this.width, this.height);
+ },
+
+ getHue: function() {
+ return 360 * this._value;
+ }
+ });
+
+ function ValueSlider() {
+ Slider.apply(this, arguments);
+ this._gradient = null;
+ }
+ ValueSlider.prototype = extend(new Slider(), {
+ draw: function(ctx, canvas) {
+ var mw, mh;
+ if (this.orient == "vertical") {
+ mw = 0;
+ mh = this.height;
+ }
+ else {
+ mw = this.width;
+ mh = 0;
+ }
+
+ var grad = ctx.createLinearGradient(0, 0, mw, mh);
+ grad.addColorStop(0, '#000'); // Black
+ grad.addColorStop(1, hsvToColor(hue.getHue(), 1.0, 1.0)); // Full Value
+
+ ctx.fillStyle = grad;
+ ctx.fillRect(this.x, this.y, this.width, this.height);
+ },
+
+ getValue: function() {
+ return this._value;
+ }
+ });
+
+ function SaturationSlider() {
+ Slider.apply(this, arguments);
+ }
+ SaturationSlider.prototype = extend(new Slider(), {
+ draw: function(ctx, canvas) {
+ var mw, mh;
+ if (this.orient == "vertical") {
+ mw = 0;
+ mh = this.height;
+ }
+ else {
+ mw = this.width;
+ mh = 0;
+ }
+
+ var grad = ctx.createLinearGradient(0, 0, mw, mh);
+ grad.addColorStop(0, '#fff'); // black
+ grad.addColorStop(1, hsvToColor(hue.getHue(), 1.0, 1.0)); // Fully saturated
+
+ ctx.fillStyle = grad;
+ ctx.fillRect(this.x, this.y, this.width, this.height);
+ },
+
+ getSaturation: function() {
+ return this._value;
+ }
+ });
+
+ // Create the color sliders
+ var hue = new HueSlider(0, 0, 32, 256);
+ $g('hue').size(32, 256).add(hue)
+ .mousedown(hue, hue.mousedown)
+ .mousemove(hue, hue.mousemove)
+ .mouseup(hue, hue.mouseup).play(32);
+
+ var sat = new SaturationSlider(0, 0, 32, 256);
+ $g('sat').size(32, 256).add(sat)
+ .mousedown(sat, sat.mousedown)
+ .mousemove(sat, sat.mousemove)
+ .mouseup(sat, sat.mouseup).play(32);
+
+ var val = new ValueSlider(0, 0, 256, 32, 'horizontal');
+ $g('val').size(256, 32).add(val)
+ .mousedown(val, val.mousedown)
+ .mousemove(val, val.mousemove)
+ .mouseup(val, val.mouseup).play(32);
+
+ // Draw a scene using the current color
+ var box = new Box(128, 128, 156, { dTheta: Math.PI / 120 });
+ box.change = function() {
+ var rgb = hsvToRGB(hue.getHue(), sat.getSaturation(), val.getValue());
+ this.color = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 255)';
+ };
+
+ hue.addChangeListener(box);
+ val.addChangeListener(box);
+ sat.addChangeListener(box);
+
+ $g('scene').size(256, 256).background('black').add(box).play(32);
+ });
+ </script>
+ </body>
+</html>
View
@@ -9,7 +9,20 @@
/*
* Some color functions
*/
-function rgbToHSV(r, g, b) {
+function rgbToHSV() {
+ var r, g, b;
+
+ if (arguments.length == 1 && typeof(arguments[0]) == "object") {
+ r = arguments[0].r;
+ g = arguments[0].g;
+ b = arguments[0].b;
+ }
+ else if (arguments.length == 3){
+ r = arguments[0];
+ g = arguments[1];
+ b = arguments[2];
+ }
+
var m = Math.min(r, g, b);
var M = Math.max(r, g, b);
var C = M - m;
@@ -25,23 +38,86 @@ function rgbToHSV(r, g, b) {
return {h: H, s: S, v: V};
}
-function hsvToRGB(c) {
- var t;
- var h = c.h, s = c.s, v = c.v;
- var C = v * s, Hp = h/60, X = C*(1 - Math.abs(Hp % 2 - 1));
+function hsvToRGB() {
+ var h, s, v;
+
+ if (arguments.length == 1 && typeof(arguments[0]) == "object") {
+ h = arguments[0].h;
+ s = arguments[0].s;
+ v = arguments[0].v;
+ }
+ else if (arguments.length == 3) {
+ h = arguments[0];
+ s = arguments[1];
+ v = arguments[2];
+ }
+
+ var C = v * s,
+ Hp = h/60,
+ X = C*(1 - Math.abs(Hp % 2 - 1));
var m = v - C;
+ var t;
+
- if (h == 0) t = [0, 0, 0];
- else if (Hp < 1) t = [C, X, 0];
+ if (Hp < 1) t = [C, X, 0];
else if (Hp < 2) t = [X, C, 0];
else if (Hp < 3) t = [0, C, X];
- else if (hp < 4) t = [0, X, C];
+ else if (Hp < 4) t = [0, X, C];
else if (Hp < 5) t = [X, 0, C];
else t = [C, 0, X];
- return {r: t[0] + m, g: t[1] + m, b: t[2] + m};
+ var rval = {
+ r: t[0] + m, g: t[1] + m, b: t[2] + m
+ };
+
+ for (var k in rval) {
+ rval[k] = rval[k] * 255 | 0;
+ }
+
+ return rval;
+}
+
+function rgbToColor() {
+ var rgb;
+ if (arguments.length == 1) {
+ rgb = arguments[0];
+ }
+ else if (arguments.length == 3) {
+ rgb = {
+ r: arguments[0],
+ g: arguments[1],
+ b: arguments[2]
+ };
+ }
+ else {
+ return '#000';
+ }
+
+ return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 255)';
}
+function hsvToColor(hsv) {
+ return rgbToColor(hsvToRGB.apply(this, arguments));
+}
+
+/*
+ * Class/Language Helpers
+ */
+function extend(base, child) {
+ var c = base;
+ for (var k in child) {
+ base[k] = child[k];
+ }
+ return c;
+}
+
+function each(array, closure) {
+ for (var i = 0; i < array.length; i++) {
+ closure(array[i]);
+ }
+}
+
+
/*
* Shape Base Class
*/
@@ -123,3 +199,20 @@ function Circle() {
};
}
Circle.prototype = new Shape();
+
+/*
+ * For drawing triangles
+ */
+function Triangle() {
+ Shape.apply(this, arguments);
+ this.render = function(ctx, canvas) {
+ var h = Math.sqrt(this.size*this.size*3/4);
+ ctx.beginPath();
+ ctx.moveTo(0, -h/2);
+ ctx.lineTo(this.size/2, h/2);
+ ctx.lineTo(-this.size/2, h/2);
+ ctx.lineTo(0, -h/2);
+ ctx.fill();
+ };
+}
+Triangle.prototype = new Shape();

0 comments on commit 04d8bd4

Please sign in to comment.