azalea/kotlin-fork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added comments and chose meaningful names for examples

Browse Source
This commit is contained in:
Pavel Talanov
2012-02-10 15:23:01 +04:00
parent 41f7c29bfa
commit 1bc6111f04
16 changed files with 239 additions and 848 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examplesForWebDemo/src/html5/interactive3/interactive3.js → examplesForWebDemo/src/html5/creatures/creatures.js
+43 -45
View File
@@ -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_height(canvas.height);
this.set_width(this.get_canvas().width);
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.$colorStops = interactive3.get_gradientGenerator().getNext();
this.$shadowOffset = creatures.v_0(-5, 5);
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.$imageSize = interactive3.v_0(377, 393);
this.$relSize = 0.25;
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 () {
interactive3.$Kotlin = new interactive3.Logo_0(interactive3.v_0(20, 20), 0.25);
interactive3.$gradientGenerator = new interactive3.RadialGradientGenerator_0(getContext());
var creatures = Kotlin.Namespace.create({initialize:function () {
creatures.$Kotlin = new creatures.Logo_0(creatures.v_0(300, 100));
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());
state.addShape(interactive3.get_Kotlin());
state.addShape(new interactive3.Creature_0(state.get_size().times(0.25), state));
state.addShape(new interactive3.Creature_0(state.get_size().times(0.75), state));
var state = new creatures.CanvasState_0(getCanvas());
state.addShape(creatures.get_Kotlin());
state.addShape(new creatures.Creature_0(state.get_size().times(0.25), 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/interactive3/kotlinlogo.png → examplesForWebDemo/src/html5/creatures/kotlinlogo.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

examplesForWebDemo/src/html5/interactive3/main.kt → examplesForWebDemo/src/html5/creatures/main.kt
+14 -10
View File
@@ -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,
var relSize : Double = 0.25)
: Shape()
class Logo(override var pos : Vector) : 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/interactive3/template.html → examplesForWebDemo/src/html5/creatures/template.html
+4 -3
View File
@@ -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
-44
View File
@@ -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
-51
View File
@@ -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
-13
View File
@@ -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/test/testhtml.js → examplesForWebDemo/src/html5/fancyLines/fancylines.js
+6 -38
View File
@@ -1,38 +1,6 @@
{
var classes = function () {
var HelloKotlin = 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 () {
var FancyLines = 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/test/template.html → examplesForWebDemo/src/html5/fancyLines/template.html
+1 -1
View File
@@ -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/test/test.kt → examplesForWebDemo/src/html5/fancyLines/test.kt
+16 -29
View File
@@ -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();
// HelloKotlin().run();
FancyLines().run();
}
}
class Test() {
class FancyLines() {
// 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();
}
@@ -51,27 +61,4 @@ class Test() {
setInterval({line()}, 40);
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/moving/moving.js → examplesForWebDemo/src/html5/floatingText/hello.js
+62 -61
View File
@@ -1,25 +1,16 @@
{
var classes = function () {
var Moving = Kotlin.Class.create({initialize:function () {
this.$context = getContext();
this.$height = getCanvas().height;
this.$width = getCanvas().width;
this.$relX = 0.5;
this.$relY = 0.5;
var HelloKotlin = Kotlin.Class.create({initialize:function () {
this.$relX = 0.2 + 0.2 * Math.random();
this.$relY = 0.4 + 0.2 * Math.random();
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;
}, get_context:function () {
return this.$context;
}, get_height:function () {
return this.$height;
}, get_width:function () {
return this.$width;
this.$textWidthInPixels = hello.get_context().measureText(this.get_message()).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';
this.get_context().shadowBlur = 10;
this.get_context().fillStyle = 'rgba(100,200,0,0.7)';
this.get_context().fillText(this.get_message(), this.get_absX(), this.get_absY());
this.get_context().restore();
hello.get_context().shadowColor = '#000000';
hello.get_context().shadowBlur = 5;
hello.get_context().shadowOffsetX = -4;
hello.get_context().shadowOffsetY = 4;
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;
}
}, 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);
return 0.03 * Math.random() * tmp$0;
}
}, 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/moving/template.html → examplesForWebDemo/src/html5/floatingText/template.html
+1 -1
View File
@@ -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
+91
View File
@@ -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
+1 -1
View File
@@ -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
-459
View File
@@ -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
-92
View File
@@ -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
}