Ancient Brain
Code. Play. Teach. Learn. Research. Demo.

Starter Tutorial (P5)

A tutorial to show you how to code JavaScript Worlds on Ancient Brain using the P5 graphics library. We will code a simple JavaScript 3D World.
  • The P5 library is probably most suitable for beginners.
  • More experienced programmers may prefer to start with the Three.js Starter Tutorial.
  • In any case, this tutorial will not assume you have ever seen Ancient Brain, JavaScript, or even programming, before.
  • All links from this page open in a new tab/window, to keep this tutorial on screen.



Getting set up

Get an account

  1. To create Worlds, you need an account.
  2. Use "Register" in the menu at the top of the page.
  3. Register, and get your password via email.
  4. Login.

Clone "One Cube World"

  1. Go to the page for "One Cube World" (P5 version).
  2. This is a simple Starter World. It is less than 30 lines of program code.
  3. It displays a single cube on screen. You cannot move the camera so the cube rotates to show you it is 3D.
  4. Click "Clone" to make your own copy.
  5. Go to the World page for your clone.
  6. Check your clone runs.


One Cube World (P5)
By Starter user  
Simple starter World (P5 version). No camera control. So cube rotates to show 3D.
  
  

Edit World

On the World page for your clone, click "Edit" to launch the editor.
  1. Edit the title.
  2. Edit the description.
  3. Go back to the World page and reload. You will see the new title and description.

  

First look at the code

The editor shows the JavaScript code. If you have never seen JavaScript (or any program) before, here is what you are looking at:
  1. The program is a set of instructions for the computer to "execute".
  2. This is real JavaScript code. You can write in here anything that can be written in JavaScript.
  3. Instructions end with ";". This is important.
  4. Whitespace does not matter. You can add or remove whitespace according to taste.
  5. Comments begin with "//" (and continue to end of line). These are notes to the human reader and are ignored by the computer.

There is a lot to learn about JavaScript but you do not need to learn it all before trying some programming.

 
 
 
 

Change some code

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:

  1. Change the cube size.

  2. Change how much the rotation angle changes each step. Changing this can make a dramatic difference.

  3. Change the background color. Here is a list of color names.

  4. Change the cube color.

  5. You can change the box to not be a cube by giving it numbers for all 3 dimensions:
     box ( width, height, depth ); 
    For example:
     box ( 200, 50, 1000 ); 
Every time you make a change, press Save, and Run again.



Program structure

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  

function setup() 		 
{
	// Instructions to be executed once, at start of run 
} 

function draw()
{
	// 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.




Paint the cube

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 locations indicated:

 
// Put the following right at the top of the program:

var img;

function preload() 
{
   img = loadImage (  "/uploads/starter/earth.1.jpg" );
}


// Put the following inside the "draw" function 
// Remove the line that makes the cube a solid color, and insert this line instead:

texture(img);        
	
You will now get something like the following:




Upload your own image

  1. Web search for some image you want to use. Right-click and "Copy image".
  2. Go to menu "User" - "My uploads".
  3. Paste (Ctrl-V) and the image is uploaded.
  4. You can also select an image from your computer by browsing files.
  5. Edit the JavaScript code to point to the image. You need the exact file name of the image.
  6. Change:
     /uploads/starter/earth.1.jpg 
    to point to your userid and your file:
     /uploads/your-userid/your-file 
  7. The cube will now be painted with your image.
 
 
 

Make another box

Change the line
  box(objectsize); 
to the following:

 box(objectsize); 
 translate(250, 250, 250);
 box(objectsize); 
 
This makes a second box some distance away. Both will rotate.

Make lots of boxes

To see the power of programming, we will make lots of boxes, using what is called a for loop. Insert the following code at the positions shown:

// Insert this code at the top:

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) ];
	// each entry of the array is a random (x,y,z) position 
	// (an array of three random numbers) 
}
 
// Insert this code inside "draw", replacing the previous "box" and "translate" instructions:

  for ( var i=0; i < noboxes; i++ )
  {
    translate ( a[i][0], a[i][1], a[i][2] );		// get box position i 
    box(objectsize);             
  }
  
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!





Add music

Now we add some background music. Insert the following code right at the top:

 const MUSICFILE = '/uploads/starter/SuspenseStrings.mp3';
 var music = new Audio ( MUSICFILE );
 music.loop = true;                   // loop music forever            
 music.play();
 AB.standardAudioButtons ( music );   // create standard play and pause buttons

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

  1. Get some music you like.
  2. One site with free music is dl-sounds.com. There are many others.
  3. When you find music you like, download the music file to your computer.
  4. Then upload the music file to Ancient Brain.
  5. Edit the code to play your music file.



Errors

  1. Errors while writing programs are normal. The important thing is to understand where the error is.
  2. The editor warns you about errors using an X icon on the left-hand side. Hover on it for info.
  3. When you save the file, you will be warned again in the pop-up.
  4. Some errors cannot be detected in the editor and you will only find out when you run the program.
  5. Errors found when the program is run are displayed in the JavaScript console. To see the console, press Ctrl-Shift-J on Chrome and Firefox, or F12 on Edge and IE.

    

Documentation

See the "Docs" menu for all the documentation you need when coding.

You can also select code and press "Intelligent code help" to get help on a specific function / object / word.


AB, ABRun and API

Ancient Brain defines a number of support objects and support functions.

You may have noticed AB.randomIntAtoB and AB.standardAudioButtons above. AB is an Ancient Brain system object. See the AB docs.

ABRun is another Ancient Brain object to define a particular run. See the ABRun docs.

You may also have noticed ABWorld.fullwidth and ABWorld.fullheight in the original code. ABWorld is defined by the particular API we are using. See the docs for this API.

 
 
 
 

Clone and edit other P5 Worlds

Clone other Starter Worlds and change them.

Many of them have a section of code called a "tweaker's box" 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
By "Coding Train" p...  
Tutorial 7.8 with music and other uploaded images, including from other users. Click on the images.
Tutorial 18.7
By "Coding Train" p...  
Tutorial 18.7 with full canvas, resized model, sound. Texture on box is image from another user.
 
 
 

Finish

Show it off

  1. The system will generate an image to represent your World. To change it, see "New image" on the World page.
  2. 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.
  3. People can find your World using the search box. So give it a good name.
  4. You can embed your World on another website. See "Embed code" on the World page.
  5. Comment on other people's Worlds. The top menu turns red when you have a new comment.


The background is a program, showing the JavaScript graphics used on this site.
 
Font:

© Ancient Brain Ltd. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Beta      Bug bounty      Contact      Stats      The name      Terms and conditions