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.


Get an account

  1. To create Worlds, you need your own account.
  2. Register an account. See "Register" in the menu at the top of the page.
  3. 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 20 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".
  5. Go to the page for your cloned copy.
  6. Check your clone runs.


One Cube World
22 runs ♦ 0 likes
Starter user
  
  

Look at the code

On the page for your clone, click "Edit World" to launch the JavaScript editor. Look at the code in the editor.
  1. Edit the title of your clone.

If you have never seen JavaScript (or a 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.
  6. Some constants are defined at the top. These values cannot change after their first definition.
  7. Some variables are defined lower down. The value of variables can change over the course of the program.
  8. The framework of function World() and this.newRun is part of the Ancient Brain framework that allows the site to "run" Worlds. You can add or remove many instructions, but you need to keep this basic framework in place.
  9. 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.

Consider changing the following to see what happens:

  1. The sky color is a hexadecimal color number. Change it to some other color, press Save, and Run again.
  2. The start position of the camera is a multiple of the object size. (* means multiply by in JavaScript.) Change this to some other value, press Save, and Run again.
  3. 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. Press Save, and Run again.

Paint the cube

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

Insert the following code after you add the object to the scene:


 const texturefile = "/uploads/starter/earth.1.jpg";
 var texture = new THREE.ImageUtils.loadTexture ( texturefile );
 texture.minFilter = THREE.LinearFilter;
 theobject.material = new THREE.MeshBasicMaterial ( { map: texture } );   
 
You will now get something like the following:




Upload your own texture

  1. Go to menu "User" - "Your uploads".
  2. Upload an image of your choice.
  3. Edit the code to point to that image.
  4. If it does not work, check what address you are using for the image file.

Move the cube randomly

Add the following code:

function randomAtoB ( A, B )	// function to return random number from A to B 		 
{
    return ( A + ( Math.random() * (B-A) ) );       // Math.random() gives random real number from 0 to 1 
}

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

You must be careful about where to add it. Note the structure of the program as follows:

  • Definition of World:
    An opening "function World() {" matched with a closing "}" at the very end.

  • Definition of newRun:
    An opening "this.newRun = function() {" matched with a closing "};"
    This is all inside the definition of World.

Add the above code after the definition of newRun, but still inside the definition of World.

The code you put in "newRun" runs once, when the World is loaded.
The code you put in "nextStep" runs repeatedly, on every time step.
"newRun" and "nextStep" are part of the Ancient Brain framework, not part of JavaScript in general.


Do your own moves

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

Add music

Add the following code for background music.
Question: Where do you add it?

 const themusic	= '/uploads/starter/SuspenseStrings.mp3';
 var a = new Audio ( themusic );
 a.loop = true;			// loop the music forever 
 a.play();
 

Upload your own music

Upload your own music and change the code to play your music.

Change to a sphere

Study the documentation for THREE.SphereGeometry and change the code to make a sphere not a cube.

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
431 runs ♦ 2 likes
Starter user

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.

    

Documentation

Refer regularly to the documentation for:



The background is a program, showing the JavaScript graphics used on this site.
Customise background:  
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