Code. Play. Teach. Learn. Research. Demo.
P5 Starter Tutorial
on Ancient Brain using the "P5"
- This tutorial
- To create Worlds, you need an account.
- Use the following link to register. (Link opens in a new tab.)
- Register, and get your password via email.
- We will use "One Cube World"
as a simple Starter World.
- Click the image to run it.
- This World displays a single cube on screen.
- You cannot move the camera so the cube rotates to show you it is 3D.
One Cube World (P5)
198 runs ♦ 0 likes
By Starter user
Created: 10 Nov 2018
Modified: 26 Apr 2019 Simple starter World (P5 version). No camera control. So cube rotates to show 3D.
- Use the link below to go to the "home page" for the Starter World.
(Link opens in a new tab.)
- Now you are logged in, you can click "Clone" to make your own copy.
- Go to the page for your clone.
- Check your clone runs.
On the World page for your clone, click "Edit" to launch the editor.
- Edit the title.
- Edit the description.
- Go back to the World page and reload. You will see the new title and description.
const objectsize = 200; // size of object
const anglechange = 0.01; // how much the rotate angle changes each step
var angle = 0; // rotate angle starts at 0
function setup() // "setup" is called once at start of run
createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight(), WEBGL );
function draw() // "draw" is called every timestep during run
background("lightblue"); // background color
fill("navy"); // paint box with this color
rotateX(angle); // set each dimension rotation angle to "angle"
box(objectsize); // draw a cube of this size
angle = angle + anglechange ; // change angle each step to get rotate movement
- The program is a set of instructions for the computer to "execute".
- Instructions end with ";". This is important.
- You can insert blank lines, spaces and tabs in order to change the program layout
and normally it does not matter.
The program will still work the same.
- You can insert "comments". These begin with "//" and continue to the end of line.
These are notes to the human reader and are ignored by the computer.
There is a lot to learn about
but you do not need to learn it all before trying some programming.
You can change code, press "Save" and then "Run" the new code.
Nothing bad can happen.
You cannot damage your machine or our server.
Change the following:
- Change the object size.
- Change how much the rotation angle changes each step.
Changing this can make a dramatic difference.
- Change the background color.
Here is a list of color names.
- Change the cube color.
- You can change the box to not be a cube by giving it numbers for all 3 dimensions:
box ( width, height, depth );
box ( 200, 50, 1000 );
Every time you make a change, press Save, and Run again.
P5 programs use the following structure
to define what code runs once at startup,
and what code runs every time step:
// Can define global variables and constants up here, outside both functions
// Instructions to be executed once, at start of run
// Instructions to be executed every time step
Note the chain brackets. These define the start and end of blocks of code.
We will now add some new code at certain locations within the structure.
The cube is "painted" with a solid color.
It would be nice to paint it with a JPEG or PNG image.
Insert the following code at the top of the program:
img = loadImage ( "/uploads/starter/earth.1.jpg" );
Put the following code inside the "draw" function.
Remove the line that makes the cube a solid color, and insert this line instead:
You will now get something like the following:
Upload your own image
- Web search for some image you want to use.
Right-click and "Copy image".
- Go to menu "User" - "My uploads".
Paste (Ctrl-V) and the image is uploaded.
- You can also select an image from your computer
by browsing files.
You need the exact file name of the image.
to point to your userid and your file:
- The cube will now be painted with your image.
Use other people's uploads
In the header above,
in the search box
to see what other people have uploaded.
You can use all their uploads in your World.
Change the line
to the following:
translate(250, 250, 250);
This makes a second box some distance away. Both will rotate.
To see the power of programming, we will make lots of boxes,
using what is called a
Insert the following code at the top:
// make an array of random (x,y,z) positions
const noboxes = 30; // how many boxes to have
var a = new Array(noboxes); // array of the box positions
for ( var i=0; i < noboxes; i++ ) // set up the array
a[i] = [ AB.randomIntAtoB(-500,500), AB.randomIntAtoB(-500,500), AB.randomIntAtoB(-500,500) ];
Insert the following code inside "draw", replacing the previous "box" and "translate" instructions:
for ( var i=0; i < noboxes; i++ )
translate ( a[i], a[i], a[i] ); // get box position i
This makes a large number of boxes in randomly different places, like the following image.
Increase the number of boxes until your browser cannot cope.
Don't worry, you cannot cause any damage!
Now we add some background music.
Insert the following code right at the top:
const MUSICFILE = '/uploads/starter/SuspenseStrings.mp3';
AB.backgroundMusic ( MUSICFILE );
On some browsers (Chrome, mobile) audio will not play automatically, but only in response to user interaction.
So the code gives the user play and pause buttons.
See notes on audio autoplay on web browsers
and in particular on Chrome.
Use your own music
- Get some music you like.
- One site with free music is
There are many others.
- When you find music you like, download the music file to your computer.
- Then upload the music file to Ancient Brain.
- Edit the code to play your music file.
Errors while writing programs are normal.
The important thing is to understand where the error is.
- The editor warns you about errors using an X icon
on the left-hand side.
Hover on it for info.
- When you save the file, you will be warned again in the pop-up.
Some errors cannot be detected in the editor
and you will only find out when you run the program.
- Errors found when the program is run are displayed in the
To see the console, press Ctrl-Shift-J on Chrome and Firefox,
or F12 on Edge and IE.
See the "Docs" menu for all the documentation you need when coding.
Above we saw
AB is the core Ancient Brain object.
See AB docs.
Above we saw
ABWorld is defined by the
"API" that we are using
for this World.
- This API:
See the docs for this World's API.
You can also select code in the editor and press "Intelligent code help"
to get help on a specific function / object / word.
and change them.
Many of them have a section of code called a
at the top.
This contains the easiest parts of code to change.
When you get more advanced, you will make your own entire Worlds.
The Worlds you create are only limited by your imagination.
Tutorial 7.8 variant
142 runs ♦ 0 likes
By "Coding Train" p...
Created: 6 Sep 2018
Modified: 11 Sep 2018 Tutorial 7.8 with music and other uploaded images, including from other users. Click on the images.
232 runs ♦ 0 likes
By "Coding Train" p...
Created: 9 Sep 2018
Modified: 11 Sep 2018 Tutorial 18.7 with full canvas, resized model, sound. Texture on box is image from another user.
Show it off
- The system will generate an image to represent your World.
To change it,
see "New image" on the World page.
The site works on mobile.
Show off your World to people on your mobile.
For some Worlds, touch will automatically drag and zoom the World's camera.
People can find your World using the search box.
So give it a good name.
You can embed your World on another website.
See "Embed code" on the World page.
- Comment on other people's Worlds.
The top menu turns red when you have a new comment.