added comments and chose meaningful names for examples

examplesForWebDemo/src/html5/creatures/creatures.js

@@ -9,19 +9,19 @@
             return this.$y;
         }, plus:function (v) {
             {
-                return interactive3.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y());
+                return creatures.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y());
             }
         }, minus:function () {
             {
-                return interactive3.v_0(-this.get_x(), -this.get_y());
+                return creatures.v_0(-this.get_x(), -this.get_y());
             }
         }, minus$0:function (v) {
             {
-                return interactive3.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y());
+                return creatures.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y());
             }
         }, times:function (koef) {
             {
-                return interactive3.v_0(this.get_x() * koef, this.get_y() * koef);
+                return creatures.v_0(this.get_x() * koef, this.get_y() * koef);
             }
         }, distanceTo:function (v) {
             {
@@ -31,7 +31,7 @@
             {
                 var sin = Math.sin(theta);
                 var cos = Math.cos(theta);
-                return interactive3.v_0(this.get_x() * cos - this.get_y() * sin, this.get_x() * sin + this.get_y() * cos);
+                return creatures.v_0(this.get_x() * cos - this.get_y() * sin, this.get_x() * sin + this.get_y() * cos);
             }
         }, isInRect:function (topLeft, size) {
             {
@@ -111,7 +111,7 @@
             this.$valid = false;
             this.$shapes = new Kotlin.ArrayList;
             this.$selection = null;
-            this.$dragOff = new interactive3.Vector_0(0, 0);
+            this.$dragOff = new creatures.Vector_0(0, 0);
             this.$interval = 1000 / 30;
             {
                 var tmp$5;
@@ -164,24 +164,24 @@
                     ));
                 $(this.get_canvas()).dblclick((tmp$3 = this , function (it) {
                     {
-                        var newCreature = new interactive3.Creature_0(tmp$3.mousePos_0(it), tmp$3);
+                        var newCreature = new creatures.Creature_0(tmp$3.mousePos_0(it), tmp$3);
                         tmp$3.addShape(newCreature);
                         tmp$3.set_valid(false);
                     }
                 }
                     ));
-                setInterval((tmp$4 = this , function () {
+                $(this.get_canvas()).resize((tmp$4 = this , function () {
                     {
-                        tmp$4.draw();
+                        tmp$4.updateSize();
+                    }
+                }
+                    ));
+                setInterval((tmp$5 = this , function () {
+                    {
+                        tmp$5.draw();
                     }
                 }
                     ), this.get_interval());
-                setInterval((tmp$5 = this , function () {
-                    {
-                        tmp$5.updateSize(tmp$5.get_canvas());
-                    }
-                }
-                    ), 500);
             }
         }, get_canvas:function () {
             return this.$canvas;
@@ -195,7 +195,7 @@
             this.$height = tmp$0;
         }, get_size:function () {
             {
-                return interactive3.v_0(this.get_width(), this.get_height());
+                return creatures.v_0(this.get_width(), this.get_height());
             }
         }, get_context:function () {
             return this.$context;
@@ -217,21 +217,21 @@
             this.$dragOff = tmp$0;
         }, get_interval:function () {
             return this.$interval;
-        }, updateSize:function (canvas) {
+        }, updateSize:function () {
             {
-                this.set_width(canvas.width);
+                this.set_width(this.get_canvas().width);
-                this.set_height(canvas.height);
+                this.set_height(this.get_canvas().height);
             }
         }, mousePos_0:function (e) {
             {
-                var offset = new interactive3.Vector_0(0, 0);
+                var offset = new creatures.Vector_0(0, 0);
                 var element = this.get_canvas();
                 while (element != null) {
                     var el = Kotlin.sure(element);
-                    offset = offset.plus(new interactive3.Vector_0(el.offsetLeft, el.offsetTop));
+                    offset = offset.plus(new creatures.Vector_0(el.offsetLeft, el.offsetTop));
                     element = el.offsetParent;
                 }
-                return (new interactive3.Vector_0(e.pageX, e.pageY)).minus$0(offset);
+                return (new creatures.Vector_0(e.pageX, e.pageY)).minus$0(offset);
             }
         }, addShape:function (shape) {
             {
@@ -253,7 +253,7 @@
                     return;
                 this.clear();
                 {
-                    tmp$0 = interactive3.reversed(this.get_shapes()).iterator();
+                    tmp$0 = creatures.reversed(this.get_shapes()).iterator();
                     while (tmp$0.hasNext()) {
                         var shape = tmp$0.next();
                         {
@@ -261,7 +261,7 @@
                         }
                     }
                 }
-                interactive3.get_Kotlin().draw(this);
+                creatures.get_Kotlin().draw(this);
                 this.set_valid(true);
             }
         }
@@ -301,8 +301,8 @@
             this.$pos = pos;
             this.$state = state;
             this.super_init();
-            this.$shadowOffset = interactive3.v_0(-5, 5);
+            this.$shadowOffset = creatures.v_0(-5, 5);
-            this.$colorStops = interactive3.get_gradientGenerator().getNext();
+            this.$colorStops = creatures.get_gradientGenerator().getNext();
             this.$relSize = 0.05;
         }, get_pos:function () {
             return this.$pos;
@@ -331,7 +331,7 @@
             }
         }, get_directionToLogo:function () {
             {
-                return interactive3.get_Kotlin().get_centre().minus$0(this.get_position()).get_normalized();
+                return creatures.get_Kotlin().get_centre().minus$0(this.get_position()).get_normalized();
             }
         }, contains:function (mousePos) {
             {
@@ -435,12 +435,12 @@
             }
         }
         });
