Getting started

Introduction

In this first lesson we'll create the basic organism object and display it on the canvas element.

This isn't going to be a full canvas tutorial, but I'll cover everything you need to know for this simulation. Mozilla has a nice tutorial if you want to learn more. I'll be using object-oriented programming - Khan Academy has a good tutorial on OOP.

All the code for this tutorial can be found on Github here. The code for this lesson is here.

Our first organism

Our organism is called a bloop, a name I took from the Daniel Shiffman tutorial. We'll represent it as a circle, so it will have a position (x- and y-coordinates), and radius.

Next we create a function that takes a bloop object and draws a circle, centered at (bloop.x, bloop.y), with radius bloop.r. The canvas API doesn't have a circle function, so we have to draw an arc, which starts at 0 radians and goes round for a full two pi radians. To save recalculating two pi, we can save it as a variable, TAU.