Introduction Features
Definitions Principles The AI model
Teaching Register a class
Getting started P5 tutorial Three.js tutorial
Coding course Coding course II Coding for kids WebGL course AI exercises
Starter Worlds
Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds
Advanced search
Docs API docs
Register Forgot password
 

Step 1. Introduction to WebGL in p5.js

In the video, Daniel Shiffman from The Coding Train introduces the concept of WebGL. He is coding in this video using localhost. (In other videos he uses the p5.js Web Editor.)

We will be coding using Ancient Brain. Before starting this course you should do the Ancient Brain Starter Tutorial (P5 version) to see how coding on Ancient Brain works.

You can edit the code direct from this course. Click the World image to run the World. Click "Clone and Edit" to make your own copy to edit. Change some code and save and click "Run". You cannot cause any damage!

How to use these course pages

Course pages have "Coding Train" videos and Ancient Brain "Worlds".

  • Click video to play. Click World image to run.
  • Click "Clone and Edit" to make your own copy of the World and edit it.
  • Everything works in the browser. No install needed. You need to Register and log in to edit.
  • Use buttons (or back and forward arrow keys) to move through the course.

  • Warning: If you click "Clone and Edit" again, you make a new World. You do not return to the first World. To return to that, just keep its tab open. If you lose its tab, you can find the World again through your home page.

Video


From: Tutorial 18.1: Introduction to WebGL in p5.js

World

Tutorial 18.1
Introduction to WebGL in p5.js
Introduction
Next: Step 2 of 8
Tweet this step: