Ancient Brain: How to get started

Explore the site. Run Worlds.

3D for Kids Worl...
By Starter user  
Example of plain Three.js API. Porting a World unchanged. From "3D Game Programming for Kids"
Scrolling background
By Enhanced  
here is explained and commented a way to code a scrolling background with three.js
P5 Particle System
By Starter user  
Port of P5 site's "Particle System" example with almost no change. P5 plain API. No AB framework...
See how coding works.

  • See How to write code on this site.
  • When coding, see the "Docs" menu for all the documentation you need.


Do the Starter Tutorial (P5)

  • The "P5" graphics library is probably most suitable for beginners. More experienced programmers may prefer to skip P5 and use the "Three.js" graphics library (below).
  • To get started with P5, work through the P5 Starter Tutorial. This shows you how coding on this site works with P5. This does not assume you have ever written a program.
  • The tutorial looks at coding the following World:
One Cube World (P5)
By Starter user  
Simple starter World (P5 version). No camera control. So cube rotates to show 3D.
Do the Programming courses (P5)

  • You can learn in depth how to program in JavaScript in P5 by doing the course: Foundations of Programming in JavaScript. This does not assume you have ever written a program.
  • When you have done that, you can do the more advanced WebGL course (JavaScript 3D graphics in P5).
  • When coding, use the P5 reference material.
  • When you are finished these courses, you will be able to make Worlds like the following:
Tutorial 2.1
By "Coding Train" p...  
Variables in p5.js (mouseX, mouseY)
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 7.3
By "Coding Train" p...  
Arrays of Objects
Tutorial 18.7
By "Coding Train" p...  
Tutorial 18.7 with full canvas, resized model, sound. Texture on box is image from another user.
Do the Starter Tutorial (Three.js)

  • The "Three.js" graphics library is more suitable for programmers with a little experience. Beginners may prefer to start with P5 (above).
  • To get started coding with Three.js, work through the Three.js Starter Tutorial. This shows you how coding on this site works with Three.js. This does not assume you have ever written a program.
  • The tutorial looks at coding the following World:
One Cube World (...
By Starter user  
Simple starter World (Three.js version). Cube of random color. Built-in camera control.
Do a Programming course (Three.js)

  • There is not yet on this site a full course in programming in Three.js.
  • You are directed to the Three.js reference material.
  • There are plans to partner with the book 3D Game Programming for Kids. You can code all the examples in this book on Ancient Brain. Here are two examples from the book:
3. Making an Avatar
By "3D Game Program...  
Port of code "building_an_avatar" from Ch.3
1. Shapes
By "3D Game Program...  
Port of code "shapes" from Ch.1
Modify some Starter Worlds.

  • If you have learnt a little programming, start modifying existing Worlds.
  • Pick one of the Starter Worlds. "Clone" it, and edit your copy.
  • The easiest parts of the code to change are in the "tweaker's box" at the top.
Complex World
By Starter user  
World with a Mind-controlled agent, actively-pursuing enemy, random maze, skybox, music.
Blank Three.js World
By Starter user  
A simple starter World. An Array of spheres. Painted with textures. Random motion.
Simple World
By Starter user  
Simple World with a Mind-controlled agent, randomly-moving enemy, paint blocks with texture.
MineCraft
By Starter user  
Use keyboard to draw blocks like in MineCraft. Use arrow keys and PgUp, PgDn to draw. Can save w...
See what you can build.

As you keep learning, here are some examples of what you can build on this site. Build something beautiful!

Collision World
By Starter user  
Demo of Physics API. Blocks fall under gravity and collide. Can modify gravity, friction, etc. S...
User-controlled ...
By Starter user  
3d model World. User controlled on desktop. Keyboard arrows to move. Switch to "Move with" camer...
See the most advanced Worlds.

Here are some of the most advanced Worlds:

Complete Infinit...
By Enhanced  
This program was made by Nathan Bonnard. In this world, you can generate an infinite world ! Bu...
Car models with ...
By Port of threejs....  
Car bodywork reflects images from skybox. Click buttons to change model and bodywork. Mouse to m...
Port of flying b...
By Discover three.js  
Animated models. Port of flying birds with GLB models. From "Discover three.js". See project inf...
Sampler
By Enhanced  
Upload sounds, play them, automate them. Saving data works.
The background is a program, showing the JavaScript graphics used on this site.
 
Font:

© Ancient Brain Ltd. 2018-19. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Platforms      Bug bounty      Contact

Stats      The name      Terms and conditions

Classes in Dublin      Call for partners