teaching machines


May 12, 2021 by . Filed under public, slai-2021.

This post is part of a course on geometric modeling at the Summer Liberal Arts Institute for Computer Science held at Carleton College in 2021.

Reorganizing your code to make it easier to understand and easier to update is called refactoring. Let’s refactor your code by organizing it into two separate files: one to hold your rendering code and one to hold your shape drawing code. By the end of the course, we’re going to have a lot of code for writing shapes. Our renderer won’t change nearly so much. You’ll save yourself some headache by separating them.

Follow these steps to refactor your project:

When you reload the page, everything should still work. When you add new shapes from here on out, start by adding to shapes.js a new function that is self-contained and named meaningfully, like this:

function generateLincolnSilhouette() {
  const positions = [ /* ... */ ];
  const triangles = [ /* ... */ ];
  return {positions, triangles};

Then in render.js, change only the shape generator that you call. The rest of the rendering code stays the same.