(arrow keys to move)
To embed it in your post, use the playground bbcode. You can press the quote button above a post to see the source code for any scripts.
You can experiment with this on this little editor page I made, but it doesn't save so be careful and back up your scripts in notepad regularly. I recommend opening your browser's javascript console so you can see any messages or errors, on chrome this is ctrl-shift-i and then go on the console tab, on firefox you can press ctrl-shift-k.
Basics
Playground scripts are written in javascript, and expect a draw() function to be present. This function is automatically called every g_timeStep seconds. For example:
Code: Select all
var time = 0;
function draw() {
time += g_timeStep;
var str = "Current time: " + time.toFixed(2);
console.log(str);
setDrawColor("#fff");
clear();
setDrawColor("#000");
drawText(str, 20, 120, 200);
}
Drawing commands
setDrawColor(col)
Sets the color for all following draw commands. Takes html colour codes.
Code: Select all
function draw() {
setDrawColor("green");
drawCircle(200, 200, 100);
setDrawColor("#F0F");
fillCircle(200, 200, 50);
}
clear()
Clear the canvas. Call this before you draw anything if you're doing an animation, or you'll just draw over the old contents.
Code: Select all
function draw() {
setDrawColor("cornflowerblue");
clear();
}
drawCircle/fillCircle(x, y, radius)
Draws or fills a circle of the specified radius centred at (x, y).
Code: Select all
function draw() {
drawCircle(200, 200, 100);
fillCircle(200, 200, 100);
}
drawRect/fillRect(x, y, width, height)
Draws or fills a rect of the specified width and height with its top left corner at x and y.
Code: Select all
function draw() {
setDrawColor("green");
drawRect(25, 25, 50, 70);
setDrawColor("orange");
fillRect(95, 25, 50, 50);
}
drawText(text, ptSize, x, y)
Draw text of point size ptSize at position x,y.
Code: Select all
function draw() {
setDrawColor("indigo");
drawText("hello world", 30, 120, 180);
}
loadImage(name, url)
Load an image from a url, giving it a name. This name will later be used for drawing. If using this on the talkhaus, make sure to leave the http: off the url. This is for two reasons: one, it will work on either http or https this way; two, otherwise the media plugin will try and embed the image instead and it will cause a syntax error in your script.
Code: Select all
loadImage("patchouli", "http://i.imgur.com/6h0cqoW.png");
drawImage(name, x, y, [rotation, anchor])
Draw a loaded image at a position. Rotation and anchor are optional. Rotation specifies the rotation of the image in degrees, and anchor specifies the center point of the image.
Anchor is in the form {x: value, y: value}, where the value of x and y are from 0 to 1 and specify where on the image the center is. For example, the default value for anchor is {x: 0.5, y: 0.5} which means the image will be centered on x,y.
Code: Select all
loadImage("patchouli", "//i.imgur.com/6h0cqoW.png");
function draw() {
drawImage("patchouli", 200, 200);
}
Input
Input is currently limited to keyboard input. You can handle keyboard input by specifying a keydown, keyup, or keypress event. For example, the following listens for keydown events and shows what key has been pressed.
Code: Select all
var lastKeyPressed = "<press a key>";
keydown = function(code) {
lastKeyPressed = code;
}
function draw() {
setDrawColor("#fff");
clear();
setDrawColor("#000");
drawText("Last key pressed: " + lastKeyPressed, 20, 5, 25);
}
Feature requests / updates
I'm open to accepting feature requests and updating if anybody uses it. Obvious omissions are sound and other forms of input.