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

Tutorial

A tutorial to show you how to use Ancient Brain. We will clone and modify a simple JavaScript 3D World.

We will not assume you have ever seen JavaScript, or even programming, before.




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".
  2. This is the simplest Starter World on the system. It is less than 30 lines of program code.
  3. It displays a single cube on screen. You can drag and scroll the camera to move and zoom.
  4. Click "Clone World" to make your own copy.
  5. Go to the World page for your clone.
  6. Check your clone runs.


One Cube World
456 runs ♦ 2 likes
Starter user
Simplest possible starter World. Background color. A cube of random color.
  
  

Edit World

On the World page for your clone, click "Edit World" 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 sky color. Here is a list of color names.

  2. Change the object size.

  3. Change the start position of the camera.

  4. The shape is defined as a box of three equal dimensions: ( objectsize, objectsize, objectsize ). That is, a cube. Change the shape to something other than a cube by changing one of the dimensions.
Every time you make a change, press Save, and Run again.



Program structure

Ancient Brain programs have the following structure:
 
function World() 		 
{  // Start of World definition 


  this.newRun = function() 
  {
	// Instructions to be executed once, at start of run 
  };

  this.nextStep = function() 
  {
	// Instructions to be executed every time step 
  };
  
  
}  // End of World definition					 

Note the chain brackets. These define the start and end of blocks of code.

In the World so far, we did not define any "nextStep" because we did not have any code to execute on every step.

We will now add some new code at certain locations within the structure.




Paint the cube

The cube is "painted" with a random color each time we run the World. It would be nice to paint it with a JPEG or PNG image.

Insert the following code inside "newRun". (Remember the program structure above.)

 
 const texturefile  = "/uploads/starter/earth.1.jpg";
 var   loader       = new THREE.TextureLoader();
 
 loader.load ( texturefile, function ( thetexture ) 
 // this defines a function to be called whenever the file is loaded 
    {			 
        thetexture.minFilter  = THREE.LinearFilter;
        theobject.material    = new THREE.MeshBasicMaterial ( { map: thetexture } );
    }); 
	
You will now get something like the following:




Upload your own image

  1. Go to menu: "User" - "My uploads".
  2. Upload an image of your choice.
  3. Edit the code to point to that image. You will need the exact file name of the image.
  4. Change:
     "/uploads/starter/earth.1.jpg" 
    to something like:
     "/uploads/myuserid/myimage.jpg" 
  5. The cube will now be painted with your image.
 
 
 

Make the object move

We want the object to move on every time step. So we must now define "nextStep".

Insert the following code inside the World definition, but outside "newRun". (Remember the program structure above.)


this.nextStep = function()
{
    theobject.position.x = theobject.position.x + AB.randomIntAtoB ( -30, 30 );        
};

AB.randomIntAtoB returns a random integer from A to B. For more useful functions see the System docs.

Change the movement

  1. The above code makes a random move in the x dimension on each step.
  2. Change the code to make larger or smaller moves.
  3. Change the code to move smoothly in one direction.

  4. Change the code to make moves in 3 dimensions using:
     theobject.position.y 
    and:
     theobject.position.z 



Add music

Now we add some background music. Insert the following code outside the World definition. (Remember the program structure above.)

 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 the Free Music Archive. 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.



More coding

Change to a sphere

Change
 THREE.BoxGeometry 
to
 THREE.SphereGeometry 
and the object becomes a sphere not a cube.

You can customise the sphere. See the documentation for SphereGeometry.


Errors

  1. Errors while writing programs are normal. The important thing is to understand where the error is.
  2. You cannot (except in comments) type anything that is not a valid JavaScript instruction. If you do, the editor may warn you (on the left-hand side).
  3. Some errors cannot be detected by the editor and you will only find out when you run the program.
  4. 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.
 
 
 
 

Edit other Worlds

Clone "Blank Three.js World"

You might now be ready to clone Blank Three.js World and make changes to it.

This World has multiple objects, stored in a structure called an Array.


Blank Three.js World
521 runs ♦ 2 likes
Starter user
A simple starter World. An Array of spheres. Painted with textures. Random motion.

Clone other Worlds

Clone other Starter Worlds and change them.

The easiest parts to change are the parts labelled "Tweaker's Box" at the top.

When you get more advanced, you will make your own Worlds from scratch. The Worlds you create are only limited by your imagination.

 
 
 
 

Finish

Show it off

Use "Generate image" on the World page to generate a new World image.

Use "Embed code" on the World page to embed your World on another site.

Your World can be shown off on your mobile or other devices.

Other users can find it using the search box.


    

Documentation

While coding, you may need to refer to the documentation for:


And the definition of Worlds and Minds:



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