-        var Logo = Kotlin.Class.create(Shape, {initialize:function (pos, relSize) {
+        var Logo = Kotlin.Class.create(Shape, {initialize:function (pos) {
             this.$pos = pos;
-            this.$relSize = relSize;
             this.super_init();
-            this.$shadowOffset = interactive3.v_0(-3, 3);
+            this.$relSize = 0.25;
-            this.$imageSize = interactive3.v_0(377, 393);
+            this.$shadowOffset = creatures.v_0(-3, 3);
+            this.$imageSize = creatures.v_0(377, 393);
             this.$size = this.get_imageSize().times(this.get_relSize());
         }, get_pos:function () {
             return this.$pos;
@@ -448,8 +448,6 @@
             this.$pos = tmp$0;
         }, get_relSize:function () {
             return this.$relSize;
-        }, set_relSize:function (tmp$0) {
-            this.$relSize = tmp$0;
         }, get_shadowOffset:function () {
             return this.$shadowOffset;
         }, get_imageSize:function () {
@@ -501,23 +499,23 @@
         return {Shape_0:Shape, Logo_0:Logo, Creature_0:Creature, RadialGradientGenerator_0:RadialGradientGenerator, CanvasState_0:CanvasState, Vector_0:Vector};
     }
         ();
-    var interactive3 = Kotlin.Namespace.create({initialize:function () {
+    var creatures = Kotlin.Namespace.create({initialize:function () {
-        interactive3.$Kotlin = new interactive3.Logo_0(interactive3.v_0(20, 20), 0.25);
+        creatures.$Kotlin = new creatures.Logo_0(creatures.v_0(300, 100));
-        interactive3.$gradientGenerator = new interactive3.RadialGradientGenerator_0(getContext());
+        creatures.$gradientGenerator = new creatures.RadialGradientGenerator_0(getContext());
     }, get_Kotlin:function () {
-        return interactive3.$Kotlin;
+        return creatures.$Kotlin;
     }, get_gradientGenerator:function () {
-        return interactive3.$gradientGenerator;
+        return creatures.$gradientGenerator;
     }, v_0:function (x, y) {
         {
-            return new interactive3.Vector_0(x, y);
+            return new creatures.Vector_0(x, y);
         }
     }, main:function () {
         {
-            var state = new interactive3.CanvasState_0(getCanvas());
+            var state = new creatures.CanvasState_0(getCanvas());
-            state.addShape(interactive3.get_Kotlin());
+            state.addShape(creatures.get_Kotlin());
-            state.addShape(new interactive3.Creature_0(state.get_size().times(0.25), state));
+            state.addShape(new creatures.Creature_0(state.get_size().times(0.25), state));
-            state.addShape(new interactive3.Creature_0(state.get_size().times(0.75), state));
+            state.addShape(new creatures.Creature_0(state.get_size().times(0.75), state));
             setTimeout(function () {
                     {
                         state.set_valid(false);
@@ -536,8 +534,8 @@
         }
     }
     }, classes);
-    interactive3.initialize();
+    creatures.initialize();
 }
 
 var args = [];
-interactive3.main(args);
+creatures.main(args);

examplesForWebDemo/src/html5/creatures/main.kt

@@ -1,4 +1,8 @@
-package interactive3
+/*
+In this example strange creatures are watching the kotlin logo. You can drag'n'drop them as well as the logo.
+Doubleclick to add more creatures but be careful. They may be watching you!
+*/
+package creatures
 // importing some of the API defined
 import jquery.*
 import html5.*
@@ -41,12 +45,11 @@ abstract class Shape() {
     }
 }
 
-val Kotlin = Logo(v(20.0, 20.0))
+val Kotlin = Logo(v(300.0, 100.0))
 
-class Logo(override var pos : Vector,
+class Logo(override var pos : Vector) : Shape()
-           var relSize : Double = 0.25)
-                        : Shape()
 {
+    val relSize : Double = 0.25
     val shadowOffset = v(-3.0, 3.0)
     val imageSize = v(377.0, 393.0)
     var size : Vector = imageSize * relSize
@@ -54,6 +57,7 @@ class Logo(override var pos : Vector,
     val position : Vector
        get() = if (selected) pos - shadowOffset else pos
 
+
     fun drawLogo(state : CanvasState) {
         size = imageSize * (state.size.x / imageSize.x) * relSize
         // getKotlinLogo() is a 'magic' function here defined only for purposes of demonstration but in fact it just find an element containing the logo
@@ -220,16 +224,16 @@ class CanvasState(val canvas : Canvas) {
             valid = false
         }
 
+        jq(canvas).resize {
+            updateSize()
+        }
+
         setInterval({
             draw()
         }, interval)
-
-        setInterval({
-            updateSize(canvas)
-        }, 500)
     }
 
-    fun updateSize(canvas : Canvas) {
+    fun updateSize() {
         width = canvas.width
         height = canvas.height
     }

examplesForWebDemo/src/html5/creatures/template.html

@@ -4,12 +4,13 @@
 <head>
     <title>Canvas demo</title>
 </head>
-<body>
+
-<canvas height="450" width="800"></canvas>
+
+<canvas width="600" height="800"></canvas>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="../../../../translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
 <script src="../../../../translator/testFiles/canvas_helper.js" type="text/javascript"></script>
-<script src="interactive3.js" type="text/javascript"></script>
+<script src="creatures.js" type="text/javascript"></script>
 <img src="kotlinlogo.png" hidden=true/>
 </body>
 </html>

examplesForWebDemo/src/html5/demo/demo.html

@@ -1,44 +0,0 @@
-<body>
-<canvas height="450" width="800"></canvas>
-<script>
-
-    var context = document.getElementsByTagName('canvas')[0].getContext('2d');
-
-    var lastX = context.canvas.width * Math.random();
-    var lastY = context.canvas.height * Math.random();
-    var hue = 0;
-    function line() {
-        context.save();
-        context.translate(context.canvas.width / 2, context.canvas.height / 2);
-        context.scale(0.9, 0.9);
-        context.translate(-context.canvas.width / 2, -context.canvas.height / 2);
-        context.beginPath();
-        context.lineWidth = 5 + Math.random() * 10;
-        context.moveTo(lastX, lastY);
-        lastX = context.canvas.width * Math.random();
-        lastY = context.canvas.height * Math.random();
-        context.bezierCurveTo(context.canvas.width * Math.random(),
-                context.canvas.height * Math.random(),
-                context.canvas.width * Math.random(),
-                context.canvas.height * Math.random(),
-                lastX, lastY);
-
-        hue = hue + 10 * Math.random();
-        context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
-        context.shadowColor = 'white';
-        context.shadowBlur = 10;
-        context.stroke();
-        context.restore();
-    }
-    setInterval(line, 50);
-
-    function blank() {
-        context.fillStyle = 'rgba(0,0,0,0.1)';
-        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
-    }
-    setInterval(blank, 40);
-
-</script>
-
-
-</body>

examplesForWebDemo/src/html5/demo/demo_template.html

@@ -1,51 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>Canvas demo</title>
-</head>
-<body>
-<canvas height="450" width="800"></canvas>
-<script>
-
-    var context = document.getElementsByTagName('canvas')[0].getContext('2d');
-
-    var lastX = context.canvas.width * Math.random();
-    var lastY = context.canvas.height * Math.random();
-    var hue = 0;
-    function line() {
-        context.save();
-        context.translate(context.canvas.width / 2, context.canvas.height / 2);
-        context.scale(0.9, 0.9);
-        context.translate(-context.canvas.width / 2, -context.canvas.height / 2);
-        context.beginPath();
-        context.lineWidth = 5 + Math.random() * 10;
-        context.moveTo(lastX, lastY);
-        lastX = context.canvas.width * Math.random();
-        lastY = context.canvas.height * Math.random();
-        context.bezierCurveTo(context.canvas.width * Math.random(),
-                context.canvas.height * Math.random(),
-                context.canvas.width * Math.random(),
-                context.canvas.height * Math.random(),
-                lastX, lastY);
-
-        hue = hue + 10 * Math.random();
-        context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
-        context.shadowColor = 'white';
-        context.shadowBlur = 10;
-        context.stroke();
-        context.restore();
-    }
-    setInterval(line, 50);
-
-    function blank() {
-        context.fillStyle = 'rgba(0,0,0,0.1)';
-        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
-    }
-    setInterval(blank, 40);
-
-</script>
-
-
-</body>
-</html>

examplesForWebDemo/src/html5/demo/template.html

@@ -1,13 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>Canvas demo</title>
-</head>
-<body>
-<canvas height="450" width="800"></canvas>
-<script src="../kotlin_lib.js" type="text/javascript"></script>
-<script src="../canvas_helper.js" type="text/javascript"></script>
-<script src="test.js" type="text/javascript"></script>
-</body>
-</html>

examplesForWebDemo/src/html5/fancyLines/fancylines.js

@@ -1,38 +1,6 @@
 {
     var classes = function () {
-        var HelloKotlin = Kotlin.Class.create({initialize:function () {
+        var FancyLines = Kotlin.Class.create({initialize:function () {
-            this.$context = getContext();
-            this.$height = getCanvas().height;
-            this.$width = getCanvas().width;
-        }, get_context:function () {
-            return this.$context;
-        }, get_height:function () {
-            return this.$height;
-        }, get_width:function () {
-            return this.$width;
-        }, run:function () {
-            {
-                var tmp$0;
-                setInterval((tmp$0 = this , function () {
-                    {
-                        tmp$0.greet();
-                    }
-                }
-                    ), 2000);
-            }
-        }, greet:function () {
-            {
-                this.get_context().save();
-                var message = 'Hello Kotlin';
-                this.get_context().font = 'bold 20px Georgia, serif';
-                this.get_context().scale(5, 5);
-                this.get_context().strokeStyle = 'rgba(0,0,0, 0.8)';
-                this.get_context().strokeText(message, this.get_width() / 7 * Math.random(), this.get_height() / 7 * Math.random());
-                this.get_context().restore();
-            }
-        }
-        });
-        var Test = Kotlin.Class.create({initialize:function () {
             this.$context = getContext();
             this.$height = getCanvas().height;
             this.$width = getCanvas().width;
@@ -97,23 +65,23 @@
             }
         }
         });
-        return {Test_0:Test, HelloKotlin_0:HelloKotlin};
+        return {FancyLines_0:FancyLines};
     }
         ();
-    var testhtml = Kotlin.Namespace.create({initialize:function () {
+    var fancylines = Kotlin.Namespace.create({initialize:function () {
     }, main:function () {
         {
             $(function () {
                     {
-                        (new testhtml.Test_0).run();
+                        (new fancylines.FancyLines_0).run();
                     }
                 }
             );
         }
     }
     }, classes);
-    testhtml.initialize();
+    fancylines.initialize();
 }
 
 var args = [];
-testhtml.main(args);
+fancylines.main(args);

examplesForWebDemo/src/html5/fancyLines/template.html

@@ -9,6 +9,6 @@
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="../../../../translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
 <script src="../../../../translator/testFiles/canvas_helper.js" type="text/javascript"></script>
-<script src="testhtml.js" type="text/javascript"></script>
+<script src="fancylines.js" type="text/javascript"></script>
 </body>
 </html>

examplesForWebDemo/src/html5/fancyLines/test.kt

@@ -1,18 +1,24 @@
-package testhtml;
+/*
+This example is based on example from html5 canvas2D docs:
+    http://www.w3.org/TR/2dcontext/
+Note that only a subset of the api is supported for now.
+*/
+
+package fancylines
 
 import js.*;
 import html5.*;
 import jquery.*;
 
 fun main() {
+    //jq is a name for JQuery function
     jq {
-        Test().run();
+        FancyLines().run();
-       // HelloKotlin().run();
     }
 }
 
-
+class FancyLines() {
-class Test() {
+    // we use two 'magic' functions here getContext() and getCanvas()
     val context = getContext();
     val height = getCanvas().height;
     val width = getCanvas().width;
@@ -22,7 +28,9 @@ class Test() {
 
     fun line() {
         context.save();
+
         context.beginPath();
+
         context.lineWidth = 20.0 * Math.random();
         context.moveTo(x, y);
 
@@ -33,12 +41,14 @@ class Test() {
             width * Math.random(), height * Math.random(), x, y);
 
         hue += Math.random() * 10;
+
         context.strokeStyle = "hsl($hue, 50%, 50%)";
 
         context.shadowColor = "white";
         context.shadowBlur = 10.0;
 
         context.stroke();
+
         context.restore();
     }
 
@@ -52,26 +62,3 @@ class Test() {
         setInterval({blank()}, 100);
     }
 }
-
-class HelloKotlin() {
-    val context = getContext();
-    val height = getCanvas().height;
-    val width = getCanvas().width;
-
-    fun run() {
-        setInterval({
-            greet();
-        }, 2000);
-    }
-
-    fun greet() {
-        context.save();
-        val message = "Hello Kotlin";
-        context.font = "bold 20px Georgia, serif";
-        context.scale(5.0, 5.0);
-        context.strokeStyle = "rgba(0,0,0, 0.8)";
-        context.strokeText(message, /*(width / 3) + */ (width / 7) * Math.random(),
-                                    /*(height / 3) + */ (height / 7) * Math.random());
-        context.restore();
-    }
-}

examplesForWebDemo/src/html5/floatingText/hello.js

@@ -1,25 +1,16 @@
 {
     var classes = function () {
-        var Moving = Kotlin.Class.create({initialize:function () {
+        var HelloKotlin = Kotlin.Class.create({initialize:function () {
-            this.$context = getContext();
+            this.$relX = 0.2 + 0.2 * Math.random();
-            this.$height = getCanvas().height;
+            this.$relY = 0.4 + 0.2 * Math.random();
-            this.$width = getCanvas().width;
-            this.$relX = 0.5;
-            this.$relY = 0.5;
             this.$relXVelocity = this.randomVelocity();
             this.$relYVelocity = this.randomVelocity();
             this.$message = 'Hello Kotlin';
             this.$textHeightInPixels = 60;
             {
-                this.get_context().font = 'bold ' + this.get_textHeightInPixels() + 'px Georgia, serif';
+                hello.get_context().font = 'bold ' + this.get_textHeightInPixels() + 'px Georgia, serif';
             }
-            this.$textWidthInPixels = this.get_context().measureText(this.get_message()).width;
+            this.$textWidthInPixels = hello.get_context().measureText(this.get_message()).width;
-        }, get_context:function () {
-            return this.$context;
-        }, get_height:function () {
-            return this.$height;
-        }, get_width:function () {
-            return this.$width;
         }, get_relX:function () {
             return this.$relX;
         }, set_relX:function (tmp$0) {
@@ -30,11 +21,11 @@
             this.$relY = tmp$0;
         }, get_absX:function () {
             {
-                return this.get_relX() * this.get_width();
+                return this.get_relX() * hello.get_width();
             }
         }, get_absY:function () {
             {
-                return this.get_relY() * this.get_height();
+                return this.get_relY() * hello.get_height();
             }
         }, get_relXVelocity:function () {
             return this.$relXVelocity;
@@ -50,41 +41,31 @@
             return this.$textHeightInPixels;
         }, get_textWidthInPixels:function () {
             return this.$textWidthInPixels;
-        }, renderText:function () {
+        }, draw:function () {
             {
-                this.get_context().save();
+                hello.get_context().save();
                 this.move();
-                this.get_context().shadowColor = 'white';
+                hello.get_context().shadowColor = '#000000';
-                this.get_context().shadowBlur = 10;
+                hello.get_context().shadowBlur = 5;
-                this.get_context().fillStyle = 'rgba(100,200,0,0.7)';
+                hello.get_context().shadowOffsetX = -4;
-                this.get_context().fillText(this.get_message(), this.get_absX(), this.get_absY());
+                hello.get_context().shadowOffsetY = 4;
-                this.get_context().restore();
+                hello.get_context().fillStyle = 'rgb(242,160,110)';
+                hello.get_context().fillText(this.get_message(), this.get_absX(), this.get_absY());
+                hello.get_context().restore();
             }
         }, move:function () {
             {
-                var relTextWidth = this.get_textWidthInPixels() / this.get_width();
+                var relTextWidth = this.get_textWidthInPixels() / hello.get_width();
                 if (this.get_relX() > 1 - relTextWidth - this.get_abs(this.get_relXVelocity()) || this.get_relX() < this.get_abs(this.get_relXVelocity())) {
                     this.set_relXVelocity(this.get_relXVelocity() * -1);
                 }
-                var relTextHeight = this.get_textHeightInPixels() / this.get_height();
+                var relTextHeight = this.get_textHeightInPixels() / hello.get_height();
                 if (this.get_relY() > 1 - this.get_abs(this.get_relYVelocity()) || this.get_relY() < this.get_abs(this.get_relYVelocity()) + relTextHeight) {
                     this.set_relYVelocity(this.get_relYVelocity() * -1);
                 }
                 this.set_relX(this.get_relX() + this.get_relXVelocity());
                 this.set_relY(this.get_relY() + this.get_relYVelocity());
             }
-        }, changeDirection:function () {
-            {
-                this.set_relYVelocity(this.randomVelocity());
-                this.set_relXVelocity(this.randomVelocity());
-            }
-        }, renderBackground:function () {
-            {
-                this.get_context().save();
-                this.get_context().fillStyle = 'rgba(255,255,1,0.2)';
-                this.get_context().fillRect(0, 0, this.get_width(), this.get_height());
-                this.get_context().restore();
-            }
         }, randomVelocity:function () {
             var tmp$0;
             if (Math.random() < 0.5)
@@ -92,25 +73,7 @@
             else
                 tmp$0 = -1;
             {
-                return 0.01 * Math.random() * tmp$0;
+                return 0.03 * Math.random() * tmp$0;
-            }
-        }, run:function () {
-            {
-                var tmp$1;
-                var tmp$0;
-                setInterval((tmp$0 = this , function () {
-                    {
-                        tmp$0.renderBackground();
-                        tmp$0.renderText();
-                    }
-                }
-                    ), 10);
-                setInterval((tmp$1 = this , function () {
-                    {
-                        tmp$1.changeDirection();
-                    }
-                }
-                    ), 3000);
             }
         }, get_abs:function (receiver) {
             var tmp$0;
@@ -123,23 +86,61 @@
             }
         }
         });
-        return {Moving_0:Moving};
+        return {HelloKotlin_0:HelloKotlin};
     }
         ();
-    var moving = Kotlin.Namespace.create({initialize:function () {
+    var hello = Kotlin.Namespace.create({initialize:function () {
+        hello.$context = getContext();
+        hello.$height = getCanvas().height;
+        hello.$width = getCanvas().width;
+    }, get_context:function () {
+        return hello.$context;
+    }, get_height:function () {
+        return hello.$height;
+    }, get_width:function () {
+        return hello.$width;
+    }, renderBackground:function () {
+        {
+            hello.get_context().save();
+            hello.get_context().fillStyle = '#5C7EED';
+            hello.get_context().fillRect(0, 0, hello.get_width(), hello.get_height());
+            hello.get_context().restore();
+        }
     }, main:function () {
         {
+            var interval = 50;
+            var logos = Kotlin.arrayFromFun(3, function (it) {
+                    {
+                        return new hello.HelloKotlin_0;
+                    }
+                }
+            );
             $(function () {
                     {
-                        (new moving.Moving_0).run();
+                        setInterval(function () {
+                                {
+                                    var tmp$0;
+                                    hello.renderBackground();
+                                    {
+                                        tmp$0 = Kotlin.arrayIterator(logos);
+                                        while (tmp$0.hasNext()) {
+                                            var logo = tmp$0.next();
+                                            {
+                                                logo.draw();
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            , interval);
                     }
                 }
             );
         }
     }
     }, classes);
-    moving.initialize();
+    hello.initialize();
 }
 
 var args = [];
-moving.main(args);
+hello.main(args);

examplesForWebDemo/src/html5/floatingText/template.html

@@ -9,6 +9,6 @@
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="../../../../translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
 <script src="../../../../translator/testFiles/canvas_helper.js" type="text/javascript"></script>
-<script src="moving.js" type="text/javascript"></script>
+<script src="hello.js" type="text/javascript"></script>
 </body>
 </html>

examplesForWebDemo/src/html5/floatingText/test.kt

@@ -0,0 +1,91 @@
+/*
+    This example is just simple text floating around. If u are using chrome, there is a bug that spoil the visuals.
+*/
+package hello
+
+import js.*
+import html5.*
+import jquery.*
+
+val context = getContext()
+val height = getCanvas().height
+val width = getCanvas().width
+
+// class representing a floating text
+class HelloKotlin() {
+    var relX = 0.2 + 0.2 * Math.random()
+    var relY = 0.4 + 0.2 * Math.random()
+
+    val absX : Double
+        get() = (relX * width)
+    val absY : Double
+        get() = (relY * height)
+
+    var relXVelocity = randomVelocity()
+    var relYVelocity = randomVelocity()
+
+
+    val message = "Hello Kotlin"
+    val textHeightInPixels = 60
+    {
+        context.font = "bold ${textHeightInPixels}px Georgia, serif"
+    }
+    val textWidthInPixels = context.measureText(message).width
+
+    fun draw() {
+        context.save()
+        move()
+        // if you using chrome chances are good you wont see the shadow
+        context.shadowColor = "#000000"
+        context.shadowBlur = 5.0
+        context.shadowOffsetX = -4.0
+        context.shadowOffsetY = 4.0
+        context.fillStyle = "rgb(242,160,110)"
+        context.fillText(message, absX, absY)
+        context.restore()
+    }
+
+    fun move() {
+        val relTextWidth = textWidthInPixels / width
+        if (relX > (1.0 - relTextWidth - relXVelocity.abs) || relX <  relXVelocity.abs) {
+            relXVelocity *= -1
+        }
+        val relTextHeight = textHeightInPixels / height
+        if (relY > (1.0 - relYVelocity.abs) || relY < relYVelocity.abs + relTextHeight) {
+            relYVelocity *= -1
+        }
+        relX += relXVelocity
+        relY += relYVelocity
+    }
+
+    fun randomVelocity() = 0.03 * Math.random() * (if (Math.random() < 0.5) 1 else -1)
+
+
+    val Double.abs : Double
+    get() = if (this > 0) this else -this
+}
+
+fun renderBackground() {
+    context.save()
+    context.fillStyle = "#5C7EED"
+    context.fillRect(0.0, 0.0, width, height)
+    context.restore()
+}
+
+fun main() {
+    val interval = 50
+    // we pass a literal that constructs a new HelloKotlin object
+    val logos = Array(3) {
+        HelloKotlin()
+    }
+    jq {
+        setInterval({
+            renderBackground()
+            for (logo in logos) {
+                logo.draw()
+            }
+        }, interval)
+    }
+}
+
+

examplesForWebDemo/src/html5/interactive2/interactive2.js

@@ -409,7 +409,7 @@
         }, draw:function (state) {
             {
                 var context = state.get_context();
-                context.drawImage(getJBLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_pos().get_x(), this.get_pos().get_y(), this.get_canvasSize().get_x(), this.get_canvasSize().get_y());
+                context.drawImage(getKotlinLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_pos().get_x(), this.get_pos().get_y(), this.get_canvasSize().get_x(), this.get_canvasSize().get_y());
             }
         }, contains:function (mousePos) {
             {

examplesForWebDemo/src/html5/interactive3/interactive2.js

@@ -1,459 +0,0 @@
-{
-    var classes = function () {
-        var Vector = Kotlin.Class.create({initialize:function (x, y) {
-            this.$x = x;
-            this.$y = y;
-        }, get_x:function () {
-            return this.$x;
-        }, get_y:function () {
-            return this.$y;
-        }, plus:function (v) {
-            {
-                return interactive2.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y());
-            }
-        }, minus:function () {
-            {
-                return interactive2.v_0(-this.get_x(), -this.get_y());
-            }
-        }, minus$0:function (v) {
-            {
-                return interactive2.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y());
-            }
-        }, times:function (coef) {
-            {
-                return interactive2.v_0(this.get_x() * coef, this.get_y() * coef);
-            }
-        }, distanceTo:function (v) {
-            {
-                return Math.sqrt(this.minus$0(v).get_sqr());
-            }
-        }, rotatedBy:function (theta) {
-            {
-                var sin = Math.sin(theta);
-                var cos = Math.cos(theta);
-                return interactive2.v_0(this.get_x() * cos - this.get_y() * sin, this.get_x() * sin + this.get_y() * cos);
-            }
-        }, isInRect:function (topLeft, size) {
-            {
-                return this.get_x() >= topLeft.get_x() && this.get_x() <= topLeft.get_x() + size.get_x() && this.get_y() >= topLeft.get_y() && this.get_y() <= topLeft.get_y() + size.get_y();
-            }
-        }, get_sqr:function () {
-            {
-                return this.get_x() * this.get_x() + this.get_y() * this.get_y();
-            }
-        }, get_normalized:function () {
-            {
-                return this.times(1 / Math.sqrt(this.get_sqr()));
-            }
-        }
-        });
-        var RadialGradientGenerator = Kotlin.Class.create({initialize:function (context) {
-            this.$context = context;
-            this.$gradients = new Kotlin.ArrayList;
-            this.$current = 0;
-            {
-                this.newColorStops([
-                    [0, '#F59898'],
-                    [0.5, '#F57373'],
-                    [1, '#DB6B6B']
-                ]);
-                this.newColorStops([
-                    [0.39, 'rgb(140,167,209)'],
-                    [0.7, 'rgb(104,139,209)'],
-                    [0.85, 'rgb(67,122,217)']
-                ]);
-                this.newColorStops([
-                    [0, 'rgb(255,222,255)'],
-                    [0.5, 'rgb(255,185,222)'],
-                    [1, 'rgb(230,154,185)']
-                ]);
-                this.newColorStops([
-                    [0, 'rgb(255,209,114)'],
-                    [0.5, 'rgb(255,174,81)'],
-                    [1, 'rgb(241,145,54)']
-                ]);
-                this.newColorStops([
-                    [0, 'rgb(132,240,135)'],
-                    [0.5, 'rgb(91,240,96)'],
-                    [1, 'rgb(27,245,41)']
-                ]);
-                this.newColorStops([
-                    [0, 'rgb(250,147,250)'],
-                    [0.5, 'rgb(255,80,255)'],
-                    [1, 'rgb(250,0,217)']
-                ]);
-            }
-        }, get_context:function () {
-            return this.$context;
-        }, get_gradients:function () {
-            return this.$gradients;
-        }, get_current:function () {
-            return this.$current;
-        }, set_current:function (tmp$0) {
-            this.$current = tmp$0;
-        }, newColorStops:function (colorStops) {
-            {
-                this.get_gradients().add(colorStops);
-            }
-        }, getNext:function () {
-            {
-                var result = this.get_gradients().get(this.get_current());
-                this.set_current((this.get_current() + 1) % this.get_gradients().size());
-                return result;
-            }
-        }
-        });
-        var CanvasState = Kotlin.Class.create({initialize:function (canvas) {
-            this.$canvas = canvas;
-            this.$width = this.get_canvas().width;
-            this.$height = this.get_canvas().height;
-            this.$context = getContext();
-            this.$valid = false;
-            this.$shapes = new Kotlin.ArrayList;
-            this.$selection = null;
-            this.$dragOff = new interactive2.Vector_0(0, 0);
-            this.$interval = 1000 / 30;
-            {
-                var tmp$4;
-                var tmp$3;
-                var tmp$2;
-                var tmp$1;
-                var tmp$0_0;
-                $(this.get_canvas()).mousedown((tmp$0_0 = this , function (it) {
-                    {
-                        var tmp$0;
-                        tmp$0_0.set_valid(false);
-                        tmp$0_0.set_selection(null);
-                        var mousePos = tmp$0_0.mousePos_0(it);
-                        {
-                            tmp$0 = tmp$0_0.get_shapes().iterator();
-                            while (tmp$0.hasNext()) {
-                                var shape = tmp$0.next();
-                                {
-                                    if (shape.contains(mousePos)) {
-                                        tmp$0_0.set_dragOff(mousePos.minus$0(shape.get_pos()));
-                                        shape.set_selected(true);
-                                        tmp$0_0.set_selection(shape);
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-                    ));
-                $(this.get_canvas()).mousemove((tmp$1 = this , function (it) {
-                    {
-                        if (tmp$1.get_selection() != null) {
-                            Kotlin.sure(tmp$1.get_selection()).set_pos(tmp$1.mousePos_0(it).minus$0(tmp$1.get_dragOff()));
-                            tmp$1.set_valid(false);
-                        }
-                    }
-                }
-                    ));
-                $(this.get_canvas()).mouseup((tmp$2 = this , function (it) {
-                    {
-                        if (tmp$2.get_selection() != null) {
-                            Kotlin.sure(tmp$2.get_selection()).set_selected(false);
-                        }
-                        tmp$2.set_selection(null);
-                        tmp$2.set_valid(false);
-                    }
-                }
-                    ));
-                $(this.get_canvas()).dblclick((tmp$3 = this , function (it) {
-                    {
-                        var redTransparentCircle = new interactive2.Creature_0(tmp$3.mousePos_0(it), tmp$3);
-                        tmp$3.addShape(redTransparentCircle);
-                        tmp$3.set_valid(false);
-                    }
-                }
-                    ));
-                interactive2.doWithPeriod(this.get_interval(), (tmp$4 = this , function () {
-                    {
-                        tmp$4.draw();
-                    }
-                }
-                    ));
-            }
-        }, get_canvas:function () {
-            return this.$canvas;
-        }, get_width:function () {
-            return this.$width;
-        }, get_height:function () {
-            return this.$height;
-        }, get_context:function () {
-            return this.$context;
-        }, get_valid:function () {
-            return this.$valid;
-        }, set_valid:function (tmp$0) {
-            this.$valid = tmp$0;
-        }, get_shapes:function () {
-            return this.$shapes;
-        }, set_shapes:function (tmp$0) {
-            this.$shapes = tmp$0;
-        }, get_selection:function () {
-            return this.$selection;
-        }, set_selection:function (tmp$0) {
-            this.$selection = tmp$0;
-        }, get_dragOff:function () {
-            return this.$dragOff;
-        }, set_dragOff:function (tmp$0) {
-            this.$dragOff = tmp$0;
-        }, get_interval:function () {
-            return this.$interval;
-        }, mousePos_0:function (e) {
-            {
-                var offset = new interactive2.Vector_0(0, 0);
-                var element = this.get_canvas();
-                while (element != null) {
-                    var el = Kotlin.sure(element);
-                    offset = offset.plus(new interactive2.Vector_0(el.offsetLeft, el.offsetTop));
-                    element = el.offsetParent;
-                }
-                return (new interactive2.Vector_0(e.pageX, e.pageY)).minus$0(offset);
-            }
-        }, addShape:function (shape) {
-            {
-                this.get_shapes().add(shape);
-                this.set_valid(false);
-            }
-        }, clear:function () {
-            {
-                this.get_context().fillStyle = '#FFFFFF';
-                this.get_context().fillRect(0, 0, this.get_width(), this.get_height());
-                this.get_context().strokeStyle = '#000000';
-                this.get_context().lineWidth = 4;
-                this.get_context().strokeRect(0, 0, this.get_width(), this.get_height());
-            }
-        }, draw:function () {
-            {
-                var tmp$0;
-                if (this.get_valid())
-                    return;
-                this.clear();
-                {
-                    tmp$0 = this.get_shapes().iterator();
-                    while (tmp$0.hasNext()) {
-                        var shape = tmp$0.next();
-                        {
-                            shape.draw(this);
-                        }
-                    }
-                }
-                this.set_valid(true);
-            }
-        }
-        });
-        var Shape = Kotlin.Class.create({initialize:function () {
-            this.$selected = false;
-        }, draw:function (state) {
-        }, contains:function (mousePos) {
-        }, get_pos:function () {
-            return this.$pos;
-        }, set_pos:function (tmp$0) {
-            this.$pos = tmp$0;
-        }, get_selected:function () {
-            return this.$selected;
-        }, set_selected:function (tmp$0) {
-            this.$selected = tmp$0;
-        }
-        });
-        var Creature = Kotlin.Class.create(Shape, {initialize:function (pos, state) {
-            this.$pos = pos;
-            this.$state = state;
-            this.super_init();
-            this.$shadowOffset = interactive2.v_0(-5, 5);
-            this.$colorStops = interactive2.get_gradientGenerator().getNext();
-            this.$relSize = 0.05;
-        }, get_pos:function () {
-            return this.$pos;
-        }, set_pos:function (tmp$0) {
-            this.$pos = tmp$0;
-        }, get_state:function () {
-            return this.$state;
-        }, set_state:function (tmp$0) {
-            this.$state = tmp$0;
-        }, get_shadowOffset:function () {
-            return this.$shadowOffset;
-        }, get_colorStops:function () {
-            return this.$colorStops;
-        }, get_relSize:function () {
-            return this.$relSize;
-        }, get_radius:function () {
-            {
-                return this.get_state().get_width() * this.get_relSize();
-            }
-        }, get_position:function () {
-            var tmp$0;
-            if (this.get_selected())
-                tmp$0 = this.get_pos().minus$0(this.get_shadowOffset());
-            else
-                tmp$0 = this.get_pos();
-            {
-                return tmp$0;
-            }
-        }, get_directionToLogo:function () {
-            {
-                return interactive2.get_JB().get_centre().minus$0(this.get_position()).get_normalized();
-            }
-        }, contains:function (mousePos) {
-            {
-                return this.get_pos().distanceTo(mousePos) < this.get_radius();
-            }
-        }, fillCircle:function (receiver, position, rad) {
-            {
-                receiver.beginPath();
-                receiver.arc(position.get_x(), position.get_y(), rad, 0, 2 * Math.PI, false);
-                receiver.closePath();
-                receiver.fill();
-            }
-        }, draw:function (state) {
-            {
-                var context = state.get_context();
-                if (!this.get_selected()) {
-                    this.drawCreature(context);
-                }
-                else {
-                    this.drawCreatureWithShadow(context);
-                }
-            }
-        }, drawCreature:function (context) {
-            {
-                context.fillStyle = this.getGradient(context);
-                this.fillCircle(context, this.get_position(), this.get_radius());
-                this.drawEye(context);
-                this.drawTail(context);
-            }
-        }, getGradient:function (context) {
-            {
-                var tmp$0;
-                var gradientCentre = this.get_position().plus(this.get_directionToLogo().times(this.get_radius() / 4));
-                var gradient = context.createRadialGradient(gradientCentre.get_x(), gradientCentre.get_y(), 1, gradientCentre.get_x(), gradientCentre.get_y(), 2 * this.get_radius());
-                {
-                    tmp$0 = Kotlin.arrayIterator(this.get_colorStops());
-                    while (tmp$0.hasNext()) {
-                        var colorStop = tmp$0.next();
-                        {
-                            gradient.addColorStop(colorStop[0], colorStop[1]);
-                        }
-                    }
-                }
-                return gradient;
-            }
-        }, drawTail:function (context) {
-            {
-                var tailDirection = this.get_directionToLogo().minus();
-                var tailPos = this.get_position().plus(tailDirection.times(this.get_radius()).times(0.7));
-                var tailSize = this.get_radius() * 1.6;
-                var angle = Math.PI / 6;
-                var p1 = tailPos.plus(tailDirection.rotatedBy(angle).times(tailSize));
-                var p2 = tailPos.plus(tailDirection.rotatedBy(-angle).times(tailSize));
-                context.fillStyle = this.getGradient(context);
-                context.beginPath();
-                context.moveTo(tailPos.get_x(), tailPos.get_y());
-                context.lineTo(p1.get_x(), p1.get_y());
-                var middlePoint = this.get_position().plus(tailDirection.times(this.get_radius()).times(1));
-                context.quadraticCurveTo(middlePoint.get_x(), middlePoint.get_y(), p2.get_x(), p2.get_y());
-                context.lineTo(tailPos.get_x(), tailPos.get_y());
-                context.closePath();
-                context.fill();
-            }
-        }, drawEye:function (context) {
-            {
-                var eyePos = this.get_directionToLogo().times(this.get_radius()).times(0.6).plus(this.get_position());
-                var eyeRadius = this.get_radius() / 3;
-                var eyeLidRadius = eyeRadius / 2;
-                context.fillStyle = '#FFFFFF';
-                this.fillCircle(context, eyePos, eyeRadius);
-                context.fillStyle = '#000000';
-                this.fillCircle(context, eyePos, eyeLidRadius);
-            }
-        }, drawCreatureWithShadow:function (context) {
-            {
-                context.save();
-                this.setShadow(context);
-                context.fillStyle = this.getGradient(context);
-                this.fillCircle(context, this.get_position(), this.get_radius());
-                context.restore();
-                this.drawEye(context);
-                this.drawTail(context);
-            }
-        }, setShadow:function (context) {
-            {
-                context.shadowColor = 'rgba(100, 100, 100, 0.7)';
-                context.shadowBlur = 5;
-                context.shadowOffsetX = this.get_shadowOffset().get_x();
-                context.shadowOffsetY = this.get_shadowOffset().get_y();
-            }
-        }
-        });
-        var Logo = Kotlin.Class.create(Shape, {initialize:function (pos, relSize) {
-            this.$pos = pos;
-            this.$relSize = relSize;
-            this.super_init();
-            this.$imageSize = interactive2.v_0(704, 254);
-            this.$canvasSize = this.get_imageSize().times(this.get_relSize());
-        }, get_pos:function () {
-            return this.$pos;
-        }, set_pos:function (tmp$0) {
-            this.$pos = tmp$0;
-        }, get_relSize:function () {
-            return this.$relSize;
-        }, set_relSize:function (tmp$0) {
-            this.$relSize = tmp$0;
-        }, get_imageSize:function () {
-            return this.$imageSize;
-        }, get_canvasSize:function () {
-            return this.$canvasSize;
-        }, draw:function (state) {
-            {
-                var context = state.get_context();
-                context.drawImage(getJBLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_pos().get_x(), this.get_pos().get_y(), this.get_canvasSize().get_x(), this.get_canvasSize().get_y());
-            }
-        }, contains:function (mousePos) {
-            {
-                return mousePos.isInRect(this.get_pos(), this.get_canvasSize());
-            }
-        }, get_centre:function () {
-            {
-                return this.get_pos().plus(this.get_canvasSize().times(0.5));
-            }
-        }
-        });
-        return {Shape_0:Shape, Logo_0:Logo, Creature_0:Creature, RadialGradientGenerator_0:RadialGradientGenerator, CanvasState_0:CanvasState, Vector_0:Vector};
-    }
-        ();
-    var interactive2 = Kotlin.Namespace.create({initialize:function () {
-        interactive2.$gradientGenerator = new interactive2.RadialGradientGenerator_0(getContext());
-        interactive2.$JB = new interactive2.Logo_0(interactive2.v_0(20, 20), 0.3);
-    }, get_gradientGenerator:function () {
-        return interactive2.$gradientGenerator;
-    }, get_JB:function () {
-        return interactive2.$JB;
-    }, doWithPeriod:function (period, f) {
-        {
-            setInterval(f, period);
-        }
-    }, v_0:function (x, y) {
-        {
-            return new interactive2.Vector_0(x, y);
-        }
-    }, main:function () {
-        {
-            var state = new interactive2.CanvasState_0(getCanvas());
-            state.addShape(interactive2.get_JB());
-            setTimeout(function () {
-                    {
-                        state.set_valid(false);
-                    }
-                }
-            );
-        }
-    }
-    }, classes);
-    interactive2.initialize();
-}
-
-var args = [];
-interactive2.main(args);

examplesForWebDemo/src/html5/moving/test.kt

@@ -1,92 +0,0 @@
-package moving;
-
-import js.*;
-import html5.*;
-import jquery.*;
-
-fun main() {
-    jq {
-        Moving().run();
-    }
-}
-
-
-class Moving() {
-
-    val context = getContext();
-    val height = getCanvas().height;
-    val width = getCanvas().width;
-
-    var relX = 0.5;
-    var relY = 0.5;
-
-    val absX : Double
-        get() = (relX * width);
-    val absY : Double
-        get() = (relY * height);
-
-    var relXVelocity = randomVelocity();
-    var relYVelocity = randomVelocity();
-
-
-    val message = "Hello Kotlin";
-    val textHeightInPixels = 60;
-    {
-        context.font = "bold ${textHeightInPixels}px Georgia, serif"
-    }
-    val textWidthInPixels = context.measureText(message).width;
-
-    fun renderText() {
-        context.save();
-        move();
-        context.shadowColor = "white";
-        context.shadowBlur = 10.0;
-        context.fillStyle = "rgba(100,200,0,0.7)";
-        context.fillText(message, absX, absY);
-        context.restore();
-    }
-
-    fun move() {
-        val relTextWidth = textWidthInPixels / width;
-        if (relX > (1.0 - relTextWidth - relXVelocity.abs) || relX <  relXVelocity.abs) {
-            relXVelocity *= -1;
-        }
-        val relTextHeight = textHeightInPixels / height;
-        if (relY > (1.0 - relYVelocity.abs) || relY < relYVelocity.abs + relTextHeight) {
-            relYVelocity *= -1;
-        }
-        relX += relXVelocity;
-        relY += relYVelocity;
-    }
-
-    fun changeDirection() {
-        relYVelocity = randomVelocity();
-        relXVelocity = randomVelocity();
-    }
-
-
-    fun renderBackground() {
-        context.save();
-        context.fillStyle = "rgba(255,255,1,0.2)";
-        context.fillRect(0.0, 0.0, width, height);
-        context.restore();
-    }
-
-    fun randomVelocity() = 0.01 * Math.random() *
-                            if (Math.random() < 0.5) 1 else -1;
-
-    fun run() {
-        setInterval({
-            renderBackground();
-            renderText();
-        }, 10);
-        setInterval({
-            changeDirection();
-        }, 3000);
-    }
-
-    val Double.abs : Double
-    get() = if (this > 0) this else -this
-
-}
-