Browse files

...

  • Loading branch information...
1 parent 6fdafb0 commit 815de345e61c4e91941976f7069c35d0363421fa @rotev committed Mar 1, 2012
View
65 js/_old.palette.js
@@ -0,0 +1,65 @@
+Palette = Klass(Composite, {
+
+ colors: [],
+
+ color_names: ["dark", "one", "two", "three", "bg"],
+ x: 10, y: 485, width: 50, height: 100,
+
+ initialize : function(config) {
+ if (typeof config.x !== 'undefined') this.x = config.x;
+ if (typeof config.y !== 'undefined') this.y = config.y;
+ if (typeof config.width !== 'undefined') this.width = config.width;
+ if (typeof config.height !== 'undefined') this.height = config.height;
+ if (typeof config.colors !== 'undefined')
+ this.colors = config.colors;
+ else
+ alert('Colors were not provided');
+
+ Composite.initialize.call(this, config);
+ },
+
+ /*append: function(node) {
+ CanvasNode.append.call(this, node);
+ },*/
+
+ generate: function() {
+
+ var x = this.x, y = this.y,
+ width = this.width / this.color_names.length,
+ height = this.height / 20,
+ colors = this.colors;
+
+ var self = this;
+
+ $(this.color_names).each(function(index, color_name) {
+ var color = colors[color_name],
+ rect;
+
+ // Original
+ rect = new Rectangle(width, height*2);
+ rect.x = x + index * width;
+ rect.y = y + (10*height);
+ rect.fill = color;
+ //self.append(rect)
+ Composite.append.call(self, rect);
+
+ for (var i = 1; i < 10; i++) {
+ // Blacks
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + (11*height) + i * height;
+ rect.fill = colors[color_name + "_" + (i*10) + "b"];
+ //self.append(rect)
+ Composite.append.call(self, rect);
+
+ // Whites
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + i * height;
+ rect.fill = colors[color_name + "_" + (100 - i*10) + "w"];
+ //self.append(rect)
+ Composite.append.call(self, rect);
+ }
+ });
+ }
+});
View
7,688 js/cake.js
7,688 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
81 js/colors_helper.js
@@ -0,0 +1,81 @@
+var ColorsHelper = Klass({
+
+ initialize : function() {
+
+ },
+
+ color_names: ["dark", "one", "two", "three", "bg"],
+
+ font_bold: "Arial",
+
+ random: function() {
+ var color_index = Math.round(Math.random() * (this.color_names.length-1));
+ return this.color_names[color_index];
+ },
+
+ calc_color: function( value, start, end, min, max ) {
+ var n = ( value - min ) / ( max - min );
+
+ end = parseInt( end.substring( 1, 7 ), 16 );
+ start = parseInt( start.substring( 1, 7 ), 16 );
+
+ var result = start +
+ ( ( ( Math.round( ( ( ( ( end & 0xFF0000 ) >> 16 ) - ( ( start & 0xFF0000 ) >> 16 ) ) * n ) ) ) << 16 )
+ + ( ( Math.round( ( ( ( ( end & 0x00FF00 ) >> 8 ) - ( ( start & 0x00FF00 ) >> 8 ) ) * n ) ) ) << 8 )
+ + ( ( Math.round( ( ( ( end & 0x0000FF ) - ( start & 0x0000FF ) ) * n ) ) ) ) ) ;
+
+ return "#" +
+ ( ( result >= 0x100000 )
+ ? ""
+ : ( result >= 0x010000 )
+ ? "0"
+ : ( result >= 0x001000 )
+ ? "00"
+ : ( result >= 0x000100 )
+ ? "000"
+ : ( result >= 0x000010 )
+ ? "0000"
+ : "00000" ) + result.toString( 16 );
+ },
+
+ extend: function(original) {
+ var extended = {};
+
+ var self = this;
+
+ $(this.color_names).each(function(index, color_name) {
+ var color = original[color_name]; // Retrieve current color.
+ extended[color_name] = color; // Copy original colors to the extended.
+
+ for (var i = 1; i < 10; i++) {
+ extended[color_name + "_" + (i*10) + "b"] = self.calc_color(i*10, color, '#000000', 1, 100);
+ extended[color_name + "_" + (i*10) + "w"] = self.calc_color(i*10, color, '#ffffff', 1, 100);
+ }
+ });
+
+ extended.white = '#ffffff';
+
+ return extended;
+ },
+
+ hex_to_rgba: function(color) {
+ function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
+ function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
+ function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
+ function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
+
+ R = hexToR(color);
+ G = hexToG(color);
+ B = hexToB(color);
+
+ return [R, G, B, 1];
+ },
+
+ opacity: function(color, o) {
+ color = this.hex_to_rgba(color);
+ color[3] = o;
+ return color;
+ }
+});
+
+var colors_helper = new ColorsHelper();
View
81 js/colors_helper.js~
@@ -0,0 +1,81 @@
+var ColorsHelper = Klass({
+
+ initialize : function() {
+
+ },
+
+ color_names: ["dark", "one", "two", "three", "bg"],
+
+ font_bold: "Classica W26 Bold",
+
+ random: function() {
+ var color_index = Math.round(Math.random() * (this.color_names.length-1));
+ return this.color_names[color_index];
+ },
+
+ calc_color: function( value, start, end, min, max ) {
+ var n = ( value - min ) / ( max - min );
+
+ end = parseInt( end.substring( 1, 7 ), 16 );
+ start = parseInt( start.substring( 1, 7 ), 16 );
+
+ var result = start +
+ ( ( ( Math.round( ( ( ( ( end & 0xFF0000 ) >> 16 ) - ( ( start & 0xFF0000 ) >> 16 ) ) * n ) ) ) << 16 )
+ + ( ( Math.round( ( ( ( ( end & 0x00FF00 ) >> 8 ) - ( ( start & 0x00FF00 ) >> 8 ) ) * n ) ) ) << 8 )
+ + ( ( Math.round( ( ( ( end & 0x0000FF ) - ( start & 0x0000FF ) ) * n ) ) ) ) ) ;
+
+ return "#" +
+ ( ( result >= 0x100000 )
+ ? ""
+ : ( result >= 0x010000 )
+ ? "0"
+ : ( result >= 0x001000 )
+ ? "00"
+ : ( result >= 0x000100 )
+ ? "000"
+ : ( result >= 0x000010 )
+ ? "0000"
+ : "00000" ) + result.toString( 16 );
+ },
+
+ extend: function(original) {
+ var extended = {};
+
+ var self = this;
+
+ $(this.color_names).each(function(index, color_name) {
+ var color = original[color_name]; // Retrieve current color.
+ extended[color_name] = color; // Copy original colors to the extended.
+
+ for (var i = 1; i < 10; i++) {
+ extended[color_name + "_" + (i*10) + "b"] = self.calc_color(i*10, color, '#000000', 1, 100);
+ extended[color_name + "_" + (i*10) + "w"] = self.calc_color(i*10, color, '#ffffff', 1, 100);
+ }
+ });
+
+ extended.white = '#ffffff';
+
+ return extended;
+ },
+
+ hex_to_rgba: function(color) {
+ function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
+ function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
+ function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
+ function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
+
+ R = hexToR(color);
+ G = hexToG(color);
+ B = hexToB(color);
+
+ return [R, G, B, 1];
+ },
+
+ opacity: function(color, o) {
+ color = this.hex_to_rgba(color);
+ color[3] = o;
+ return color;
+ }
+});
+
+var colors_helper = new ColorsHelper();
View
18 js/composite.js
@@ -0,0 +1,18 @@
+Composite = Klass(Drawable, {
+
+ initialize : function(config) {
+ Drawable.initialize.call(this, config);
+ },
+
+ append: function(obj) {
+ Drawable.append.call(this, obj);
+ },
+
+ isPointInPath : function(x, y) {
+ return 1;
+ },
+
+ getBoundingBox : function() {
+ return [0, 0, 200, 200];
+ }
+});
View
19 js/composite.js~
@@ -0,0 +1,19 @@
+Composite = Klass(Drawable, {
+
+ initialize : function(config) {
+ config.centered = true;
+ Drawable.initialize.call(this, config);
+ },
+
+ append: function(obj) {
+ Drawable.append.call(this, obj);
+ },
+
+ isPointInPath : function(x, y) {
+ return 1;
+ },
+
+ getBoundingBox : function() {
+ return [0, 0, 200, 200];
+ }
+});
View
35 js/effects.js
@@ -0,0 +1,35 @@
+var Effects = Klass({
+
+ initialize: function() {
+
+
+ },
+
+ fade_in: function(time /* absolute time */, object) {
+ var fadein = new Timeline();
+ fadein.addKeyframe(time, { absoluteOpacity: 0 });
+ fadein.addKeyframe(time + 500, { absoluteOpacity: 1 }, 'sine');
+ object.addTimeline(fadein);
+ },
+
+ fade_out: function( time /*absolute time */, object) {
+ var fadeout = new Timeline();
+ fadeout.addKeyframe(time, { });
+ fadeout.addKeyframe(time + 500, { absoluteOpacity: 0 }, 'sine');
+ object.addTimeline(fadeout);
+ },
+
+ move_up: function(distance) {
+
+ var func = function(time, object) {
+ var t = new Timeline();
+ t.addKeyframe(time, { y: object.y });
+ t.addKeyframe(time + 500, { y: object.y - distance }, 'sine');
+ object.addTimeline(t);
+ }
+
+ return func;
+ }
+});
+
+var effects = new Effects();
View
35 js/effects.js~
@@ -0,0 +1,35 @@
+var Effects = Klass({
+
+ initialize: function() {
+
+
+ },
+
+ fade_in: function(time /* absolute time */, object) {
+ var fadein = new Timeline();
+ fadein.addKeyframe(time, { absoluteOpacity: 0 });
+ fadein.addKeyframe(time + 500, { absoluteOpacity: 1 }, 'sine');
+ object.addTimeline(fadein);
+ },
+
+ fade_out: function( time /*absolute time */, object) {
+ var fadeout = new Timeline();
+ fadeout.addKeyframe(time, { });
+ fadeout.addKeyframe(time + 500, { absoluteOpacity: 0 }, 'sine');
+ object.addTimeline(fadeout);
+ },
+
+ move_up: function(distance) {
+
+ var func = function(time, object) {
+ var t = new Timeline();
+ t.addKeyframe(time, { y: object.y });
+ t.addKeyframe(time + 500, { y: object.y - distance }, 'sine');
+ object.addTimeline(t);
+ }
+
+ return func;
+ }
+});
+
+var effects = new Effects();
View
49 js/palette.js
@@ -0,0 +1,49 @@
+Palette = Klass(Composite, {
+
+ colors: [],
+
+ initialize : function(colors, config) {
+ if (colors !== null) this.colors = colors;
+ Composite.initialize.call(this, config);
+
+ this.generate();
+ },
+
+ generate: function() {
+
+ var x = this.x, y = this.y,
+ width = this.width / colors_helper.color_names.length,
+ height = this.height / 20,
+ colors = this.colors;
+
+ var self = this;
+
+ $(colors_helper.color_names).each(function(index, color_name) {
+ var color = colors[color_name],
+ rect;
+
+ // Original
+ rect = new Rectangle(width, height*2);
+ rect.x = x + index * width;
+ rect.y = y + (10*height);
+ rect.fill = color;
+ Composite.append.call(self, rect);
+
+ for (var i = 1; i < 10; i++) {
+ // Blacks
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + (11*height) + i * height;
+ rect.fill = colors[color_name + "_" + (i*10) + "b"];
+ Composite.append.call(self, rect);
+
+ // Whites
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + i * height;
+ rect.fill = colors[color_name + "_" + (100 - i*10) + "w"];
+ Composite.append.call(self, rect);
+ }
+ });
+ }
+});
View
49 js/palette.js~
@@ -0,0 +1,49 @@
+Palette = Klass(Composite, {
+
+ colors: [],
+
+ initialize : function(colors, config) {
+ if (colors !== null) this.colors = config.colors;
+ Composite.initialize.call(this, config);
+
+ this.generate();
+ },
+
+ generate: function() {
+
+ var x = this.x, y = this.y,
+ width = this.width / colors_helper.color_names.length,
+ height = this.height / 20,
+ colors = this.colors;
+
+ var self = this;
+
+ $(colors_helper.color_names).each(function(index, color_name) {
+ var color = colors[color_name],
+ rect;
+
+ // Original
+ rect = new Rectangle(width, height*2);
+ rect.x = x + index * width;
+ rect.y = y + (10*height);
+ rect.fill = color;
+ Composite.append.call(self, rect);
+
+ for (var i = 1; i < 10; i++) {
+ // Blacks
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + (11*height) + i * height;
+ rect.fill = colors[color_name + "_" + (i*10) + "b"];
+ Composite.append.call(self, rect);
+
+ // Whites
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + i * height;
+ rect.fill = colors[color_name + "_" + (100 - i*10) + "w"];
+ Composite.append.call(self, rect);
+ }
+ });
+ }
+});
View
35 js/scene.js
@@ -0,0 +1,35 @@
+Scene = Klass(Composite, {
+
+ name: "Scene AAA",
+
+ timer: 0,
+
+ initialize : function(config) {
+
+ if (typeof config.d !== 'undefined') this.d = config.d;
+
+ config.x = this.d.canvas.width / 2;
+ config.y = this.d.canvas.height / 2;
+ config.centered = true;
+
+ Composite.initialize.call(this, config);
+
+ this.create_objects();
+ this.animate();
+ },
+
+ create_objects: function() {
+
+ },
+
+ animate: function() {
+
+ },
+
+ keyaction: function(time, object, effect) {
+
+ this.timer += time;
+
+ effect(this.timer, object);
+ }
+});
View
31 js/scene.js~
@@ -0,0 +1,31 @@
+Scene = Klass(Composite, {
+
+ name: "Scene AAA",
+
+ timer: 0,
+
+ initialize : function(config) {
+
+ if (typeof config.d !== 'undefined') this.d = config.d;
+
+ Composite.initialize.call(this, config);
+
+ this.create_objects();
+ this.animate();
+ },
+
+ create_objects: function() {
+
+ },
+
+ animate: function() {
+
+ },
+
+ keyaction: function(time, object, effect) {
+
+ this.timer += time;
+
+ effect(this.timer, object);
+ }
+});
View
185 js/scenes/level4_chap1_scene1.js
@@ -0,0 +1,185 @@
+Scene_Level4Chap1Scene1 = Klass(Scene, {
+
+ name: "level4_chap1_scene1",
+
+ // objects
+ all_sets: null,
+ full: null,
+ hha: null,
+
+ functions_heading: null,
+
+ functions: ["f(x)=x^2", "g(x)=x \\cdot sin(x)", "f(x)=x",
+ "\\chi _A(x)=1 \\Leftrightarrow x\\in A",
+ "x \\mapsto \\sqrt x",
+ "g:N^R \\longrightarrow N",
+ "f(x)=x^2-4x+16",
+ "h(x)=\\frac{2x^3-15x}{17x+3}",
+ "x\\mapsto |x|"
+ ],
+
+ func_elem: [],
+
+ initialize : function(config) {
+ Scene.initialize.call(this, config);
+ },
+
+ animate: function() {
+
+ var self = this;
+
+ function keyaction(time, object, effect) {
+ Scene.keyaction.call(self, time, object, effect);
+ }
+
+ keyaction(1000, this.func_elem[0], effects.fade_in);
+ for (var i = 1; i < this.func_elem.length; i++) {
+ keyaction(200, this.func_elem[i], effects.fade_in);
+ }
+ keyaction(100, this.func_elem[4], effects.fade_out);
+ keyaction(500, this.functions_heading, effects.fade_in);
+
+ // Fade out everything.
+ keyaction(2000, this.functions_heading, effects.fade_out);
+ for (var i = 0; i < this.func_elem.length; i++) {
+ keyaction(10, this.func_elem[i], effects.fade_out);
+ }
+
+ // What is a function?
+ keyaction(500, this.what_is_heading, effects.fade_in);
+
+ // Move heading up.
+ keyaction(1000, this.what_is_heading, effects.move_up(200));
+ keyaction(500, this.def, effects.fade_in);
+ },
+
+ zoom: function(time, object) {
+
+ object.centered = true;
+
+ var zoom = new Timeline();
+ zoom.addKeyframe(time, { rotation: 0, scale: 1 });
+ zoom.addKeyframe(time + 1000, { rotation: Math.PI * 0.45, scale: 1.5 }, "sine");
+ object.addTimeline(zoom);
+
+ },
+
+ create_objects: function() {
+
+ var self = this;
+ var d = this.d;
+
+ d.all_sets = {
+ xRadius: Math.round(d.canvas.width * 0.4),
+ yRadius: Math.round(d.canvas.width * 0.4)
+ }
+
+ // Create all sets rectangle.
+ this.all_sets = new Ellipse(d.all_sets.xRadius, d.all_sets.yRadius,
+ {
+ fill: colors.white,
+ fillOpacity: 1,
+ stroke: colors.dark_80w,
+ strokeWidth: 8,
+ centered: true,
+ //x: d.canvas.width / 2,
+ //y: d.canvas.height / 2,
+ x: 0, y: 0,
+ rx: 20, ry: 20, // px border-radius
+ shadowColor: colors_helper.opacity(colors.bg_20b, 0.2),
+ shadowBlur: 30,
+ absoluteOpacity: 0
+ }
+ );
+
+ this.append(this.all_sets);
+
+ // Create full circle.
+ this.full = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fill: colors.white,
+ fillOpacity: 1,
+ //x: xCenter * 1.25, y: yCenter * 1.1,
+ x: 0 - 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0,
+ endAngle: Math.PI * 1.9
+ });
+ this.append(this.full);
+
+ // Create hha circle.
+ this.hha = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fillOpacity: 0.4,
+ //x: xCenter * 0.75, y: yCenter * 1.1,
+ x: 0 + 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0
+ });
+ this.append(this.hha);
+
+
+ // Create equations.
+ $(this.functions).each(function(index, func) {
+
+ // Calculate random (x,y) position for the equation.
+ //var x = Math.round(Math.random() * 500 - 250),
+ // y = Math.round(Math.random() * 500 - 250);
+ var x = (index % 3) * 230 - 130,
+ y = (Math.round((index-1) / 3)) * 150 - 200,
+ color = colors_helper.random(); // Choose random color
+
+ var e = new ElementNode(
+ E('span', '$' + func + '$'), {
+ "x": x,
+ "y": y,
+ center: true,
+ font: 'Arial',
+ rotation: Math.PI / 8 * (Math.random() - 0.5),
+ align: "center",
+ color: colors[color],
+ absoluteOpacity: 0
+ }
+ );
+
+ self.func_elem[index] = e;
+ self.append(e);
+ });
+
+ // Create 'Functions' Heading.
+ this.functions_heading = new ElementNode(
+ E('h1', 'פונקציות'), { x: 0, y: -170, color: colors.three, rotation: Math.PI / 10, font: 'Arial', scale: 1.8, absoluteOpacity: 0}
+ );
+ this.append(this.functions_heading);
+
+ var what_is = new ElementNode(
+ E('h1', 'מהי פונקציה?'), { x: -100, y: -100, color: colors.three, scale: 2, absoluteOpacity: 0 }
+ );
+ this.append(what_is);
+ this.what_is_heading = what_is;
+
+ var def = new ElementNode(
+ $("#level4_chap1_scene1 .c_def").html(),
+ {
+ x: 0, y: 0,
+ color: colors.three,
+ scale: 2,
+ width: 800,
+ height: 600,
+ fill: 'red',
+ width: 400,
+ absoluteOpacity: 0
+ }
+ );
+ this.append(def);
+ this.def = def;
+ }
+});
View
184 js/scenes/level4_chap1_scene1.js~
@@ -0,0 +1,184 @@
+Scene_Level4Chap1Scene1 = Klass(Scene, {
+
+ name: "level4_chap1_scene1",
+
+ // objects
+ all_sets: null,
+ full: null,
+ hha: null,
+
+ functions_heading: null,
+
+ functions: ["f(x)=x^2", "g(x)=x \\cdot sin(x)", "f(x)=x",
+ "\\chi _A(x)=1 \\Leftrightarrow x\\in A",
+ "x \\mapsto \\sqrt x",
+ "g:N^R \\longrightarrow N",
+ "f(x)=x^2-4x+16",
+ "h(x)=\\frac{2x^3-15x}{17x+3}",
+ "x\\mapsto |x|"
+ ],
+
+ func_elem: [],
+
+ initialize : function(config) {
+ Scene.initialize.call(this, config);
+ },
+
+ animate: function() {
+
+ var self = this;
+
+ function keyaction(time, object, effect) {
+ Scene.keyaction.call(self, time, object, effect);
+ }
+
+ keyaction(1000, this.func_elem[0], effects.fade_in);
+ for (var i = 1; i < this.func_elem.length; i++) {
+ keyaction(200, this.func_elem[i], effects.fade_in);
+ }
+ keyaction(100, this.func_elem[4], effects.fade_out);
+ keyaction(500, this.functions_heading, effects.fade_in);
+
+ // Fade out everything.
+ keyaction(2000, this.functions_heading, effects.fade_out);
+ for (var i = 0; i < this.func_elem.length; i++) {
+ keyaction(10, this.func_elem[i], effects.fade_out);
+ }
+
+ // What is a function?
+ keyaction(500, this.what_is_heading, effects.fade_in);
+
+ // Move heading up.
+ keyaction(1000, this.what_is_heading, effects.move_up(200));
+ keyaction(500, this.def, effects.fade_in);
+ },
+
+ zoom: function(time, object) {
+
+ object.centered = true;
+
+ var zoom = new Timeline();
+ zoom.addKeyframe(time, { rotation: 0, scale: 1 });
+ zoom.addKeyframe(time + 1000, { rotation: Math.PI * 0.45, scale: 1.5 }, "sine");
+ object.addTimeline(zoom);
+
+ },
+
+ create_objects: function() {
+
+ var self = this;
+ var d = this.d;
+
+ d.all_sets = {
+ xRadius: Math.round(d.canvas.width * 0.4),
+ yRadius: Math.round(d.canvas.width * 0.4)
+ }
+
+ // Create all sets rectangle.
+ this.all_sets = new Ellipse(d.all_sets.xRadius, d.all_sets.yRadius,
+ {
+ fill: colors.white,
+ fillOpacity: 1,
+ stroke: colors.dark_80w,
+ strokeWidth: 8,
+ centered: true,
+ //x: d.canvas.width / 2,
+ //y: d.canvas.height / 2,
+ x: 0, y: 0,
+ rx: 20, ry: 20, // px border-radius
+ shadowColor: colors_helper.opacity(colors.bg_20b, 0.2),
+ shadowBlur: 30,
+ absoluteOpacity: 0
+ }
+ );
+
+ this.append(this.all_sets);
+
+ // Create full circle.
+ this.full = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fill: colors.white,
+ fillOpacity: 1,
+ //x: xCenter * 1.25, y: yCenter * 1.1,
+ x: 0 - 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0,
+ endAngle: Math.PI * 1.9
+ });
+ this.append(this.full);
+
+ // Create hha circle.
+ this.hha = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fillOpacity: 0.4,
+ //x: xCenter * 0.75, y: yCenter * 1.1,
+ x: 0 + 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0
+ });
+ this.append(this.hha);
+
+
+ // Create equations.
+ $(this.functions).each(function(index, func) {
+
+ // Calculate random (x,y) position for the equation.
+ //var x = Math.round(Math.random() * 500 - 250),
+ // y = Math.round(Math.random() * 500 - 250);
+ var x = (index % 3) * 230 - 130,
+ y = (Math.round((index-1) / 3)) * 150 - 200,
+ color = colors_helper.random(); // Choose random color
+
+ var e = new ElementNode(
+ E('span', '$' + func + '$'), {
+ "x": x,
+ "y": y,
+ center: true,
+ font: 'Arial',
+ rotation: Math.PI / 8 * (Math.random() - 0.5),
+ align: "center",
+ color: colors[color],
+ absoluteOpacity: 0
+ }
+ );
+
+ self.func_elem[index] = e;
+ self.append(e);
+ });
+
+ // Create 'Functions' Heading.
+ this.functions_heading = new ElementNode(
+ E('h1', 'פונקציות'), { x: 0, y: -170, color: colors.three, rotation: Math.PI / 10, font: 'Arial', scale: 1.8, absoluteOpacity: 0}
+ );
+ this.append(this.functions_heading);
+
+ var what_is = new ElementNode(
+ E('h1', 'מהי פונקציה?'), { x: -100, y: -100, color: colors.three, scale: 2, absoluteOpacity: 0 }
+ );
+ this.append(what_is);
+ this.what_is_heading = what_is;
+
+ var def = new ElementNode(
+ $("#level4_chap1_scene1 .c_def").html(),
+ {
+ x: 0, y: 0,
+ color: colors.three,
+ scale: 2,
+ width: 800,
+ height: 600,
+ fill: 'red',
+ absoluteOpacity: 0
+ }
+ );
+ this.append(def);
+ this.def = def;
+ }
+});
View
83 js/scenes/level4_chap3_scene4a (copy).js
@@ -0,0 +1,83 @@
+Scene_Level4Chap3Scene4a = Klass(Scene, {
+
+ name: "level4_chap3_scene4a",
+
+ initialize : function(config) {
+ Scene.initialize.call(this, config);
+
+ this.create_scene();
+ },
+
+
+ create_scene: function() {
+
+ var d = this.d;
+
+ d.all_sets = {
+ xRadius: Math.round(d.canvas.width * 0.4),
+ yRadius: Math.round(d.canvas.width * 0.4)
+ }
+
+ // Create all sets rectangle.
+ var all_sets = new Ellipse(d.all_sets.xRadius, d.all_sets.yRadius,
+ {
+ fill: colors.white,
+ fillOpacity: 1,
+ stroke: colors.dark_80w,
+ strokeWidth: 8,
+ centered: true,
+ x: d.canvas.width / 2,
+ y: d.canvas.height / 2,
+ rx: 20, ry: 20, // px border-radius
+ shadowColor: colors_helper.opacity(colors.bg_20b, 0.2),
+ shadowBlur: 30
+ }
+ );
+
+ var fadein = new Timeline();
+ fadein.addKeyframe(0, { absoluteOpacity: 0 });
+ fadein.addKeyframe(1000, { absoluteOpacity: 0 });
+ fadein.addKeyframe(1500, { absoluteOpacity: 1 }, 'sine');
+ all_sets.addTimeline(fadein);
+
+ this.append(all_sets);
+
+ // Create full circle.
+ var full = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fill: colors.white,
+ fillOpacity: 1,
+ x: xCenter * 1.25, y: yCenter * 1.1,
+ center: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20
+ });
+ this.append(full);
+
+ // Create hha circle.
+ var hha = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fillOpacity: 0.4,
+ x: xCenter * 0.75, y: yCenter * 1.1,
+ center: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20
+ });
+ this.append(hha);
+
+ var e = new ElementNode(
+ E('h1', 'כל הקבוצות'), {
+ x: xCenter,
+ y: yCenter,
+ center: true,
+ font: 'Arial',
+ align: "center"
+ }
+ )
+ this.append(e);
+ }
+});
View
111 js/scenes/level4_chap3_scene4a.js
@@ -0,0 +1,111 @@
+Scene_Level4Chap3Scene4a = Klass(Scene, {
+
+ name: "level4_chap3_scene4a",
+
+ // objects
+ all_sets: null,
+ full: null,
+ hha: null,
+
+ initialize : function(config) {
+ Scene.initialize.call(this, config);
+ },
+
+ animate: function() {
+
+ var self = this;
+
+ function keyaction(time, object, effect) {
+ Scene.keyaction.call(self, time, object, effect);
+ }
+
+ keyaction(1000, this.all_sets, effects.fade_in);
+ keyaction(1000, this.full, effects.fade_in);
+ keyaction(1000, this.hha, effects.fade_in);
+ keyaction(4000, this, this.zoom);
+ },
+
+ zoom: function(time, object) {
+
+ object.centered = true;
+
+ var zoom = new Timeline();
+ zoom.addKeyframe(time, { rotation: 0, scale: 1 });
+ zoom.addKeyframe(time + 1000, { rotation: Math.PI * 0.45, scale: 1.5 }, "sine");
+ object.addTimeline(zoom);
+
+ },
+
+ create_objects: function() {
+
+ var d = this.d;
+
+ d.all_sets = {
+ xRadius: Math.round(d.canvas.width * 0.4),
+ yRadius: Math.round(d.canvas.width * 0.4)
+ }
+
+ // Create all sets rectangle.
+ this.all_sets = new Ellipse(d.all_sets.xRadius, d.all_sets.yRadius,
+ {
+ fill: colors.white,
+ fillOpacity: 1,
+ stroke: colors.dark_80w,
+ strokeWidth: 8,
+ centered: true,
+ //x: d.canvas.width / 2,
+ //y: d.canvas.height / 2,
+ x: 0, y: 0,
+ rx: 20, ry: 20, // px border-radius
+ shadowColor: colors_helper.opacity(colors.bg_20b, 0.2),
+ shadowBlur: 30,
+ absoluteOpacity: 0
+ }
+ );
+
+ this.append(this.all_sets);
+
+ // Create full circle.
+ this.full = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fill: colors.white,
+ fillOpacity: 1,
+ //x: xCenter * 1.25, y: yCenter * 1.1,
+ x: 0 - 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0,
+ endAngle: Math.PI * 1.9
+ });
+ this.append(this.full);
+
+ // Create hha circle.
+ this.hha = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fillOpacity: 0.4,
+ //x: xCenter * 0.75, y: yCenter * 1.1,
+ x: 0 + 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0
+ });
+ this.append(this.hha);
+
+ /*var e = new ElementNode(
+ E('h1', 'כל הקבוצות'), {
+ x: xCenter,
+ y: yCenter,
+ center: true,
+ font: 'Arial',
+ align: "center"
+ }
+ )
+ this.append(e); */
+ }
+});
View
111 js/scenes/level4_chap3_scene4a.js~
@@ -0,0 +1,111 @@
+Scene_Level4Chap3Scene4a = Klass(Scene, {
+
+ name: "level4_chap3_scene4a",
+
+ // objects
+ all_sets: null,
+ full: null,
+ hha: null,
+
+ initialize : function(config) {
+ Scene.initialize.call(this, config);
+ },
+
+ animate: function() {
+
+ var self = this;
+
+ function keyaction(time, object, effect) {
+ Scene.keyaction.call(self, time, object, effect);
+ }
+
+ keyaction(1000, this.all_sets, effects.fade_in);
+ keyaction(1000, this.full, effects.fade_in);
+ keyaction(1000, this.hha, effects.fade_in);
+ keyaction(1000, this, this.zoom);
+ },
+
+ zoom: function(time, object) {
+
+ object.centered = true;
+
+ var zoom = new Timeline();
+ zoom.addKeyframe(time, { rotation: 0, scale: 1 });
+ zoom.addKeyframe(time + 1000, { rotation: Math.PI * 0.45, scale: 1.5 }, "sine");
+ object.addTimeline(zoom);
+
+ },
+
+ create_objects: function() {
+
+ var d = this.d;
+
+ d.all_sets = {
+ xRadius: Math.round(d.canvas.width * 0.4),
+ yRadius: Math.round(d.canvas.width * 0.4)
+ }
+
+ // Create all sets rectangle.
+ this.all_sets = new Ellipse(d.all_sets.xRadius, d.all_sets.yRadius,
+ {
+ fill: colors.white,
+ fillOpacity: 1,
+ stroke: colors.dark_80w,
+ strokeWidth: 8,
+ centered: true,
+ //x: d.canvas.width / 2,
+ //y: d.canvas.height / 2,
+ x: 0, y: 0,
+ rx: 20, ry: 20, // px border-radius
+ shadowColor: colors_helper.opacity(colors.bg_20b, 0.2),
+ shadowBlur: 30,
+ absoluteOpacity: 0
+ }
+ );
+
+ this.append(this.all_sets);
+
+ // Create full circle.
+ this.full = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fill: colors.white,
+ fillOpacity: 1,
+ //x: xCenter * 1.25, y: yCenter * 1.1,
+ x: 0 - 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0,
+ endAngle: Math.PI * 1.9
+ });
+ this.append(this.full);
+
+ // Create hha circle.
+ this.hha = new Circle(d.all_sets.xRadius / 2.5, {
+ stroke: colors.dark_50w,
+ strokeWidth: 8,
+ strokeOpacity: 0.8,
+ fillOpacity: 0.4,
+ //x: xCenter * 0.75, y: yCenter * 1.1,
+ x: 0 + 100, y: 0,
+ centered: true,
+ shadowColor: colors_helper.opacity(colors.dark_80w, 0.7),
+ shadowBlur: 20,
+ absoluteOpacity: 0
+ });
+ this.append(this.hha);
+
+ /*var e = new ElementNode(
+ E('h1', 'כל הקבוצות'), {
+ x: xCenter,
+ y: yCenter,
+ center: true,
+ font: 'Arial',
+ align: "center"
+ }
+ )
+ this.append(e); */
+ }
+});
View
427 js/support.js
@@ -0,0 +1,427 @@
+/*
+ CAKE - Canvas Animation Kit Experiment
+
+ Copyright (C) 2007 Ilmari Heikkinen
+
+ This program is free software; you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation; either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program; if not, write to the Free Software
+ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
+
+ http://www.gnu.org/copyleft/gpl.html
+*/
+
+/**
+ Walks an object obj and returns an indented source code string that can be
+ evaled.
+
+ @param obj The object to turn into its source representation.
+ @param {Integer} indent Indentation level.
+ @param {String} indentCharacter Indentation string.
+ @return The source code for the object.
+ @type String
+ */
+Object.toSource = function(obj, indent, indentCharacter) {
+ if (indent == null)
+ indent = 0
+ if (!indentCharacter)
+ indentCharacter = ' '
+ var indentString = ''
+ for (var i = 0; i<indent; i++)
+ indentString += indentCharacter
+ var str
+ if (obj == null) {
+ str = 'null'
+ } else if (typeof(obj) == 'function') {
+ str = Object.prettyFunctionString(obj.toString()).replace(/\n/g, '\n' + indentString)
+ } else if (typeof(obj) == 'string') {
+ str = obj.escape()
+ } else if (obj instanceof Array) {
+ var srcs = obj.map(function(e) {
+ return Object.toSource(e)
+ })
+ if (srcs.join(", ").length < 80) {
+ str = '[ ' + srcs.join(", ") + ' ]'
+ } else {
+ var srcs = obj.map(function(e) {
+ return Object.toSource(e, indent + 1)
+ })
+ str = '[\n' + srcs.join(",\n") + '\n' + indentString + ']'
+ }
+ } else if (typeof(obj) == 'object') {
+ var members = []
+ for (var i in obj) {
+ if (i.search(/^[a-zA-Z0-9]+$/) != -1)
+ name = indentString + indentCharacter + i
+ else
+ name = Object.toSource(i, indent + 1)
+ var s = name + ' : ' +
+ Object.toSource(obj[i], indent + 1).strip()
+ if (typeof(obj[i]) == 'function')
+ s = '\n' + s
+ members.push(s)
+ }
+ str = '{\n' +
+ members.join(",\n") + '\n' +
+ indentString + '}'
+ } else {
+ str = obj.toString()
+ }
+ return indentString + str
+}
+
+// a horrible horrible hack to prettify function.toString() output
+Object.prettyFunctionString = function(str) {
+ var nstr = str.replace(/\n\s+/g, '\n')
+ var istr = ''
+ var inString = false
+ var inFor = false
+ for(var i = 0; i<nstr.length; i++) {
+ var c = nstr[i]
+ if (c == '"') {
+ inString = !inString
+ } else if (inString && c == '\\') {
+ i++
+ } else if (!inString) {
+ if (c == '(') {
+ inFor = nstr.slice(i-4,i-1) == 'for'
+ istr += ' '
+ } else if (c == ')') {
+ if (nstr[i-istr.length-1] == '\n') {
+ nstr = nstr.splice(i-2, 2, '')
+ i -= 2
+ }
+ istr = istr.slice(2)
+ } else if (c == '[') {
+ istr += ' '
+ } else if (c == ']') {
+ istr = istr.slice(2)
+ } else if (c == '{' && nstr[i-1] != '\\') {
+ inFor = false
+ istr += ' '
+ nstr = nstr.splice(i+1, 0, '\n'+istr)
+ i += istr.length + 1
+ } else if (c == '}' && nstr[i-1] != '\\') {
+ if (nstr[i-istr.length-1] == '\n') {
+ nstr = nstr.splice(i-2, 2, '')
+ i -= 2
+ } else if (nstr[i-1] == ' '){
+ nstr = nstr.splice(i-1, 1, '')
+ i -= 1
+ } else {
+ nstr = nstr.splice(i, 0, '\n'+istr.slice(2))
+ i += istr.length - 1
+ }
+ istr = istr.slice(2)
+ if (nstr[i+1] != ';' && nstr.slice(i+1).search(/^\s+else\s+/) == -1) {
+ nstr = nstr.splice(i+1, 0, '\n'+istr)
+ i += istr.length + 1
+ }
+ } else if (c == ';') {
+ if (!inFor) {
+ var idx = nstr.slice(i+1).search(/\S/)
+ if (idx > 0) {
+ nstr = nstr.splice(i+1, idx, '')
+ }
+ nstr = nstr.splice(i+1, 0, '\n'+istr)
+ i += istr.length + 1
+ }
+ } else if (c == '\n') {
+ nstr = nstr.splice(i+1, 0, istr)
+ i += istr.length
+ } else if (c == ',' && nstr.slice(i).search(/^,\s+\S+:\s/) != -1) {
+ var idx = nstr.slice(i+1).search(/\S/)
+ if (idx > 0) {
+ nstr = nstr.splice(i+1, idx, '')
+ }
+ nstr = nstr.splice(i+1, 0, '\n'+istr)
+ i += istr.length + 1
+ }
+ }
+ }
+ return nstr.replace(/\n+(\s+\n+)?/g, "\n")
+}
+
+/**
+ GuiConfig creates a DOM control panel for an object.
+
+ new GuiConfig({
+
+ object : myObject, // the object the control panel controls
+
+ container : controlPanelElement, // the DOM element that the control
+ // panel is attached to when calling
+ // showControls
+
+ controls : [ // list of controls for the object, required
+ // control entries are [method_name, type[, config]]
+ ['showText', 'boolean'],
+ ['strokeWidth', '1..10'],
+ ['radius', '1..1000', {title: 'Circle radius'}]
+ ]
+
+ })
+
+*/
+GuiConfig = Klass({
+
+ object : null,
+ container : null,
+ controls : null,
+ title : null,
+ description : null,
+
+ initialize : function(config) {
+ Object.extend(this, config)
+ if (!this.container)
+ this.container = document.body
+ if (!this.controls)
+ throw("You need to provide a list of controls.")
+ this.element = E('div')
+ this.element.className = 'GuiConfig'
+ if (this.title)
+ this.element.appendChild(E('h3', this.title, {className: 'GuiConfigTitle'}))
+ if (this.description)
+ this.element.appendChild(E('div', this.description, {className: 'GuiConfigDescription'}))
+ this.createControls()
+ },
+
+ createControls : function() {
+ for (var i=0; i<this.controls.length; i++) {
+ var c = this.controls[i]
+ if (typeof(c) == 'object' && c.length != null) {
+ var config = this.parseType(c[0], c[1], c[2])
+ } else if (typeof(c) == 'string') {
+ var type = this.guessObjectType(this.object[c])
+ var config = this.parseType(c, type, null)
+ } else {
+ throw("Unsupported control object type: " + c)
+ }
+ var widget = GuiConfig.widgets[config.type].apply(
+ GuiConfig.widgets, config.arguments
+ )
+ this.element.appendChild(widget)
+ }
+ },
+
+ guessObjectType : function(object) {
+ var t = typeof(object)
+ return t
+ },
+
+ parseType : function(varName, typeString, config) {
+ var cfg = {
+ varName : varName,
+ methodName : this.parseMethodName(varName),
+ object : this,
+ title : this.parseTitle(varName)
+ }
+ if (config)
+ Object.extend(cfg, config)
+ var type = typeString
+ if (typeof typeString == 'string') {
+ if (typeString.match(/\.\./)) {
+ var sb = typeString.split("..")
+ var start = sb[0]
+ var end = sb[1]
+ var num_re = /[-+]?\d+(\.\d+)?/
+ if (start.match(num_re) && end.match(num_re)) {
+ if (start.match(/\./) || end.match(/\./)) {
+ type = 'float'
+ cfg.values = [parseFloat(start), parseFloat(end)]
+ } else {
+ type = 'int'
+ cfg.values = [parseInt(start), parseInt(end)]
+ }
+ }
+ }
+ } else if (typeof typeString == 'object') {
+ if (typeString.length) {
+ type = 'array'
+ cfg.values = typeString
+ }
+ }
+ return {
+ type: type,
+ arguments: [cfg]
+ }
+ },
+
+ parseTitle : function(varName) {
+ var a = varName.split(/(?=[A-Z])/)
+ for (var i=1; i<a.length; i++) {
+ a[i] = a[i].toLowerCase()
+ }
+ a[0] = a[0].capitalize()
+ return a.join(" ")
+ },
+
+ parseMethodName : function(varName) {
+ return 'set' + varName.capitalize()
+ },
+
+ show : function() {
+ if (this.container)
+ this.container.appendChild(this.element)
+ },
+
+ hide : function() {
+ if (this.element.parentNode)
+ this.element.parentNode.removeChild(this.element)
+ }
+})
+GuiConfig.widgets = {
+ __setValue : function(obj, methodName, varName, value) {
+ if (obj.object)
+ if (obj.object[methodName])
+ obj.object[methodName](value)
+ else
+ obj.object[varName] = value
+ },
+
+ 'function' : function(config) {
+ var obj = config.object
+ var varName = config.varName
+ var title = config.title
+ var p = E('p')
+ var e = E('input', {type:'submit', value: title})
+ p.appendChild(e)
+ e.onclick = function(ev) {
+ if (ev.preventDefault)
+ ev.preventDefault()
+ obj.object[varName]()
+ return false
+ }
+ return p
+ },
+
+ array : function(config) {
+ var obj = config.object
+ var methodName = config.methodName
+ var varName = config.varName
+ var val = obj.object && obj.object[varName]
+ var title = config.title
+ var p = E('p')
+ var te = E('span', title)
+ te.style.marginBottom = '4px'
+ var e = E('select')
+ for (var i=0; i<config.values.length; i++) {
+ var o = E('option', {
+ value : config.values[i],
+ content : config.values[i],
+ selected : val == config.values[i]
+ })
+ e.appendChild(o)
+ }
+ p.appendChild(te)
+ p.appendChild(E('br'))
+ p.appendChild(e)
+ e.onchange = function() {
+ GuiConfig.widgets.__setValue(obj, methodName, varName, this.value)
+ }
+ return p
+ },
+
+ boolean : function(config) {
+ var obj = config.object
+ var methodName = config.methodName
+ var varName = config.varName
+ var title = config.title
+ var p = E('p')
+ var e = E('input', {type:'checkbox'})
+ p.appendChild(e)
+ p.appendChild(E('span',title))
+ e.onchange = function() {
+ GuiConfig.widgets.__setValue(obj, methodName, varName, this.checked)
+ }
+ if (obj.object)
+ e.checked = obj.object[varName]
+ return p
+ },
+
+ float : function(config) {
+ var start = config.values[0]
+ var end = config.values[1]
+ return this.slider(function(d) {
+ return (1-d)*start + d*end
+ }, config)
+ },
+
+ int : function(config) {
+ var start = config.values[0]
+ var end = config.values[1]
+ return this.slider(function(d) {
+ return parseInt((1-d)*start + d*end)
+ }, config)
+ },
+
+ slider : function(valueFunction, config) {
+ var obj = config.object
+ var methodName = config.methodName
+ var varName = config.varName
+ var title = config.title
+ var p = E('p')
+ var canvas = E.canvas(200,10)
+ p.appendChild(canvas)
+ p.appendChild(E('span', title))
+ var c = new Canvas(canvas, {redrawOnlyWhenChanged : true})
+ var slider = new CanvasNode()
+ var bar = new Rectangle(196, 2)
+ bar.x = 2
+ bar.y = 4
+ bar.stroke = 'rgba(0,0,0,0.5)'
+ bar.fill = 'rgba(255,255,255,0.5)'
+ var knob = new Rectangle(20,10)
+ knob.x = 178
+ knob.y = 0
+ knob.zIndex = 2
+ knob.stroke = 'rgba(0,0,0,0.5)'
+ knob.fill = 'rgba(255,255,255,0.5)'
+ slider.append(bar,knob)
+ var x
+ var value = 1.0
+ var down = false
+ canvas.addEventListener('mousedown', function(e) {
+ var xy = Mouse.getRelativeCoords(this,e)
+ x = xy.x
+ down = true
+ value = (x - 12) / 176
+ value = Math.min(1.0, Math.max(0.0, value))
+ knob.x = value * 176 + 2
+ var rv = valueFunction(value)
+ GuiConfig.widgets.__setValue(obj, methodName, varName, rv)
+ c.changed = true
+ }, false)
+ canvas.addEventListener('mousemove', function(e) {
+ var xy = Mouse.getRelativeCoords(this,e)
+ if (down && x != null) {
+ var dx = xy.x - x
+ var d = dx / 176
+ value = Math.min(1.0, Math.max(0.0, value+d))
+ knob.x = value * 176 + 2
+ var rv = valueFunction(value)
+ GuiConfig.widgets.__setValue(obj, methodName, varName, rv)
+ c.changed = true
+ }
+ x = xy.x
+ }, false)
+ var mu = function(e) {
+ down = false
+ }
+ window.addEventListener('mouseup', mu, false)
+ canvas.addEventListener('DOMNodeRemovedFromDocument', function(){
+ window.removeEventListener('mouseup', mu, false)
+ }, false)
+ c.append(slider)
+ return p
+ }
+}
View
60 js/test.js~
@@ -0,0 +1,60 @@
+
+/**
+ Ellipse is a scaled circle. Except it isn't. Because that wouldn't work in
+ Opera.
+ */
+Palette = Klass(Composite, {
+
+ colors: [],
+
+ color_names: ["dark", "one", "two", "three", "bg"],
+ /*x: 10, y: 485, width: 50, height: 100,*/
+
+ initialize : function(colors, config) {
+ if (colors !== null) this.colors = colors;
+ Composite.initialize.call(this, config);
+
+ this.generate();
+ },
+
+ generate: function() {
+
+ var x = this.x, y = this.y,
+ width = this.width / this.color_names.length,
+ height = this.height / 20,
+ colors = this.colors;
+
+ var self = this;
+
+ $(this.color_names).each(function(index, color_name) {
+ var color = colors[color_name],
+ rect;
+
+ // Original
+ rect = new Rectangle(width, height*2);
+ rect.x = x + index * width;
+ rect.y = y + (10*height);
+ rect.fill = color;
+ //self.append(rect)
+ Composite.append.call(self, rect);
+
+ for (var i = 1; i < 10; i++) {
+ // Blacks
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + (11*height) + i * height;
+ rect.fill = colors[color_name + "_" + (i*10) + "b"];
+ //self.append(rect)
+ Composite.append.call(self, rect);
+
+ // Whites
+ rect = new Rectangle(width, height);
+ rect.x = x + index * width;
+ rect.y = y + i * height;
+ rect.fill = colors[color_name + "_" + (100 - i*10) + "w"];
+ //self.append(rect)
+ Composite.append.call(self, rect);
+ }
+ });
+ }
+});
View
118 sets_van_diagram.html
@@ -0,0 +1,118 @@
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="js/cake.js"></script>
+ <script type="text/javascript" src="js/composite.js"></script>
+ <script type="text/javascript" src="js/scene.js"></script>
+ <script type="text/javascript" src="js/palette.js"></script>
+ <script type="text/javascript" src="js/colors_helper.js"></script>
+ <script type="text/javascript" src="js/effects.js"></script>
+ <script type="text/javascript" src="js/scenes/level4_chap1_scene1.js"></script>
+ <script type="text/javascript" src="js/scenes/level4_chap3_scene4a.js"></script>
+
+ <script type="text/x-mathjax-config">
+ MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+ </script>
+
+ <script type="text/javascript"
+ src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+ </script>
+
+ <link href='http://fast.fonts.com/cssapi/f4ed6aad-59e9-4c4a-8a74-cbf4ca8cc5fe.css' rel='stylesheet' />
+
+ <style type="text/css">
+ BODY {
+ background-color: #222;
+ direction: rtl;
+ font-family: "Classica W26 Bold", Arial;
+ }
+
+ #canvas_container {
+ width: 800px;
+ height: 600px;
+ margin: auto;
+ overflow: hidden;
+ }
+
+ .def {
+ text-decoration: underline;
+ color: #333;
+ }
+
+ .color1 { color: #FF4242; }
+ .color2 { color: #1693A5; }
+ .color3 { color: #755D87; }
+ </style>
+ </head>
+
+ <body>
+
+ <div id="canvas_container"></div>
+
+
+ <div class="content">
+ <ul>
+ <li id="level4_chap1_scene1">
+ <ul>
+ <li class="c_def">
+ <p style="text-align: center;">
+ פונקציה היא
+<br/>
+ <span class="def color1">כלל התאמה</span>
+ <span class="def color2">מלא</span>
+ ו<span class="def color3">חד-ערכי</span>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+
+ <script type="text/javascript">
+
+ var container = $("#canvas_container");
+
+ colors = colors_helper.extend({
+ bg: '#EFFFCD',
+ one: '#FF4242',
+ two: '#D4EE5E',
+ three: '#1693A5',
+ dark: '#2E2633'
+ });
+
+ var d = {
+ "canvas": {
+ // Keep 4:3 ratio
+ width: container.width(),
+ height: container.height(),
+
+ content_top: 150
+ }
+ }
+
+ var xCenter = d.canvas.width / 2,
+ yCenter = d.canvas.height / 2;
+
+
+ // Create canvas.
+ var c = E.canvas(d.canvas.width, d.canvas.height)
+ var canvas = new Canvas(c)
+ canvas.fill = colors_helper.hex_to_rgba(colors.bg_70w);
+ container.append(c);
+
+ var scene = new CanvasNode({
+ font: 'Arial'
+ });
+ canvas.appendChild(scene);
+
+ var palette = new Palette(colors, {
+ width: 80, height: 120, x: 10, y: 230
+ });
+ scene.append(palette);
+
+ scene.append(new Scene_Level4Chap1Scene1({ "d": d }));
+
+ </script>
+ </body>
+</html>

0 comments on commit 815de34

Please sign in to comment.