Quickstart · Codetoy Docs

This guide takes about five minutes. You'll draw a shape, animate it, steer it with the keyboard and share the result. You need a Codetoy account to save, so sign in first if you haven't.

#Create a codetoy

Open Create and choose New codetoy. The editor opens with a starter program on the left and the live preview on the right.

Pick your language with the AS / C# / Py switch at the top of the editor. We recommend AS (AssemblyScript): it's the only language that can publish Builds and Discord Activities.

#Draw something

Replace the starter code with this, then press ▶ Play:

import { fill, rect, circle } from "codetoy/canvas"
import * as screen from "codetoy/screen"

export function update(): void {
  // Paint the background
  fill(20, 20, 30)
  rect(0, 0, screen.width(), screen.height())

  // Draw a ball in the middle
  fill(255, 120, 80)
  circle(screen.centerX(), screen.centerY(), 30)
}

Screen.OnUpdate(() => {
    // Paint the background
    Canvas.Fill(20, 20, 30);
    Canvas.Rect(0, 0, Screen.Width, Screen.Height);

    // Draw a ball in the middle
    Canvas.Fill(255, 120, 80);
    Canvas.Circle(Screen.CenterX, Screen.CenterY, 30);
});

from codetoy.canvas import fill, rect, circle
from codetoy.screen import width, height, centerX, centerY

def update():
    # Paint the background
    fill(20, 20, 30)
    rect(0, 0, width(), height())

    # Draw a ball in the middle
    fill(255, 120, 80)
    circle(centerX(), centerY(), 30)

export function update()Screen.OnUpdate()def update() runs every frame, about 60 times a second. Each frame you paint the background, then draw everything on top of it.

#Move it with the keyboard

Keep the ball's position in variables and change them while arrow keys are held. Multiplying by deltaTime()Screen.DeltaTimedeltaTime() (seconds since the last frame) keeps the speed the same on every screen.

import { fill, rect, circle } from "codetoy/canvas"
import * as screen from "codetoy/screen"
import * as input from "codetoy/input"
import { deltaTime } from "codetoy/time"

let x: f64 = 200
let y: f64 = 200
const speed: f64 = 300 // pixels per second

export function update(): void {
  const step = speed * deltaTime()
  if (input.isKeyDown("ArrowLeft"))  x -= step
  if (input.isKeyDown("ArrowRight")) x += step
  if (input.isKeyDown("ArrowUp"))    y -= step
  if (input.isKeyDown("ArrowDown"))  y += step

  fill(20, 20, 30)
  rect(0, 0, screen.width(), screen.height())

  fill(255, 120, 80)
  circle(x, y, 30)
}

double x = 200;
double y = 200;
double speed = 300; // pixels per second

Screen.OnUpdate(() => {
    double step = speed * Screen.DeltaTime;
    if (Input.IsKeyDown("ArrowLeft"))  x -= step;
    if (Input.IsKeyDown("ArrowRight")) x += step;
    if (Input.IsKeyDown("ArrowUp"))    y -= step;
    if (Input.IsKeyDown("ArrowDown"))  y += step;

    Canvas.Fill(20, 20, 30);
    Canvas.Rect(0, 0, Screen.Width, Screen.Height);

    Canvas.Fill(255, 120, 80);
    Canvas.Circle(x, y, 30);
});

from codetoy.canvas import fill, rect, circle
from codetoy.screen import width, height
from codetoy.time import deltaTime
from codetoy._input import isKeyDown

x = 200.0
y = 200.0
speed = 300.0  # pixels per second

def update():
    global x, y
    step = speed * deltaTime()
    if isKeyDown("ArrowLeft"):  x -= step
    if isKeyDown("ArrowRight"): x += step
    if isKeyDown("ArrowUp"):    y -= step
    if isKeyDown("ArrowDown"):  y += step

    fill(20, 20, 30)
    rect(0, 0, width(), height())

    fill(255, 120, 80)
    circle(x, y, 30)

Click the preview so it has keyboard focus, then use the arrow keys.

#React to clicks

Events fire once per action, which makes them good for one-off things like teleporting the ball to wherever you click:

export function onMouseDown(button: i32): void {
  if (button == 0) {
    x = input.mouseX()
    y = input.mouseY()
  }
}

Input.OnMouseDown((int button) => {
    if (button == 0) {
        x = Input.MouseX;
        y = Input.MouseY;
    }
});

from codetoy._input import mouseX, mouseY

def mouseDown(button):
    global x, y
    if button == 0:
        x = mouseX()
        y = mouseY()

Add this below your existing code. See Handling Input for when to use events and when to poll.

Press Save and give your codetoy a name. Its page has a short link (like codetoy.io/AbC123) you can send to anyone, and others can fork it to remix your code.

#Where to go next

Program StructureHow setup code, the update loop and events fit together.DrawingCoordinates, colors, shapes, text and transforms.BuildsTurn your codetoy into a hosted, game-only page.ExamplesComplete programs to copy and remix.