New to Coding · Codetoy Docs

Welcome! Codetoy is a great place to practice because you see the result of every line you write, instantly, as pictures and motion. You only need a handful of ideas to make something fun.

#Pick a language

If you're brand new, Python reads the most like plain English. If you'd like to share your games in Discord later, choose AssemblyScript. It looks a little more technical but works the same way. Choose one in the sidebar and every example on this site will follow it.

#The five ideas you need

#1. Instructions run top to bottom

A program is a list of instructions. The computer runs them in order.

#2. Functions do things

circle(200, 150, 40) calls a function: "draw a circle at x = 200, y = 150 with radius 40". The numbers in the parentheses are its arguments.

#3. Variables remember things

A variable is a named box that holds a value. Change the value and everything that uses it changes too.

let size: f64 = 40
circle(200, 150, size)

double size = 40;
Canvas.Circle(200, 150, size);

size = 40
circle(200, 150, size)

#4. `if` makes decisions

Run code only when something is true, like when a key is held down.

#5. Loops repeat

A for loop repeats code, for example to draw a row of ten circles.

#Your first program

Create a new codetoy, choose your language, paste this in and press ▶ Play. Then try changing the numbers. What happens if you make 40 bigger?

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

export function update(): void {
  // a dark background
  fill(20, 20, 40)
  rect(0, 0, screen.width(), screen.height())

  // a row of circles
  for (let i = 0; i < 10; i++) {
    fill(80 + i * 17, 150, 255)
    circle(60 + i * 60, 150, 20)
  }

  // a circle that follows your mouse, and grows while you hold the button
  let size: f64 = 40
  if (input.isMouseDown(0)) {
    size = 80
  }
  fill(255, 200, 80)
  circle(input.mouseX(), input.mouseY(), size)
}

Screen.OnUpdate(() => {
    // a dark background
    Canvas.Fill(20, 20, 40);
    Canvas.Rect(0, 0, Screen.Width, Screen.Height);

    // a row of circles
    for (int i = 0; i < 10; i++) {
        Canvas.Fill(80 + i * 17, 150, 255);
        Canvas.Circle(60 + i * 60, 150, 20);
    }

    // a circle that follows your mouse, and grows while you hold the button
    double size = 40;
    if (Input.IsMouseDown(0)) {
        size = 80;
    }
    Canvas.Fill(255, 200, 80);
    Canvas.Circle(Input.MouseX, Input.MouseY, size);
});

from codetoy.canvas import fill, rect, circle
from codetoy.screen import width, height
from codetoy._input import mouseX, mouseY, isMouseDown

def update():
    # a dark background
    fill(20, 20, 40)
    rect(0, 0, width(), height())

    # a row of circles
    for i in range(10):
        fill(80 + i * 17, 150, 255)
        circle(60 + i * 60, 150, 20)

    # a circle that follows your mouse, and grows while you hold the button
    size = 40
    if isMouseDown(0):
        size = 80
    fill(255, 200, 80)
    circle(mouseX(), mouseY(), size)

Every line of that program uses one of the five ideas above. Text after // (or # in Python) is a comment: a note for humans that the computer ignores.

#When something goes wrong

Errors show up in the console under the editor, with a line number. Read the first error and look at that line. Common culprits are a missing bracket, a typo in a name, or a capital letter where it shouldn't be. Every programmer sees errors all day, so they're part of the process, not a sign you're doing it wrong.

#Keep learning

QuickstartBuild a ball you can steer with the keyboard.ExamplesComplete programs to copy, run and change.Khan Academy: Intro to programmingFree lessons on drawing with code. Great alongside Codetoy.Codetoy DiscordAsk questions and share what you make.