├── .gitignore ├── README ├── Tween.lib ├── donut.pjs ├── index.html ├── lib ├── jquery-1.3.2.min.js └── processing.js ├── style.css ├── tween1.pjs └── tween2.pjs /.gitignore: -------------------------------------------------------------------------------- 1 | test_log 2 | pkg 3 | pkg/* 4 | */pkg/* 5 | bundle 6 | bundle/* 7 | doc 8 | *.log 9 | log 10 | !log*.rb 11 | */log 12 | log/* 13 | */log/* 14 | coverage 15 | */coverage 16 | lib/dm-more.rb 17 | *.db 18 | nbproject 19 | .DS_Store 20 | rspec_report.html 21 | *.swp 22 | _Yardoc 23 | */ri 24 | -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | Tween.lib - Motion Tweening for Processing.js 2 | ================================================= 3 | 4 | Please read the corresponding blogpost at http://quasipartikel.at/2009/11/30/motion-tweening-for-processingjs/ to get started. 5 | Moreover there's a dedicated online demo available at http://quasipartikel.at/tween. -------------------------------------------------------------------------------- /Tween.lib: -------------------------------------------------------------------------------- 1 | /********************************************************************** 2 | TERMS OF USE - EASING EQUATIONS 3 | Open source under the BSD License. 4 | Copyright (c) 2001 Robert Penner 5 | JavaScript version copyright (c) 2006 by Philippe Maegerman 6 | Adapted to work along with Processing.js (c) 2009 by Michael Aufreiter 7 | 8 | All rights reserved. 9 | 10 | Redistribution and use in source and binary forms, with or without 11 | modification, are permitted provided that the following conditions are 12 | met: 13 | 14 | * Redistributions of source code must retain the above copyright 15 | notice, this list of conditions and the following disclaimer. 16 | * Redistributions in binary form must reproduce the above 17 | copyright notice, this list of conditions and the following disclaimer 18 | in the documentation and/or other materials provided with the 19 | distribution. 20 | * Neither the name of the author nor the names of contributors may 21 | be used to endorse or promote products derived from this software 22 | without specific prior written permission. 23 | 24 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 25 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 26 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 27 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 28 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 29 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 30 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 31 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 32 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 33 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 34 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 35 | 36 | *****************************************/ 37 | 38 | Tween = function Tween(obj, prop, func, begin, finish, duration) { 39 | if (!arguments.length) return; 40 | this.obj = obj; 41 | this.prop = prop; 42 | this.begin = begin; 43 | this._pos = begin; 44 | this.setDuration(duration); 45 | if (func!=null && func!='') { 46 | this.func = func; 47 | } 48 | this.setFinish(finish); 49 | } 50 | 51 | Tween.prototype = { 52 | obj: new Object(), 53 | func: function (t, b, c, d) { return c*t/d + b; }, 54 | begin: 0, 55 | change: 0, 56 | prevTime: 0, 57 | prevPos: 0, 58 | looping: false, 59 | _playing: false, 60 | _duration: 0, 61 | _time: 0, 62 | _pos: 0, 63 | _position: 0, 64 | _startTime: 0, 65 | _finish: 0, 66 | name: '', 67 | suffixe: '', 68 | setTime: function(t) { 69 | this.prevTime = this._time; 70 | if (t > this.getDuration()) { 71 | if (this.looping) { 72 | this.rewind (t - this._duration); 73 | this.update(); 74 | // execute onLooped callback 75 | } else { 76 | this._time = this._duration; 77 | this.update(); 78 | this.stop(); 79 | // execute onFinished callback 80 | } 81 | } else if (t < 0) { 82 | this.rewind(); 83 | this.update(); 84 | } else { 85 | this._time = t; 86 | this.update(); 87 | } 88 | }, 89 | getTime: function(){ 90 | return this._time; 91 | }, 92 | setDuration: function(d){ 93 | this._duration = (d == null || d <= 0) ? 100000 : d; 94 | }, 95 | getDuration: function(){ 96 | return this._duration; 97 | }, 98 | setPosition: function(p){ 99 | this.prevPos = this._pos; 100 | this.obj[this.prop] = p; 101 | this._pos = p; 102 | // execute onPositionChanged callback 103 | }, 104 | getPosition: function(t) { 105 | if (t == undefined) t = this._time; 106 | return this.func(t, this.begin, this.change, this._duration); 107 | }, 108 | setFinish: function(f) { 109 | this.change = f - this.begin; 110 | }, 111 | getFinish: function() { 112 | return this.begin + this.change; 113 | }, 114 | isPlaying: function() { 115 | return this._playing; 116 | }, 117 | init: function(obj, prop, func, begin, finish, duration, suffixe) { 118 | if (!arguments.length) return; 119 | this._listeners = new Array(); 120 | this.addListener(this); 121 | this.obj = obj; 122 | this.prop = prop; 123 | this.begin = begin; 124 | this._pos = begin; 125 | this.setDuration(duration); 126 | if (func!=null && func!='') { 127 | this.func = func; 128 | } 129 | this.setFinish(finish); 130 | }, 131 | 132 | start: function() { 133 | this.rewind(); 134 | this._playing = true; 135 | // execute onStarted callback 136 | }, 137 | rewind: function(t) { 138 | this.stop(); 139 | this._time = (t == undefined) ? 0 : t; 140 | this.fixTime(); 141 | this.update(); 142 | }, 143 | fforward: function() { 144 | this._time = this._duration; 145 | this.fixTime(); 146 | this.update(); 147 | }, 148 | update: function() { 149 | this.setPosition(this.getPosition(this._time)); 150 | }, 151 | tick: function() { 152 | if (this._playing) { 153 | this.nextFrame(); 154 | } 155 | }, 156 | nextFrame: function() { 157 | this.setTime((this.getTimer() - this._startTime) / 1000); 158 | }, 159 | stop: function() { 160 | this._playing = false; 161 | // execute onStopped callback 162 | }, 163 | continueTo: function(finish, duration) { 164 | this.begin = this._pos; 165 | this.setFinish(finish); 166 | if (this._duration != undefined) { 167 | this.setDuration(duration); 168 | } 169 | this.start(); 170 | }, 171 | resume: function() { 172 | this.fixTime(); 173 | this._playing = true; 174 | // executing onResumed callback 175 | }, 176 | yoyo: function () { 177 | this.continueTo(this.begin,this._time); 178 | }, 179 | fixTime: function() { 180 | this._startTime = this.getTimer() - this._time * 1000; 181 | }, 182 | getTimer: function() { 183 | return new Date().getTime() - this._time; 184 | } 185 | }; 186 | 187 | // Tweening functions 188 | Tween.backEaseIn = function(t,b,c,d,a,p) { 189 | if (s == undefined) var s = 1.70158; 190 | return c*(t/=d)*t*((s+1)*t - s) + b; 191 | } 192 | 193 | Tween.backEaseOut = function(t,b,c,d,a,p) { 194 | if (s == undefined) var s = 1.70158; 195 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 196 | } 197 | 198 | Tween.backEaseInOut = function(t,b,c,d,a,p) { 199 | if (s == undefined) var s = 1.70158; 200 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 201 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 202 | } 203 | 204 | Tween.elasticEaseIn = function(t,b,c,d,a,p) { 205 | if (t==0) return b; 206 | if ((t/=d)==1) return b+c; 207 | if (!p) p=d*.3; 208 | if (!a || a < Math.abs(c)) { 209 | a=c; var s=p/4; 210 | } 211 | else 212 | var s = p/(2*Math.PI) * Math.asin (c/a); 213 | 214 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 215 | } 216 | 217 | Tween.elasticEaseOut = function (t,b,c,d,a,p) { 218 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 219 | if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 220 | else var s = p/(2*Math.PI) * Math.asin (c/a); 221 | return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); 222 | } 223 | 224 | Tween.elasticEaseInOut = function (t,b,c,d,a,p) { 225 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) var p=d*(.3*1.5); 226 | if (!a || a < Math.abs(c)) {var a=c; var s=p/4; } 227 | else var s = p/(2*Math.PI) * Math.asin (c/a); 228 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 229 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 230 | } 231 | 232 | Tween.bounceEaseOut = function(t,b,c,d) { 233 | if ((t/=d) < (1/2.75)) { 234 | return c*(7.5625*t*t) + b; 235 | } else if (t < (2/2.75)) { 236 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 237 | } else if (t < (2.5/2.75)) { 238 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 239 | } else { 240 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 241 | } 242 | } 243 | 244 | Tween.bounceEaseIn = function(t,b,c,d) { 245 | return c - Tween.bounceEaseOut (d-t, 0, c, d) + b; 246 | } 247 | 248 | Tween.bounceEaseInOut = function(t,b,c,d) { 249 | if (t < d/2) return Tween.bounceEaseIn (t*2, 0, c, d) * .5 + b; 250 | else return Tween.bounceEaseOut (t*2-d, 0, c, d) * .5 + c*.5 + b; 251 | } 252 | 253 | Tween.strongEaseInOut = function(t,b,c,d) { 254 | return c*(t/=d)*t*t*t*t + b; 255 | } 256 | 257 | Tween.regularEaseIn = function(t,b,c,d) { 258 | return c*(t/=d)*t + b; 259 | } 260 | 261 | Tween.regularEaseOut = function(t,b,c,d) { 262 | return -c *(t/=d)*(t-2) + b; 263 | } 264 | 265 | Tween.regularEaseInOut = function(t,b,c,d) { 266 | if ((t/=d/2) < 1) return c/2*t*t + b; 267 | return -c/2 * ((--t)*(t-2) - 1) + b; 268 | } 269 | 270 | Tween.strongEaseIn = function(t,b,c,d) { 271 | return c*(t/=d)*t*t*t*t + b; 272 | } 273 | 274 | Tween.strongEaseOut = function(t,b,c,d) { 275 | return c*((t=t/d-1)*t*t*t*t + 1) + b; 276 | } 277 | 278 | Tween.strongEaseInOut = function(t,b,c,d) { 279 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 280 | return c/2*((t-=2)*t*t*t*t + 2) + b; 281 | } -------------------------------------------------------------------------------- /donut.pjs: -------------------------------------------------------------------------------- 1 | /********************************************************************** 2 | TERMS OF USE - DONUT - Radial Navigator 3 | Open source under the BSD License. 4 | copyright (c) 2009 by Michael Aufreiter 5 | All rights reserved. 6 | 7 | Redistribution and use in source and binary forms, with or without 8 | modification, are permitted provided that the following conditions are 9 | met: 10 | 11 | * Redistributions of source code must retain the above copyright 12 | notice, this list of conditions and the following disclaimer. 13 | * Redistributions in binary form must reproduce the above 14 | copyright notice, this list of conditions and the following disclaimer 15 | in the documentation and/or other materials provided with the 16 | distribution. 17 | * Neither the name of the author nor the names of contributors may 18 | be used to endorse or promote products derived from this software 19 | without specific prior written permission. 20 | 21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 22 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 23 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 24 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 25 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 26 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 27 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 28 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 29 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 30 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 31 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 32 | 33 | *****************************************/ 34 | 35 | color[] colors = new color[12]; 36 | 37 | colors[0] = color(171, 199, 49); 38 | colors[1] = color(162, 195, 85); 39 | colors[2] = color(154, 191, 123); 40 | colors[3] = color(147, 186, 161); 41 | colors[4] = color(141, 181, 200); 42 | colors[5] = color(134, 162, 169); 43 | colors[6] = color(128, 142, 137); 44 | colors[7] = color(122, 122, 104); 45 | colors[8] = color(177, 102, 73); 46 | colors[9] = color(131, 127, 67); 47 | colors[10] = color(157, 175, 55); 48 | 49 | 50 | // alternative colors 51 | // **************************************** 52 | // colors[0] = color(234, 43, 95); 53 | // colors[1] = color(166, 192, 59); 54 | // colors[2] = color(89, 148, 33); 55 | // colors[3] = color(54, 149, 104); 56 | // colors[4] = color(26, 97, 154); 57 | // 58 | // colors[5] = color(234, 43, 95); 59 | // colors[6] = color(166, 192, 59); 60 | // colors[7] = color(89, 148, 33); 61 | // colors[8] = color(54, 149, 104); 62 | // colors[9] = color(26, 97, 154); 63 | // colors[10] = color(234, 43, 95); 64 | 65 | color LABEL_COLOR = color(150); 66 | color HIGHLIGHTED_LABEL_COLOR = color(55); 67 | color DONUT_BACKGROUND = color(255); // color(28,35,34); 68 | color BACKGROUND = color(244);// color(21,27,27); 69 | 70 | // global constants 71 | float STROKE_WEIGHT_COLLAPSED = 50; 72 | float STROKE_WEIGHT_EXPANDED = 60; 73 | float OUTER_BORDER = 5; 74 | float EPSILON = TWO_PI/100; // tolerance for applying angleAdjustment 75 | 76 | public class DonutSlice { 77 | String id = ""; 78 | String name = ""; 79 | 80 | boolean hovering = false; 81 | 82 | DonutSegment seg; 83 | 84 | float angleStart; 85 | float angleStop; 86 | 87 | public DonutSlice(String id, String name, DonutSegment seg) { 88 | this.id = id; 89 | this.name = name; 90 | this.seg = seg; 91 | } 92 | 93 | public void update() { 94 | // patched by DonutSegment#update() for now 95 | } 96 | 97 | public void draw() { 98 | float radius = seg.donut.radius; 99 | stroke(255, 255, 255, 100); 100 | strokeWeight(1); 101 | 102 | // TODO: if (this===seg.slices[seg.slices.size()-1]) 103 | line(this.seg.donut.x+cos(this.angleStop)*(radius-seg.breadth/2), this.seg.donut.y+sin(this.angleStop)*(radius-seg.breadth/2), this.seg.donut.x+cos(this.angleStop)*(radius+seg.breadth/2), this.seg.donut.y+sin(this.angleStop)*(radius+seg.breadth/2)); 104 | 105 | // highlight selectedSlice 106 | if (this.hovering) { 107 | curContext.lineCap = "butt"; // processing.js patch! 108 | noFill(); 109 | stroke(0,0,0,20); 110 | strokeWeight(seg.breadth); 111 | arc(seg.donut.x, seg.donut.y, seg.donut.radius*2, seg.donut.radius*2, angleStart, angleStop); 112 | } 113 | 114 | noStroke(); 115 | strokeWeight(0); // reset 116 | 117 | if (seg.donut.selectedSegment===this.seg && !seg.fan.isPlaying()) { 118 | float theta = ((this.angleStart+this.angleStop) / 2)%TWO_PI+0.05; 119 | float angle = theta; 120 | 121 | curContext.font = "12px Century Gothic"; 122 | curContext.textAlign = "left"; 123 | if (theta > PI/2 && theta < (PI+PI/2)-0.05) { 124 | fWidth = curContext.measureText(this.name).width; 125 | angle -= 0.05; 126 | } else 127 | fWidth = 0; 128 | 129 | pushMatrix(); 130 | translate(seg.donut.x, seg.donut.y); 131 | rotate(angle); 132 | pushMatrix(); 133 | translate(seg.donut.radius+50+fWidth,0); 134 | if (this.hovering) 135 | fill(HIGHLIGHTED_LABEL_COLOR); 136 | else 137 | fill(LABEL_COLOR); 138 | 139 | pushMatrix(); 140 | if (theta > PI/2 && theta < (PI+PI/2)-0.05) { 141 | rotate(PI); 142 | } 143 | curContext.fillText(this.name, 0, 0); 144 | popMatrix(); 145 | popMatrix(); 146 | popMatrix(); 147 | } 148 | } 149 | 150 | public boolean checkSelected() { 151 | float disX = mouseX - seg.donut.x; 152 | float disY = mouseY - seg.donut.y; 153 | 154 | // calculate polar coordinates 155 | float r = Math.sqrt(sq(disX)+sq(disY)); 156 | float angle = atan2(disY, disX); 157 | if (angle<0) angle = TWO_PI+angle; // shift to 0-TWO_PI interval 158 | 159 | float start = this.angleStart % TWO_PI; 160 | float stop = this.angleStop % TWO_PI; 161 | 162 | // TODO: add such a workaround for donuts that have just one slice 163 | // if (seg.donut.numSlices()==1) { 164 | // if (r >= this.donut.radius && r <= this.donut.radius) { 165 | // 166 | // } 167 | // } 168 | 169 | if (r >= seg.donut.radius-seg.breadth/2 && r <= seg.donut.radius+seg.breadth/2 && 170 | ((angle>start && anglestop && (angle > start || angle < stop)) )) { 171 | 172 | seg.donut.setSelectedSlice(this); 173 | // return true 174 | hovering = true; 175 | } else { 176 | hovering = false; 177 | } 178 | } 179 | } 180 | 181 | 182 | 183 | 184 | public class DonutSegment { 185 | String label; 186 | 187 | float weight; 188 | float angleStart; 189 | float angleStop; 190 | float breadth = STROKE_WEIGHT_COLLAPSED; 191 | Donut donut; 192 | 193 | ArrayList slices; 194 | color col; 195 | Tween fan; 196 | Tween breadthTween; 197 | 198 | public DonutSegment(String label, Donut donut) { 199 | this.label = label; 200 | this.donut = donut; 201 | this.slices = new ArrayList(); 202 | this.weight = 1.0; 203 | this.fan = new Tween(this, "weight", Tween.strongEaseInOut, 1.0, 3.0, 0.8); 204 | this.breadthTween = new Tween(this, "breadth", Tween.strongEaseInOut, STROKE_WEIGHT_COLLAPSED, STROKE_WEIGHT_EXPANDED, 0.8); 205 | } 206 | 207 | // the resulting share of the segment (in percent) 208 | public float share() { 209 | return (slices.size()/donut.totalSlices()); // the share of total slices 210 | } 211 | 212 | // the weighted share of the segment in respect of the segment's weight (in percent) 213 | public float weightedShare() { 214 | return share()*weight/donut.totalWeight(); 215 | } 216 | 217 | // the resulting size of the segment (in radiants) 218 | public float amount() { 219 | return (TWO_PI)*weightedShare(); 220 | } 221 | 222 | public void update() { 223 | // update local angleStart, angleStop using the shared angleOffset 224 | this.angleStart = donut.angleOffset; 225 | 226 | float amount = this.amount(); 227 | float tmp = this.angleStart; 228 | for (int i=0; i slices[i].update(); 230 | slices[i].angleStart = tmp; 231 | slices[i].angleStop = tmp+=amount/slices.size(); 232 | } 233 | 234 | this.angleStop = donut.angleOffset+=amount; 235 | } 236 | 237 | public void draw() { 238 | 239 | // processing.js patch! 240 | curContext.lineCap = "butt"; 241 | 242 | fill(DONUT_BACKGROUND); 243 | noStroke(); 244 | 245 | strokeWeight(this.breadth+2*OUTER_BORDER); 246 | stroke(DONUT_BACKGROUND); 247 | noFill(); 248 | arc(donut.x, donut.y, (donut.radius)*2, (donut.radius)*2, this.angleStart, this.angleStop); 249 | 250 | fill(0,0,0,0); 251 | stroke(col); 252 | strokeWeight(this.breadth); 253 | 254 | arc(donut.x, donut.y, donut.radius*2, donut.radius*2, this.angleStart, this.angleStop); 255 | 256 | curContext.textAlign = "center"; 257 | if (this===donut.selectedSegment) { 258 | fill(col); 259 | curContext.font = "40px Century Gothic"; 260 | curContext.fillText(this.slices.size(), donut.x, donut.y-40); 261 | 262 | curContext.font = "14px Century Gothic"; 263 | curContext.fillText("Options", donut.x, donut.y-20); 264 | 265 | curContext.font = "18px Century Gothic"; 266 | curContext.fillText(this.label, donut.x, donut.y+30); 267 | 268 | noStroke(); 269 | ellipse(donut.x, donut.y, 14, 14); 270 | } 271 | 272 | // draw slices 273 | for (int i=0; iEPSILON) { 354 | float targetAdjustment = this.angleAdjustment+offset; 355 | if (targetAdjustment<0) { 356 | targetAdjustment = TWO_PI - targetAdjustment; 357 | } 358 | 359 | this.angleAdjustment = targetAdjustment; 360 | } 361 | } 362 | 363 | // recalc again if angleAdjustment is needed. 364 | if (angleAdjustment>0) { 365 | this.angleOffset = this.angleAdjustment; 366 | for (int i=0; i < segments.size(); i++) { 367 | segments[i].update(); 368 | } 369 | } 370 | } 371 | 372 | /* this method is probably called to often. 373 | /* maybe that's what slows down the expand/contract tweening */ 374 | public float totalWeight() { 375 | float sum = 0.0; 376 | for (int i=0; i < segments.size(); i++) { 377 | sum += segments[i].weight*segments[i].share(); 378 | } 379 | return sum; 380 | } 381 | 382 | public float totalSlices() { 383 | int sum = 0; 384 | for (int i=0; i < segments.size(); i++) { 385 | sum += segments[i].slices.size(); 386 | } 387 | return sum; 388 | } 389 | 390 | public void draw() { 391 | noStroke(); 392 | 393 | // spacer 394 | fill(DONUT_BACKGROUND); 395 | ellipse(this.x, this.y, (radius+STROKE_WEIGHT_COLLAPSED/2+OUTER_BORDER)*2, (radius+STROKE_WEIGHT_COLLAPSED/2+OUTER_BORDER)*2); 396 | 397 | // draw attributes 398 | for (int i = 0 ; i < segments.size(); i++) { 399 | segments[i].draw(); 400 | } 401 | } 402 | 403 | public void addSegment(DonutSegment s) { 404 | if (colorCount==0) 405 | setSelectedSlice(s.slices[0]); 406 | s.col = colors[colorCount%11]; // assign a color 407 | segments.add(s); 408 | colorCount += 2; 409 | } 410 | } 411 | 412 | Donut donut; 413 | 414 | 415 | void setup() { 416 | size(550, 550); 417 | 418 | DonutSegment seg; 419 | 420 | donut = new Donut(275, 275); 421 | 422 | // populate with some data 423 | seg = new DonutSegment("Disco", donut); 424 | seg.addSlice(new DonutSlice("1", "Cosmic disco", seg)); 425 | seg.addSlice(new DonutSlice("2", "Eurobeat", seg)); 426 | seg.addSlice(new DonutSlice("3", "Eurodance", seg)); 427 | seg.addSlice(new DonutSlice("4", "Italo dance", seg)); 428 | seg.addSlice(new DonutSlice("5", "Nu-disco", seg)); 429 | donut.addSegment(seg); 430 | 431 | seg = new DonutSegment("Electro", donut); 432 | seg.addSlice(new DonutSlice("6", "Electro backbeat", seg)); 433 | seg.addSlice(new DonutSlice("7", "Electro-hop", seg)); 434 | seg.addSlice(new DonutSlice("8", "Electro-grime", seg)); 435 | seg.addSlice(new DonutSlice("9", "Techno bass", seg)); 436 | donut.addSegment(seg); 437 | 438 | seg = new DonutSegment("House", donut); 439 | seg.addSlice(new DonutSlice("10", "Acid House", seg)); 440 | seg.addSlice(new DonutSlice("11", "Deep House", seg)); 441 | seg.addSlice(new DonutSlice("12", "Electro House", seg)); 442 | seg.addSlice(new DonutSlice("13", "Progressive House", seg)); 443 | seg.addSlice(new DonutSlice("14", "Scouse House", seg)); 444 | seg.addSlice(new DonutSlice("15", "Tribal House", seg)); 445 | seg.addSlice(new DonutSlice("16", "Tech House", seg)); 446 | donut.addSegment(seg); 447 | 448 | seg = new DonutSegment("Techno", donut); 449 | seg.addSlice(new DonutSlice("17", "Acid Techno", seg)); 450 | seg.addSlice(new DonutSlice("18", "Detroit Techno", seg)); 451 | seg.addSlice(new DonutSlice("19", "Free Tekno", seg)); 452 | seg.addSlice(new DonutSlice("20", "Minimal", seg)); 453 | seg.addSlice(new DonutSlice("21", "Schranz", seg)); 454 | seg.addSlice(new DonutSlice("22", "Tech Trance", seg)); 455 | seg.addSlice(new DonutSlice("23", "Techstep", seg)); 456 | 457 | donut.addSegment(seg); 458 | 459 | seg = new DonutSegment("Drum&Bass", donut); 460 | seg.addSlice(new DonutSlice("24", "Clownstep", seg)); 461 | seg.addSlice(new DonutSlice("25", "Darkcore", seg)); 462 | seg.addSlice(new DonutSlice("26", "Darkstep", seg)); 463 | seg.addSlice(new DonutSlice("27", "Drumfunk", seg)); 464 | seg.addSlice(new DonutSlice("28", "Hardstep", seg)); 465 | seg.addSlice(new DonutSlice("29", "Jump-Up", seg)); 466 | 467 | seg.addSlice(new DonutSlice("30", "Liquid funk", seg)); 468 | seg.addSlice(new DonutSlice("31", "Neurofunk", seg)); 469 | seg.addSlice(new DonutSlice("32", "Oldschool jungle", seg)); 470 | seg.addSlice(new DonutSlice("33", "Techstep", seg)); 471 | seg.addSlice(new DonutSlice("34", "Trancestep", seg)); 472 | 473 | donut.addSegment(seg); 474 | } 475 | 476 | void draw() { 477 | background(BACKGROUND); 478 | frameRate(30); 479 | donut.update(); 480 | donut.draw(); 481 | stroke(0); 482 | fill(0); 483 | 484 | pushMatrix(); 485 | popMatrix(); 486 | } 487 | 488 | void mouseMoved() { 489 | for (int i=0; i < donut.segments.size(); i++) { 490 | for (int j=0; j < donut.segments[i].slices.size(); j++) { 491 | donut.segments[i].slices[j].checkSelected(); 492 | } 493 | } 494 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tween.lib - Motion Tweening for Processing.js 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Fork me on GitHub 16 | 17 |
18 | 31 | 32 |
33 |

34 | The library is based on Philippe Maegerman's Javascript version of Robert Penner's Motion Tweening Library for ActionScript. 35 |

36 | To get started, please read the corresponding blogpost. 37 |

38 | 39 |

Motion Tweening

40 | 41 | The example shows the application of two different Tweens for manipulating x and y coordinates of the graphical object. Please click on the canvas to start/restart the Tween. 42 |

43 | 44 | 45 |

Color Tweening

46 | 47 | Tweening is not restricted to motion. You can use the same approach to change a color over time.

48 | 49 | 50 | 51 |

In the wild

52 | 53 | Here's the result of my animated donut chart, which will be integrated in the next version of ASKKEN™. It makes heavy use of Tweens. 54 | 55 | You can find a dedicated demo page at http://quasipartikel.at/donut and get the source code from Github. 56 |

57 | 58 | 59 |

Misc

60 |

61 | There are no limitations. Do whatever you want with this sketch. 62 | If you did some nice modifications, just let me know (via Github). I'd be happy to include them. 63 |

64 | If you spot some bugs please add them to the issue tracker. 65 | Source code is available at Github. 66 | 67 |

68 |
69 | 70 | 75 |
76 | 80 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /lib/jquery-1.3.2.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery JavaScript Library v1.3.2 3 | * http://jquery.com/ 4 | * 5 | * Copyright (c) 2009 John Resig 6 | * Dual licensed under the MIT and GPL licenses. 7 | * http://docs.jquery.com/License 8 | * 9 | * Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009) 10 | * Revision: 6246 11 | */ 12 | (function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={init:function(E,H){E=E||document;if(E.nodeType){this[0]=E;this.length=1;this.context=E;return this}if(typeof E==="string"){var G=D.exec(E);if(G&&(G[1]||!H)){if(G[1]){E=o.clean([G[1]],H)}else{var I=document.getElementById(G[3]);if(I&&I.id!=G[3]){return o().find(E)}var F=o(I||[]);F.context=document;F.selector=E;return F}}else{return o(H).find(E)}}else{if(o.isFunction(E)){return o(document).ready(E)}}if(E.selector&&E.context){this.selector=E.selector;this.context=E.context}return this.setArray(o.isArray(E)?E:o.makeArray(E))},selector:"",jquery:"1.3.2",size:function(){return this.length},get:function(E){return E===g?Array.prototype.slice.call(this):this[E]},pushStack:function(F,H,E){var G=o(F);G.prevObject=this;G.context=this.context;if(H==="find"){G.selector=this.selector+(this.selector?" ":"")+E}else{if(H){G.selector=this.selector+"."+H+"("+E+")"}}return G},setArray:function(E){this.length=0;Array.prototype.push.apply(this,E);return this},each:function(F,E){return o.each(this,F,E)},index:function(E){return o.inArray(E&&E.jquery?E[0]:E,this)},attr:function(F,H,G){var E=F;if(typeof F==="string"){if(H===g){return this[0]&&o[G||"attr"](this[0],F)}else{E={};E[F]=H}}return this.each(function(I){for(F in E){o.attr(G?this.style:this,F,o.prop(this,E[F],G,I,F))}})},css:function(E,F){if((E=="width"||E=="height")&&parseFloat(F)<0){F=g}return this.attr(E,F,"curCSS")},text:function(F){if(typeof F!=="object"&&F!=null){return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(F))}var E="";o.each(F||this,function(){o.each(this.childNodes,function(){if(this.nodeType!=8){E+=this.nodeType!=1?this.nodeValue:o.fn.text([this])}})});return E},wrapAll:function(E){if(this[0]){var F=o(E,this[0].ownerDocument).clone();if(this[0].parentNode){F.insertBefore(this[0])}F.map(function(){var G=this;while(G.firstChild){G=G.firstChild}return G}).append(this)}return this},wrapInner:function(E){return this.each(function(){o(this).contents().wrapAll(E)})},wrap:function(E){return this.each(function(){o(this).wrapAll(E)})},append:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.appendChild(E)}})},prepend:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.insertBefore(E,this.firstChild)}})},before:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this)})},after:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this.nextSibling)})},end:function(){return this.prevObject||o([])},push:[].push,sort:[].sort,splice:[].splice,find:function(E){if(this.length===1){var F=this.pushStack([],"find",E);F.length=0;o.find(E,this[0],F);return F}else{return this.pushStack(o.unique(o.map(this,function(G){return o.find(E,G)})),"find",E)}},clone:function(G){var E=this.map(function(){if(!o.support.noCloneEvent&&!o.isXMLDoc(this)){var I=this.outerHTML;if(!I){var J=this.ownerDocument.createElement("div");J.appendChild(this.cloneNode(true));I=J.innerHTML}return o.clean([I.replace(/ jQuery\d+="(?:\d+|null)"/g,"").replace(/^\s*/,"")])[0]}else{return this.cloneNode(true)}});if(G===true){var H=this.find("*").andSelf(),F=0;E.find("*").andSelf().each(function(){if(this.nodeName!==H[F].nodeName){return}var I=o.data(H[F],"events");for(var K in I){for(var J in I[K]){o.event.add(this,K,I[K][J],I[K][J].data)}}F++})}return E},filter:function(E){return this.pushStack(o.isFunction(E)&&o.grep(this,function(G,F){return E.call(G,F)})||o.multiFilter(E,o.grep(this,function(F){return F.nodeType===1})),"filter",E)},closest:function(E){var G=o.expr.match.POS.test(E)?o(E):null,F=0;return this.map(function(){var H=this;while(H&&H.ownerDocument){if(G?G.index(H)>-1:o(H).is(E)){o.data(H,"closest",F);return H}H=H.parentNode;F++}})},not:function(E){if(typeof E==="string"){if(f.test(E)){return this.pushStack(o.multiFilter(E,this,true),"not",E)}else{E=o.multiFilter(E,this)}}var F=E.length&&E[E.length-1]!==g&&!E.nodeType;return this.filter(function(){return F?o.inArray(this,E)<0:this!=E})},add:function(E){return this.pushStack(o.unique(o.merge(this.get(),typeof E==="string"?o(E):o.makeArray(E))))},is:function(E){return !!E&&o.multiFilter(E,this).length>0},hasClass:function(E){return !!E&&this.is("."+E)},val:function(K){if(K===g){var E=this[0];if(E){if(o.nodeName(E,"option")){return(E.attributes.value||{}).specified?E.value:E.text}if(o.nodeName(E,"select")){var I=E.selectedIndex,L=[],M=E.options,H=E.type=="select-one";if(I<0){return null}for(var F=H?I:0,J=H?I+1:M.length;F=0||o.inArray(this.name,K)>=0)}else{if(o.nodeName(this,"select")){var N=o.makeArray(K);o("option",this).each(function(){this.selected=(o.inArray(this.value,N)>=0||o.inArray(this.text,N)>=0)});if(!N.length){this.selectedIndex=-1}}else{this.value=K}}})},html:function(E){return E===g?(this[0]?this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g,""):null):this.empty().append(E)},replaceWith:function(E){return this.after(E).remove()},eq:function(E){return this.slice(E,+E+1)},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments),"slice",Array.prototype.slice.call(arguments).join(","))},map:function(E){return this.pushStack(o.map(this,function(G,F){return E.call(G,F,G)}))},andSelf:function(){return this.add(this.prevObject)},domManip:function(J,M,L){if(this[0]){var I=(this[0].ownerDocument||this[0]).createDocumentFragment(),F=o.clean(J,(this[0].ownerDocument||this[0]),I),H=I.firstChild;if(H){for(var G=0,E=this.length;G1||G>0?I.cloneNode(true):I)}}if(F){o.each(F,z)}}return this;function K(N,O){return M&&o.nodeName(N,"table")&&o.nodeName(O,"tr")?(N.getElementsByTagName("tbody")[0]||N.appendChild(N.ownerDocument.createElement("tbody"))):N}}};o.fn.init.prototype=o.fn;function z(E,F){if(F.src){o.ajax({url:F.src,async:false,dataType:"script"})}else{o.globalEval(F.text||F.textContent||F.innerHTML||"")}if(F.parentNode){F.parentNode.removeChild(F)}}function e(){return +new Date}o.extend=o.fn.extend=function(){var J=arguments[0]||{},H=1,I=arguments.length,E=false,G;if(typeof J==="boolean"){E=J;J=arguments[1]||{};H=2}if(typeof J!=="object"&&!o.isFunction(J)){J={}}if(I==H){J=this;--H}for(;H-1}},swap:function(H,G,I){var E={};for(var F in G){E[F]=H.style[F];H.style[F]=G[F]}I.call(H);for(var F in G){H.style[F]=E[F]}},css:function(H,F,J,E){if(F=="width"||F=="height"){var L,G={position:"absolute",visibility:"hidden",display:"block"},K=F=="width"?["Left","Right"]:["Top","Bottom"];function I(){L=F=="width"?H.offsetWidth:H.offsetHeight;if(E==="border"){return}o.each(K,function(){if(!E){L-=parseFloat(o.curCSS(H,"padding"+this,true))||0}if(E==="margin"){L+=parseFloat(o.curCSS(H,"margin"+this,true))||0}else{L-=parseFloat(o.curCSS(H,"border"+this+"Width",true))||0}})}if(H.offsetWidth!==0){I()}else{o.swap(H,G,I)}return Math.max(0,Math.round(L))}return o.curCSS(H,F,J)},curCSS:function(I,F,G){var L,E=I.style;if(F=="opacity"&&!o.support.opacity){L=o.attr(E,"opacity");return L==""?"1":L}if(F.match(/float/i)){F=w}if(!G&&E&&E[F]){L=E[F]}else{if(q.getComputedStyle){if(F.match(/float/i)){F="float"}F=F.replace(/([A-Z])/g,"-$1").toLowerCase();var M=q.getComputedStyle(I,null);if(M){L=M.getPropertyValue(F)}if(F=="opacity"&&L==""){L="1"}}else{if(I.currentStyle){var J=F.replace(/\-(\w)/g,function(N,O){return O.toUpperCase()});L=I.currentStyle[F]||I.currentStyle[J];if(!/^\d+(px)?$/i.test(L)&&/^\d/.test(L)){var H=E.left,K=I.runtimeStyle.left;I.runtimeStyle.left=I.currentStyle.left;E.left=L||0;L=E.pixelLeft+"px";E.left=H;I.runtimeStyle.left=K}}}}return L},clean:function(F,K,I){K=K||document;if(typeof K.createElement==="undefined"){K=K.ownerDocument||K[0]&&K[0].ownerDocument||document}if(!I&&F.length===1&&typeof F[0]==="string"){var H=/^<(\w+)\s*\/?>$/.exec(F[0]);if(H){return[K.createElement(H[1])]}}var G=[],E=[],L=K.createElement("div");o.each(F,function(P,S){if(typeof S==="number"){S+=""}if(!S){return}if(typeof S==="string"){S=S.replace(/(<(\w+)[^>]*?)\/>/g,function(U,V,T){return T.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?U:V+">"});var O=S.replace(/^\s+/,"").substring(0,10).toLowerCase();var Q=!O.indexOf("",""]||!O.indexOf("",""]||O.match(/^<(thead|tbody|tfoot|colg|cap)/)&&[1,"","
"]||!O.indexOf("",""]||(!O.indexOf("",""]||!O.indexOf("",""]||!o.support.htmlSerialize&&[1,"div
","
"]||[0,"",""];L.innerHTML=Q[1]+S+Q[2];while(Q[0]--){L=L.lastChild}if(!o.support.tbody){var R=/"&&!R?L.childNodes:[];for(var M=N.length-1;M>=0;--M){if(o.nodeName(N[M],"tbody")&&!N[M].childNodes.length){N[M].parentNode.removeChild(N[M])}}}if(!o.support.leadingWhitespace&&/^\s/.test(S)){L.insertBefore(K.createTextNode(S.match(/^\s*/)[0]),L.firstChild)}S=o.makeArray(L.childNodes)}if(S.nodeType){G.push(S)}else{G=o.merge(G,S)}});if(I){for(var J=0;G[J];J++){if(o.nodeName(G[J],"script")&&(!G[J].type||G[J].type.toLowerCase()==="text/javascript")){E.push(G[J].parentNode?G[J].parentNode.removeChild(G[J]):G[J])}else{if(G[J].nodeType===1){G.splice.apply(G,[J+1,0].concat(o.makeArray(G[J].getElementsByTagName("script"))))}I.appendChild(G[J])}}return E}return G},attr:function(J,G,K){if(!J||J.nodeType==3||J.nodeType==8){return g}var H=!o.isXMLDoc(J),L=K!==g;G=H&&o.props[G]||G;if(J.tagName){var F=/href|src|style/.test(G);if(G=="selected"&&J.parentNode){J.parentNode.selectedIndex}if(G in J&&H&&!F){if(L){if(G=="type"&&o.nodeName(J,"input")&&J.parentNode){throw"type property can't be changed"}J[G]=K}if(o.nodeName(J,"form")&&J.getAttributeNode(G)){return J.getAttributeNode(G).nodeValue}if(G=="tabIndex"){var I=J.getAttributeNode("tabIndex");return I&&I.specified?I.value:J.nodeName.match(/(button|input|object|select|textarea)/i)?0:J.nodeName.match(/^(a|area)$/i)&&J.href?0:g}return J[G]}if(!o.support.style&&H&&G=="style"){return o.attr(J.style,"cssText",K)}if(L){J.setAttribute(G,""+K)}var E=!o.support.hrefNormalized&&H&&F?J.getAttribute(G,2):J.getAttribute(G);return E===null?g:E}if(!o.support.opacity&&G=="opacity"){if(L){J.zoom=1;J.filter=(J.filter||"").replace(/alpha\([^)]*\)/,"")+(parseInt(K)+""=="NaN"?"":"alpha(opacity="+K*100+")")}return J.filter&&J.filter.indexOf("opacity=")>=0?(parseFloat(J.filter.match(/opacity=([^)]*)/)[1])/100)+"":""}G=G.replace(/-([a-z])/ig,function(M,N){return N.toUpperCase()});if(L){J[G]=K}return J[G]},trim:function(E){return(E||"").replace(/^\s+|\s+$/g,"")},makeArray:function(G){var E=[];if(G!=null){var F=G.length;if(F==null||typeof G==="string"||o.isFunction(G)||G.setInterval){E[0]=G}else{while(F){E[--F]=G[F]}}}return E},inArray:function(G,H){for(var E=0,F=H.length;E0?this.clone(true):this).get();o.fn[F].apply(o(L[K]),I);J=J.concat(I)}return this.pushStack(J,E,G)}});o.each({removeAttr:function(E){o.attr(this,E,"");if(this.nodeType==1){this.removeAttribute(E)}},addClass:function(E){o.className.add(this,E)},removeClass:function(E){o.className.remove(this,E)},toggleClass:function(F,E){if(typeof E!=="boolean"){E=!o.className.has(this,F)}o.className[E?"add":"remove"](this,F)},remove:function(E){if(!E||o.filter(E,[this]).length){o("*",this).add([this]).each(function(){o.event.remove(this);o.removeData(this)});if(this.parentNode){this.parentNode.removeChild(this)}}},empty:function(){o(this).children().remove();while(this.firstChild){this.removeChild(this.firstChild)}}},function(E,F){o.fn[E]=function(){return this.each(F,arguments)}});function j(E,F){return E[0]&&parseInt(o.curCSS(E[0],F,true),10)||0}var h="jQuery"+e(),v=0,A={};o.extend({cache:{},data:function(F,E,G){F=F==l?A:F;var H=F[h];if(!H){H=F[h]=++v}if(E&&!o.cache[H]){o.cache[H]={}}if(G!==g){o.cache[H][E]=G}return E?o.cache[H][E]:H},removeData:function(F,E){F=F==l?A:F;var H=F[h];if(E){if(o.cache[H]){delete o.cache[H][E];E="";for(E in o.cache[H]){break}if(!E){o.removeData(F)}}}else{try{delete F[h]}catch(G){if(F.removeAttribute){F.removeAttribute(h)}}delete o.cache[H]}},queue:function(F,E,H){if(F){E=(E||"fx")+"queue";var G=o.data(F,E);if(!G||o.isArray(H)){G=o.data(F,E,o.makeArray(H))}else{if(H){G.push(H)}}}return G},dequeue:function(H,G){var E=o.queue(H,G),F=E.shift();if(!G||G==="fx"){F=E[0]}if(F!==g){F.call(H)}}});o.fn.extend({data:function(E,G){var H=E.split(".");H[1]=H[1]?"."+H[1]:"";if(G===g){var F=this.triggerHandler("getData"+H[1]+"!",[H[0]]);if(F===g&&this.length){F=o.data(this[0],E)}return F===g&&H[1]?this.data(H[0]):F}else{return this.trigger("setData"+H[1]+"!",[H[0],G]).each(function(){o.data(this,E,G)})}},removeData:function(E){return this.each(function(){o.removeData(this,E)})},queue:function(E,F){if(typeof E!=="string"){F=E;E="fx"}if(F===g){return o.queue(this[0],E)}return this.each(function(){var G=o.queue(this,E,F);if(E=="fx"&&G.length==1){G[0].call(this)}})},dequeue:function(E){return this.each(function(){o.dequeue(this,E)})}}); 13 | /* 14 | * Sizzle CSS Selector Engine - v0.9.3 15 | * Copyright 2009, The Dojo Foundation 16 | * Released under the MIT, BSD, and GPL Licenses. 17 | * More information: http://sizzlejs.com/ 18 | */ 19 | (function(){var R=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,L=0,H=Object.prototype.toString;var F=function(Y,U,ab,ac){ab=ab||[];U=U||document;if(U.nodeType!==1&&U.nodeType!==9){return[]}if(!Y||typeof Y!=="string"){return ab}var Z=[],W,af,ai,T,ad,V,X=true;R.lastIndex=0;while((W=R.exec(Y))!==null){Z.push(W[1]);if(W[2]){V=RegExp.rightContext;break}}if(Z.length>1&&M.exec(Y)){if(Z.length===2&&I.relative[Z[0]]){af=J(Z[0]+Z[1],U)}else{af=I.relative[Z[0]]?[U]:F(Z.shift(),U);while(Z.length){Y=Z.shift();if(I.relative[Y]){Y+=Z.shift()}af=J(Y,af)}}}else{var ae=ac?{expr:Z.pop(),set:E(ac)}:F.find(Z.pop(),Z.length===1&&U.parentNode?U.parentNode:U,Q(U));af=F.filter(ae.expr,ae.set);if(Z.length>0){ai=E(af)}else{X=false}while(Z.length){var ah=Z.pop(),ag=ah;if(!I.relative[ah]){ah=""}else{ag=Z.pop()}if(ag==null){ag=U}I.relative[ah](ai,ag,Q(U))}}if(!ai){ai=af}if(!ai){throw"Syntax error, unrecognized expression: "+(ah||Y)}if(H.call(ai)==="[object Array]"){if(!X){ab.push.apply(ab,ai)}else{if(U.nodeType===1){for(var aa=0;ai[aa]!=null;aa++){if(ai[aa]&&(ai[aa]===true||ai[aa].nodeType===1&&K(U,ai[aa]))){ab.push(af[aa])}}}else{for(var aa=0;ai[aa]!=null;aa++){if(ai[aa]&&ai[aa].nodeType===1){ab.push(af[aa])}}}}}else{E(ai,ab)}if(V){F(V,U,ab,ac);if(G){hasDuplicate=false;ab.sort(G);if(hasDuplicate){for(var aa=1;aa":function(Z,U,aa){var X=typeof U==="string";if(X&&!/\W/.test(U)){U=aa?U:U.toUpperCase();for(var V=0,T=Z.length;V=0)){if(!V){T.push(Y)}}else{if(V){U[X]=false}}}}return false},ID:function(T){return T[1].replace(/\\/g,"")},TAG:function(U,T){for(var V=0;T[V]===false;V++){}return T[V]&&Q(T[V])?U[1]:U[1].toUpperCase()},CHILD:function(T){if(T[1]=="nth"){var U=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(T[2]=="even"&&"2n"||T[2]=="odd"&&"2n+1"||!/\D/.test(T[2])&&"0n+"+T[2]||T[2]);T[2]=(U[1]+(U[2]||1))-0;T[3]=U[3]-0}T[0]=L++;return T},ATTR:function(X,U,V,T,Y,Z){var W=X[1].replace(/\\/g,"");if(!Z&&I.attrMap[W]){X[1]=I.attrMap[W]}if(X[2]==="~="){X[4]=" "+X[4]+" "}return X},PSEUDO:function(X,U,V,T,Y){if(X[1]==="not"){if(X[3].match(R).length>1||/^\w/.test(X[3])){X[3]=F(X[3],null,null,U)}else{var W=F.filter(X[3],U,V,true^Y);if(!V){T.push.apply(T,W)}return false}}else{if(I.match.POS.test(X[0])||I.match.CHILD.test(X[0])){return true}}return X},POS:function(T){T.unshift(true);return T}},filters:{enabled:function(T){return T.disabled===false&&T.type!=="hidden"},disabled:function(T){return T.disabled===true},checked:function(T){return T.checked===true},selected:function(T){T.parentNode.selectedIndex;return T.selected===true},parent:function(T){return !!T.firstChild},empty:function(T){return !T.firstChild},has:function(V,U,T){return !!F(T[3],V).length},header:function(T){return/h\d/i.test(T.nodeName)},text:function(T){return"text"===T.type},radio:function(T){return"radio"===T.type},checkbox:function(T){return"checkbox"===T.type},file:function(T){return"file"===T.type},password:function(T){return"password"===T.type},submit:function(T){return"submit"===T.type},image:function(T){return"image"===T.type},reset:function(T){return"reset"===T.type},button:function(T){return"button"===T.type||T.nodeName.toUpperCase()==="BUTTON"},input:function(T){return/input|select|textarea|button/i.test(T.nodeName)}},setFilters:{first:function(U,T){return T===0},last:function(V,U,T,W){return U===W.length-1},even:function(U,T){return T%2===0},odd:function(U,T){return T%2===1},lt:function(V,U,T){return UT[3]-0},nth:function(V,U,T){return T[3]-0==U},eq:function(V,U,T){return T[3]-0==U}},filter:{PSEUDO:function(Z,V,W,aa){var U=V[1],X=I.filters[U];if(X){return X(Z,W,V,aa)}else{if(U==="contains"){return(Z.textContent||Z.innerText||"").indexOf(V[3])>=0}else{if(U==="not"){var Y=V[3];for(var W=0,T=Y.length;W=0)}}},ID:function(U,T){return U.nodeType===1&&U.getAttribute("id")===T},TAG:function(U,T){return(T==="*"&&U.nodeType===1)||U.nodeName===T},CLASS:function(U,T){return(" "+(U.className||U.getAttribute("class"))+" ").indexOf(T)>-1},ATTR:function(Y,W){var V=W[1],T=I.attrHandle[V]?I.attrHandle[V](Y):Y[V]!=null?Y[V]:Y.getAttribute(V),Z=T+"",X=W[2],U=W[4];return T==null?X==="!=":X==="="?Z===U:X==="*="?Z.indexOf(U)>=0:X==="~="?(" "+Z+" ").indexOf(U)>=0:!U?Z&&T!==false:X==="!="?Z!=U:X==="^="?Z.indexOf(U)===0:X==="$="?Z.substr(Z.length-U.length)===U:X==="|="?Z===U||Z.substr(0,U.length+1)===U+"-":false},POS:function(X,U,V,Y){var T=U[2],W=I.setFilters[T];if(W){return W(X,V,U,Y)}}}};var M=I.match.POS;for(var O in I.match){I.match[O]=RegExp(I.match[O].source+/(?![^\[]*\])(?![^\(]*\))/.source)}var E=function(U,T){U=Array.prototype.slice.call(U);if(T){T.push.apply(T,U);return T}return U};try{Array.prototype.slice.call(document.documentElement.childNodes)}catch(N){E=function(X,W){var U=W||[];if(H.call(X)==="[object Array]"){Array.prototype.push.apply(U,X)}else{if(typeof X.length==="number"){for(var V=0,T=X.length;V";var T=document.documentElement;T.insertBefore(U,T.firstChild);if(!!document.getElementById(V)){I.find.ID=function(X,Y,Z){if(typeof Y.getElementById!=="undefined"&&!Z){var W=Y.getElementById(X[1]);return W?W.id===X[1]||typeof W.getAttributeNode!=="undefined"&&W.getAttributeNode("id").nodeValue===X[1]?[W]:g:[]}};I.filter.ID=function(Y,W){var X=typeof Y.getAttributeNode!=="undefined"&&Y.getAttributeNode("id");return Y.nodeType===1&&X&&X.nodeValue===W}}T.removeChild(U)})();(function(){var T=document.createElement("div");T.appendChild(document.createComment(""));if(T.getElementsByTagName("*").length>0){I.find.TAG=function(U,Y){var X=Y.getElementsByTagName(U[1]);if(U[1]==="*"){var W=[];for(var V=0;X[V];V++){if(X[V].nodeType===1){W.push(X[V])}}X=W}return X}}T.innerHTML="";if(T.firstChild&&typeof T.firstChild.getAttribute!=="undefined"&&T.firstChild.getAttribute("href")!=="#"){I.attrHandle.href=function(U){return U.getAttribute("href",2)}}})();if(document.querySelectorAll){(function(){var T=F,U=document.createElement("div");U.innerHTML="

";if(U.querySelectorAll&&U.querySelectorAll(".TEST").length===0){return}F=function(Y,X,V,W){X=X||document;if(!W&&X.nodeType===9&&!Q(X)){try{return E(X.querySelectorAll(Y),V)}catch(Z){}}return T(Y,X,V,W)};F.find=T.find;F.filter=T.filter;F.selectors=T.selectors;F.matches=T.matches})()}if(document.getElementsByClassName&&document.documentElement.getElementsByClassName){(function(){var T=document.createElement("div");T.innerHTML="
";if(T.getElementsByClassName("e").length===0){return}T.lastChild.className="e";if(T.getElementsByClassName("e").length===1){return}I.order.splice(1,0,"CLASS");I.find.CLASS=function(U,V,W){if(typeof V.getElementsByClassName!=="undefined"&&!W){return V.getElementsByClassName(U[1])}}})()}function P(U,Z,Y,ad,aa,ac){var ab=U=="previousSibling"&&!ac;for(var W=0,V=ad.length;W0){X=T;break}}}T=T[U]}ad[W]=X}}}var K=document.compareDocumentPosition?function(U,T){return U.compareDocumentPosition(T)&16}:function(U,T){return U!==T&&(U.contains?U.contains(T):true)};var Q=function(T){return T.nodeType===9&&T.documentElement.nodeName!=="HTML"||!!T.ownerDocument&&Q(T.ownerDocument)};var J=function(T,aa){var W=[],X="",Y,V=aa.nodeType?[aa]:aa;while((Y=I.match.PSEUDO.exec(T))){X+=Y[0];T=T.replace(I.match.PSEUDO,"")}T=I.relative[T]?T+"*":T;for(var Z=0,U=V.length;Z0||T.offsetHeight>0};F.selectors.filters.animated=function(T){return o.grep(o.timers,function(U){return T===U.elem}).length};o.multiFilter=function(V,T,U){if(U){V=":not("+V+")"}return F.matches(V,T)};o.dir=function(V,U){var T=[],W=V[U];while(W&&W!=document){if(W.nodeType==1){T.push(W)}W=W[U]}return T};o.nth=function(X,T,V,W){T=T||1;var U=0;for(;X;X=X[V]){if(X.nodeType==1&&++U==T){break}}return X};o.sibling=function(V,U){var T=[];for(;V;V=V.nextSibling){if(V.nodeType==1&&V!=U){T.push(V)}}return T};return;l.Sizzle=F})();o.event={add:function(I,F,H,K){if(I.nodeType==3||I.nodeType==8){return}if(I.setInterval&&I!=l){I=l}if(!H.guid){H.guid=this.guid++}if(K!==g){var G=H;H=this.proxy(G);H.data=K}var E=o.data(I,"events")||o.data(I,"events",{}),J=o.data(I,"handle")||o.data(I,"handle",function(){return typeof o!=="undefined"&&!o.event.triggered?o.event.handle.apply(arguments.callee.elem,arguments):g});J.elem=I;o.each(F.split(/\s+/),function(M,N){var O=N.split(".");N=O.shift();H.type=O.slice().sort().join(".");var L=E[N];if(o.event.specialAll[N]){o.event.specialAll[N].setup.call(I,K,O)}if(!L){L=E[N]={};if(!o.event.special[N]||o.event.special[N].setup.call(I,K,O)===false){if(I.addEventListener){I.addEventListener(N,J,false)}else{if(I.attachEvent){I.attachEvent("on"+N,J)}}}}L[H.guid]=H;o.event.global[N]=true});I=null},guid:1,global:{},remove:function(K,H,J){if(K.nodeType==3||K.nodeType==8){return}var G=o.data(K,"events"),F,E;if(G){if(H===g||(typeof H==="string"&&H.charAt(0)==".")){for(var I in G){this.remove(K,I+(H||""))}}else{if(H.type){J=H.handler;H=H.type}o.each(H.split(/\s+/),function(M,O){var Q=O.split(".");O=Q.shift();var N=RegExp("(^|\\.)"+Q.slice().sort().join(".*\\.")+"(\\.|$)");if(G[O]){if(J){delete G[O][J.guid]}else{for(var P in G[O]){if(N.test(G[O][P].type)){delete G[O][P]}}}if(o.event.specialAll[O]){o.event.specialAll[O].teardown.call(K,Q)}for(F in G[O]){break}if(!F){if(!o.event.special[O]||o.event.special[O].teardown.call(K,Q)===false){if(K.removeEventListener){K.removeEventListener(O,o.data(K,"handle"),false)}else{if(K.detachEvent){K.detachEvent("on"+O,o.data(K,"handle"))}}}F=null;delete G[O]}}})}for(F in G){break}if(!F){var L=o.data(K,"handle");if(L){L.elem=null}o.removeData(K,"events");o.removeData(K,"handle")}}},trigger:function(I,K,H,E){var G=I.type||I;if(!E){I=typeof I==="object"?I[h]?I:o.extend(o.Event(G),I):o.Event(G);if(G.indexOf("!")>=0){I.type=G=G.slice(0,-1);I.exclusive=true}if(!H){I.stopPropagation();if(this.global[G]){o.each(o.cache,function(){if(this.events&&this.events[G]){o.event.trigger(I,K,this.handle.elem)}})}}if(!H||H.nodeType==3||H.nodeType==8){return g}I.result=g;I.target=H;K=o.makeArray(K);K.unshift(I)}I.currentTarget=H;var J=o.data(H,"handle");if(J){J.apply(H,K)}if((!H[G]||(o.nodeName(H,"a")&&G=="click"))&&H["on"+G]&&H["on"+G].apply(H,K)===false){I.result=false}if(!E&&H[G]&&!I.isDefaultPrevented()&&!(o.nodeName(H,"a")&&G=="click")){this.triggered=true;try{H[G]()}catch(L){}}this.triggered=false;if(!I.isPropagationStopped()){var F=H.parentNode||H.ownerDocument;if(F){o.event.trigger(I,K,F,true)}}},handle:function(K){var J,E;K=arguments[0]=o.event.fix(K||l.event);K.currentTarget=this;var L=K.type.split(".");K.type=L.shift();J=!L.length&&!K.exclusive;var I=RegExp("(^|\\.)"+L.slice().sort().join(".*\\.")+"(\\.|$)");E=(o.data(this,"events")||{})[K.type];for(var G in E){var H=E[G];if(J||I.test(H.type)){K.handler=H;K.data=H.data;var F=H.apply(this,arguments);if(F!==g){K.result=F;if(F===false){K.preventDefault();K.stopPropagation()}}if(K.isImmediatePropagationStopped()){break}}}},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(H){if(H[h]){return H}var F=H;H=o.Event(F);for(var G=this.props.length,J;G;){J=this.props[--G];H[J]=F[J]}if(!H.target){H.target=H.srcElement||document}if(H.target.nodeType==3){H.target=H.target.parentNode}if(!H.relatedTarget&&H.fromElement){H.relatedTarget=H.fromElement==H.target?H.toElement:H.fromElement}if(H.pageX==null&&H.clientX!=null){var I=document.documentElement,E=document.body;H.pageX=H.clientX+(I&&I.scrollLeft||E&&E.scrollLeft||0)-(I.clientLeft||0);H.pageY=H.clientY+(I&&I.scrollTop||E&&E.scrollTop||0)-(I.clientTop||0)}if(!H.which&&((H.charCode||H.charCode===0)?H.charCode:H.keyCode)){H.which=H.charCode||H.keyCode}if(!H.metaKey&&H.ctrlKey){H.metaKey=H.ctrlKey}if(!H.which&&H.button){H.which=(H.button&1?1:(H.button&2?3:(H.button&4?2:0)))}return H},proxy:function(F,E){E=E||function(){return F.apply(this,arguments)};E.guid=F.guid=F.guid||E.guid||this.guid++;return E},special:{ready:{setup:B,teardown:function(){}}},specialAll:{live:{setup:function(E,F){o.event.add(this,F[0],c)},teardown:function(G){if(G.length){var E=0,F=RegExp("(^|\\.)"+G[0]+"(\\.|$)");o.each((o.data(this,"events").live||{}),function(){if(F.test(this.type)){E++}});if(E<1){o.event.remove(this,G[0],c)}}}}}};o.Event=function(E){if(!this.preventDefault){return new o.Event(E)}if(E&&E.type){this.originalEvent=E;this.type=E.type}else{this.type=E}this.timeStamp=e();this[h]=true};function k(){return false}function u(){return true}o.Event.prototype={preventDefault:function(){this.isDefaultPrevented=u;var E=this.originalEvent;if(!E){return}if(E.preventDefault){E.preventDefault()}E.returnValue=false},stopPropagation:function(){this.isPropagationStopped=u;var E=this.originalEvent;if(!E){return}if(E.stopPropagation){E.stopPropagation()}E.cancelBubble=true},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=u;this.stopPropagation()},isDefaultPrevented:k,isPropagationStopped:k,isImmediatePropagationStopped:k};var a=function(F){var E=F.relatedTarget;while(E&&E!=this){try{E=E.parentNode}catch(G){E=this}}if(E!=this){F.type=F.data;o.event.handle.apply(this,arguments)}};o.each({mouseover:"mouseenter",mouseout:"mouseleave"},function(F,E){o.event.special[E]={setup:function(){o.event.add(this,F,a,E)},teardown:function(){o.event.remove(this,F,a)}}});o.fn.extend({bind:function(F,G,E){return F=="unload"?this.one(F,G,E):this.each(function(){o.event.add(this,F,E||G,E&&G)})},one:function(G,H,F){var E=o.event.proxy(F||H,function(I){o(this).unbind(I,E);return(F||H).apply(this,arguments)});return this.each(function(){o.event.add(this,G,E,F&&H)})},unbind:function(F,E){return this.each(function(){o.event.remove(this,F,E)})},trigger:function(E,F){return this.each(function(){o.event.trigger(E,F,this)})},triggerHandler:function(E,G){if(this[0]){var F=o.Event(E);F.preventDefault();F.stopPropagation();o.event.trigger(F,G,this[0]);return F.result}},toggle:function(G){var E=arguments,F=1;while(F=0){var E=G.slice(I,G.length);G=G.slice(0,I)}var H="GET";if(J){if(o.isFunction(J)){K=J;J=null}else{if(typeof J==="object"){J=o.param(J);H="POST"}}}var F=this;o.ajax({url:G,type:H,dataType:"html",data:J,complete:function(M,L){if(L=="success"||L=="notmodified"){F.html(E?o("
").append(M.responseText.replace(//g,"")).find(E):M.responseText)}if(K){F.each(K,[M.responseText,L,M])}}});return this},serialize:function(){return o.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?o.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||/select|textarea/i.test(this.nodeName)||/text|hidden|password|search/i.test(this.type))}).map(function(E,F){var G=o(this).val();return G==null?null:o.isArray(G)?o.map(G,function(I,H){return{name:F.name,value:I}}):{name:F.name,value:G}}).get()}});o.each("ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","),function(E,F){o.fn[F]=function(G){return this.bind(F,G)}});var r=e();o.extend({get:function(E,G,H,F){if(o.isFunction(G)){H=G;G=null}return o.ajax({type:"GET",url:E,data:G,success:H,dataType:F})},getScript:function(E,F){return o.get(E,null,F,"script")},getJSON:function(E,F,G){return o.get(E,F,G,"json")},post:function(E,G,H,F){if(o.isFunction(G)){H=G;G={}}return o.ajax({type:"POST",url:E,data:G,success:H,dataType:F})},ajaxSetup:function(E){o.extend(o.ajaxSettings,E)},ajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:function(){return l.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest()},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",text:"text/plain",_default:"*/*"}},lastModified:{},ajax:function(M){M=o.extend(true,M,o.extend(true,{},o.ajaxSettings,M));var W,F=/=\?(&|$)/g,R,V,G=M.type.toUpperCase();if(M.data&&M.processData&&typeof M.data!=="string"){M.data=o.param(M.data)}if(M.dataType=="jsonp"){if(G=="GET"){if(!M.url.match(F)){M.url+=(M.url.match(/\?/)?"&":"?")+(M.jsonp||"callback")+"=?"}}else{if(!M.data||!M.data.match(F)){M.data=(M.data?M.data+"&":"")+(M.jsonp||"callback")+"=?"}}M.dataType="json"}if(M.dataType=="json"&&(M.data&&M.data.match(F)||M.url.match(F))){W="jsonp"+r++;if(M.data){M.data=(M.data+"").replace(F,"="+W+"$1")}M.url=M.url.replace(F,"="+W+"$1");M.dataType="script";l[W]=function(X){V=X;I();L();l[W]=g;try{delete l[W]}catch(Y){}if(H){H.removeChild(T)}}}if(M.dataType=="script"&&M.cache==null){M.cache=false}if(M.cache===false&&G=="GET"){var E=e();var U=M.url.replace(/(\?|&)_=.*?(&|$)/,"$1_="+E+"$2");M.url=U+((U==M.url)?(M.url.match(/\?/)?"&":"?")+"_="+E:"")}if(M.data&&G=="GET"){M.url+=(M.url.match(/\?/)?"&":"?")+M.data;M.data=null}if(M.global&&!o.active++){o.event.trigger("ajaxStart")}var Q=/^(\w+:)?\/\/([^\/?#]+)/.exec(M.url);if(M.dataType=="script"&&G=="GET"&&Q&&(Q[1]&&Q[1]!=location.protocol||Q[2]!=location.host)){var H=document.getElementsByTagName("head")[0];var T=document.createElement("script");T.src=M.url;if(M.scriptCharset){T.charset=M.scriptCharset}if(!W){var O=false;T.onload=T.onreadystatechange=function(){if(!O&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){O=true;I();L();T.onload=T.onreadystatechange=null;H.removeChild(T)}}}H.appendChild(T);return g}var K=false;var J=M.xhr();if(M.username){J.open(G,M.url,M.async,M.username,M.password)}else{J.open(G,M.url,M.async)}try{if(M.data){J.setRequestHeader("Content-Type",M.contentType)}if(M.ifModified){J.setRequestHeader("If-Modified-Since",o.lastModified[M.url]||"Thu, 01 Jan 1970 00:00:00 GMT")}J.setRequestHeader("X-Requested-With","XMLHttpRequest");J.setRequestHeader("Accept",M.dataType&&M.accepts[M.dataType]?M.accepts[M.dataType]+", */*":M.accepts._default)}catch(S){}if(M.beforeSend&&M.beforeSend(J,M)===false){if(M.global&&!--o.active){o.event.trigger("ajaxStop")}J.abort();return false}if(M.global){o.event.trigger("ajaxSend",[J,M])}var N=function(X){if(J.readyState==0){if(P){clearInterval(P);P=null;if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}}else{if(!K&&J&&(J.readyState==4||X=="timeout")){K=true;if(P){clearInterval(P);P=null}R=X=="timeout"?"timeout":!o.httpSuccess(J)?"error":M.ifModified&&o.httpNotModified(J,M.url)?"notmodified":"success";if(R=="success"){try{V=o.httpData(J,M.dataType,M)}catch(Z){R="parsererror"}}if(R=="success"){var Y;try{Y=J.getResponseHeader("Last-Modified")}catch(Z){}if(M.ifModified&&Y){o.lastModified[M.url]=Y}if(!W){I()}}else{o.handleError(M,J,R)}L();if(X){J.abort()}if(M.async){J=null}}}};if(M.async){var P=setInterval(N,13);if(M.timeout>0){setTimeout(function(){if(J&&!K){N("timeout")}},M.timeout)}}try{J.send(M.data)}catch(S){o.handleError(M,J,null,S)}if(!M.async){N()}function I(){if(M.success){M.success(V,R)}if(M.global){o.event.trigger("ajaxSuccess",[J,M])}}function L(){if(M.complete){M.complete(J,R)}if(M.global){o.event.trigger("ajaxComplete",[J,M])}if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}return J},handleError:function(F,H,E,G){if(F.error){F.error(H,E,G)}if(F.global){o.event.trigger("ajaxError",[H,F,G])}},active:0,httpSuccess:function(F){try{return !F.status&&location.protocol=="file:"||(F.status>=200&&F.status<300)||F.status==304||F.status==1223}catch(E){}return false},httpNotModified:function(G,E){try{var H=G.getResponseHeader("Last-Modified");return G.status==304||H==o.lastModified[E]}catch(F){}return false},httpData:function(J,H,G){var F=J.getResponseHeader("content-type"),E=H=="xml"||!H&&F&&F.indexOf("xml")>=0,I=E?J.responseXML:J.responseText;if(E&&I.documentElement.tagName=="parsererror"){throw"parsererror"}if(G&&G.dataFilter){I=G.dataFilter(I,H)}if(typeof I==="string"){if(H=="script"){o.globalEval(I)}if(H=="json"){I=l["eval"]("("+I+")")}}return I},param:function(E){var G=[];function H(I,J){G[G.length]=encodeURIComponent(I)+"="+encodeURIComponent(J)}if(o.isArray(E)||E.jquery){o.each(E,function(){H(this.name,this.value)})}else{for(var F in E){if(o.isArray(E[F])){o.each(E[F],function(){H(F,this)})}else{H(F,o.isFunction(E[F])?E[F]():E[F])}}}return G.join("&").replace(/%20/g,"+")}});var m={},n,d=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];function t(F,E){var G={};o.each(d.concat.apply([],d.slice(0,E)),function(){G[this]=F});return G}o.fn.extend({show:function(J,L){if(J){return this.animate(t("show",3),J,L)}else{for(var H=0,F=this.length;H").appendTo("body");K=I.css("display");if(K==="none"){K="block"}I.remove();m[G]=K}o.data(this[H],"olddisplay",K)}}for(var H=0,F=this.length;H=0;H--){if(G[H].elem==this){if(E){G[H](true)}G.splice(H,1)}}});if(!E){this.dequeue()}return this}});o.each({slideDown:t("show",1),slideUp:t("hide",1),slideToggle:t("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(E,F){o.fn[E]=function(G,H){return this.animate(F,G,H)}});o.extend({speed:function(G,H,F){var E=typeof G==="object"?G:{complete:F||!F&&H||o.isFunction(G)&&G,duration:G,easing:F&&H||H&&!o.isFunction(H)&&H};E.duration=o.fx.off?0:typeof E.duration==="number"?E.duration:o.fx.speeds[E.duration]||o.fx.speeds._default;E.old=E.complete;E.complete=function(){if(E.queue!==false){o(this).dequeue()}if(o.isFunction(E.old)){E.old.call(this)}};return E},easing:{linear:function(G,H,E,F){return E+F*G},swing:function(G,H,E,F){return((-Math.cos(G*Math.PI)/2)+0.5)*F+E}},timers:[],fx:function(F,E,G){this.options=E;this.elem=F;this.prop=G;if(!E.orig){E.orig={}}}});o.fx.prototype={update:function(){if(this.options.step){this.options.step.call(this.elem,this.now,this)}(o.fx.step[this.prop]||o.fx.step._default)(this);if((this.prop=="height"||this.prop=="width")&&this.elem.style){this.elem.style.display="block"}},cur:function(F){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null)){return this.elem[this.prop]}var E=parseFloat(o.css(this.elem,this.prop,F));return E&&E>-10000?E:parseFloat(o.curCSS(this.elem,this.prop))||0},custom:function(I,H,G){this.startTime=e();this.start=I;this.end=H;this.unit=G||this.unit||"px";this.now=this.start;this.pos=this.state=0;var E=this;function F(J){return E.step(J)}F.elem=this.elem;if(F()&&o.timers.push(F)&&!n){n=setInterval(function(){var K=o.timers;for(var J=0;J=this.options.duration+this.startTime){this.now=this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;var E=true;for(var F in this.options.curAnim){if(this.options.curAnim[F]!==true){E=false}}if(E){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;this.elem.style.display=this.options.display;if(o.css(this.elem,"display")=="none"){this.elem.style.display="block"}}if(this.options.hide){o(this.elem).hide()}if(this.options.hide||this.options.show){for(var I in this.options.curAnim){o.attr(this.elem.style,I,this.options.orig[I])}}this.options.complete.call(this.elem)}return false}else{var J=G-this.startTime;this.state=J/this.options.duration;this.pos=o.easing[this.options.easing||(o.easing.swing?"swing":"linear")](this.state,J,0,1,this.options.duration);this.now=this.start+((this.end-this.start)*this.pos);this.update()}return true}};o.extend(o.fx,{speeds:{slow:600,fast:200,_default:400},step:{opacity:function(E){o.attr(E.elem.style,"opacity",E.now)},_default:function(E){if(E.elem.style&&E.elem.style[E.prop]!=null){E.elem.style[E.prop]=E.now+E.unit}else{E.elem[E.prop]=E.now}}}});if(document.documentElement.getBoundingClientRect){o.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return o.offset.bodyOffset(this[0])}var G=this[0].getBoundingClientRect(),J=this[0].ownerDocument,F=J.body,E=J.documentElement,L=E.clientTop||F.clientTop||0,K=E.clientLeft||F.clientLeft||0,I=G.top+(self.pageYOffset||o.boxModel&&E.scrollTop||F.scrollTop)-L,H=G.left+(self.pageXOffset||o.boxModel&&E.scrollLeft||F.scrollLeft)-K;return{top:I,left:H}}}else{o.fn.offset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body){return o.offset.bodyOffset(this[0])}o.offset.initialized||o.offset.initialize();var J=this[0],G=J.offsetParent,F=J,O=J.ownerDocument,M,H=O.documentElement,K=O.body,L=O.defaultView,E=L.getComputedStyle(J,null),N=J.offsetTop,I=J.offsetLeft;while((J=J.parentNode)&&J!==K&&J!==H){M=L.getComputedStyle(J,null);N-=J.scrollTop,I-=J.scrollLeft;if(J===G){N+=J.offsetTop,I+=J.offsetLeft;if(o.offset.doesNotAddBorder&&!(o.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(J.tagName))){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}F=G,G=J.offsetParent}if(o.offset.subtractsBorderForOverflowNotVisible&&M.overflow!=="visible"){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}E=M}if(E.position==="relative"||E.position==="static"){N+=K.offsetTop,I+=K.offsetLeft}if(E.position==="fixed"){N+=Math.max(H.scrollTop,K.scrollTop),I+=Math.max(H.scrollLeft,K.scrollLeft)}return{top:N,left:I}}}o.offset={initialize:function(){if(this.initialized){return}var L=document.body,F=document.createElement("div"),H,G,N,I,M,E,J=L.style.marginTop,K='
';M={position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"};for(E in M){F.style[E]=M[E]}F.innerHTML=K;L.insertBefore(F,L.firstChild);H=F.firstChild,G=H.firstChild,I=H.nextSibling.firstChild.firstChild;this.doesNotAddBorder=(G.offsetTop!==5);this.doesAddBorderForTableAndCells=(I.offsetTop===5);H.style.overflow="hidden",H.style.position="relative";this.subtractsBorderForOverflowNotVisible=(G.offsetTop===-5);L.style.marginTop="1px";this.doesNotIncludeMarginInBodyOffset=(L.offsetTop===0);L.style.marginTop=J;L.removeChild(F);this.initialized=true},bodyOffset:function(E){o.offset.initialized||o.offset.initialize();var G=E.offsetTop,F=E.offsetLeft;if(o.offset.doesNotIncludeMarginInBodyOffset){G+=parseInt(o.curCSS(E,"marginTop",true),10)||0,F+=parseInt(o.curCSS(E,"marginLeft",true),10)||0}return{top:G,left:F}}};o.fn.extend({position:function(){var I=0,H=0,F;if(this[0]){var G=this.offsetParent(),J=this.offset(),E=/^body|html$/i.test(G[0].tagName)?{top:0,left:0}:G.offset();J.top-=j(this,"marginTop");J.left-=j(this,"marginLeft");E.top+=j(G,"borderTopWidth");E.left+=j(G,"borderLeftWidth");F={top:J.top-E.top,left:J.left-E.left}}return F},offsetParent:function(){var E=this[0].offsetParent||document.body;while(E&&(!/^body|html$/i.test(E.tagName)&&o.css(E,"position")=="static")){E=E.offsetParent}return o(E)}});o.each(["Left","Top"],function(F,E){var G="scroll"+E;o.fn[G]=function(H){if(!this[0]){return null}return H!==g?this.each(function(){this==l||this==document?l.scrollTo(!F?H:o(l).scrollLeft(),F?H:o(l).scrollTop()):this[G]=H}):this[0]==l||this[0]==document?self[F?"pageYOffset":"pageXOffset"]||o.boxModel&&document.documentElement[G]||document.body[G]:this[0][G]}});o.each(["Height","Width"],function(I,G){var E=I?"Left":"Top",H=I?"Right":"Bottom",F=G.toLowerCase();o.fn["inner"+G]=function(){return this[0]?o.css(this[0],F,false,"padding"):null};o.fn["outer"+G]=function(K){return this[0]?o.css(this[0],F,false,K?"margin":"border"):null};var J=G.toLowerCase();o.fn[J]=function(K){return this[0]==l?document.compatMode=="CSS1Compat"&&document.documentElement["client"+G]||document.body["client"+G]:this[0]==document?Math.max(document.documentElement["client"+G],document.body["scroll"+G],document.documentElement["scroll"+G],document.body["offset"+G],document.documentElement["offset"+G]):K===g?(this.length?o.css(this[0],J):null):this.css(J,typeof K==="string"?K:K+"px")}})})(); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Copyright (c) 2007, Yahoo! Inc. All rights reserved. 4 | Code licensed under the BSD License: 5 | http://developer.yahoo.net/yui/license.txt 6 | version: 2.2.0 7 | */ 8 | body {font:13px 'Century Gothic',arial,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.5em;} 9 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}/*ol,ul {list-style:none;}*/caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;} 10 | 11 | /* end of yahoo reset and fonts */ 12 | 13 | canvas {border: 7px solid #eee;} 14 | 15 | body {color:#333; background: #232f2e; line-height:1.3;} 16 | p {margin:0 0 20px;} 17 | a {color:#636363;} 18 | a:hover {text-decoration:none;} 19 | strong {font-weight:bold;} 20 | em {background: #ccc; padding: 1px;} 21 | h1,h2,h3,h4,h5,h6 {font-weight:bold;} 22 | h1 {font-size:197%; margin:30px 0; color: #4f6f6c;} 23 | h2 {font-size:174%; margin:20px 0; color:#4f6f6c;} 24 | h3 {font-size:152%; margin:10px 0;} 25 | h4 {font-size:129%; margin:10px 0;} 26 | pre {background:#eee; margin:0 0 20px; padding:20px; border:1px solid #ccc; font-size:100%; overflow:auto;} 27 | code {font-size:100%; margin:0; padding:0;} 28 | ul, ol {margin:10px 0 10px 25px;} 29 | ol li {margin:0 0 10px;} 30 | 31 | div#wrapper {background:#F4F4F4; width:560px; margin:0 auto; padding:20px; border:10px solid #0f1616; border-width:0 10px 10px 10px;} 32 | div#header {position:relative; border-bottom:1px dotted; margin:0 0 10px; padding:0 0 10px;} 33 | div#header p {margin:0; padding:0;} 34 | div#header h1 {margin:0; padding:0;} 35 | ul#nav {position:absolute; top:0; right:0; list-style:none; margin:0; padding:0;} 36 | ul#nav li {display:inline; padding:0 0 0 5px;} 37 | ul#nav li a {} 38 | div#content {} 39 | div#footer {margin:40px 0 0; border-top:1px dotted; padding:10px 0 0;} 40 | .left {float:left;} 41 | .right {float:right;} 42 | .clear {clear:both;} 43 | 44 | 45 | /* multiselect styles */ 46 | .multiselect { 47 | width: 460px; 48 | height: 200px; 49 | } 50 | 51 | #switcher { 52 | margin-top: 20px; 53 | } 54 | 55 | form {margin: 0; padding: 0;} 56 | -------------------------------------------------------------------------------- /tween1.pjs: -------------------------------------------------------------------------------- 1 | class MovingObject { 2 | float x; 3 | float y; 4 | float tx; 5 | float ty; 6 | Tween t; 7 | Tween t2; 8 | 9 | public MovingObject(float x, float y, float tx, float ty) { 10 | this.x = x; 11 | this.y = y; 12 | this.tx = tx; 13 | this.ty = ty; 14 | t = new Tween(this, "x", Tween.strongEaseInOut, x, tx, 2); 15 | t2 = new Tween(this, "y", Tween.bounceEaseInOut, y, ty, 2); 16 | } 17 | 18 | public void update() { 19 | t.tick(); 20 | t2.tick(); 21 | } 22 | 23 | public void draw() { 24 | noStroke(); 25 | fill(120); 26 | ellipse(x, y, 30, 30); 27 | } 28 | 29 | public void restart() { 30 | t.start(); 31 | t2.start(); 32 | } 33 | } 34 | 35 | MovingObject mo; 36 | 37 | void setup() { 38 | size(400, 150); 39 | mo = new MovingObject(50, 30, 360, 130); 40 | } 41 | 42 | void draw() { 43 | background(244); 44 | 45 | mo.update(); 46 | mo.draw(); 47 | } 48 | 49 | void mousePressed() { 50 | mo.restart(); 51 | } -------------------------------------------------------------------------------- /tween2.pjs: -------------------------------------------------------------------------------- 1 | class ColoredObject { 2 | float x; 3 | float y; 4 | float blueLevel; 5 | float blueLevelTarget; 6 | Tween t; 7 | 8 | public ColoredObject(float x, float y, blueLevel, blueLevelTarget) { 9 | this.x = x; 10 | this.y = y; 11 | this.blueLevel = blueLevel; 12 | this.blueLevelTarget = blueLevelTarget; 13 | t = new Tween(this, "blueLevel", Tween.strongEaseInOut, blueLevel, blueLevelTarget, 2); 14 | } 15 | 16 | public void update() { 17 | t.tick(); 18 | } 19 | 20 | public void draw() { 21 | fill(123, 211, blueLevel); 22 | noStroke(); 23 | ellipse(x, y, 100, 100); 24 | } 25 | 26 | public void restart() { 27 | t.start(); 28 | } 29 | } 30 | 31 | 32 | ColoredObject co; 33 | 34 | void setup() { 35 | size(400, 150); 36 | co = new ColoredObject(100,70, 255, 0); 37 | } 38 | 39 | void draw() { 40 | background(244); 41 | 42 | co.update(); 43 | co.draw(); 44 | } 45 | 46 | void mousePressed() { 47 | co.restart(); 48 | } --------------------------------------------------------------------------------