What happens when things don't go as you expect?

Simplicity

• start with the simplest code and get that working
• reduce your code to the simplest form and view
• divide and conquer

Multiple Shapes and Colors

• you can return multiple shapes using an array

const s = sphere({ center: true });
const c = cube({ center: true })).scale(1.4);
return [s, c];

• can set color of individual shapes to debug assembly

const s = color("Red",sphere({ center: true }));
const c = color("Blue",cube({ center: true })).scale(1.4);
return [s, c];

• can use transparent colors to see through objects

const s = color("Red",0.5, sphere({ center: true }));
const c = color("Blue",0.5, cube({ center: true })).scale(1.4);
return [s, c];

Checking for overlaps

• you can view intersections of shapes

const b1 = cube({ center: true }).scale([4, 5, 1]);
const b2 = cube({ center: true }).scale([1, 4, 5]);
return intersection(b1, b2);

• can view both their intersections of shapes and their union

const b1 = cube({ center: true }).scale([4, 5, 1]);
const b2 = cube({ center: true }).scale([1, 4, 5]);
return [color("Red", intersection(b1, b2)), color("Blue", 0.25, union(b1, b2))];

Printing Out to Console

• can print out to console

  • in chrome View> Developer> Developer Tools
  • your code write: console.log(5 + 6);
  • you can print out non-visual things like their bounds or even the shape itself

val s = square({ center: true }).scale(4);
console.log(s.getBounds());
return s;

Homework

• try setting colors and returning multiple shapes
• try transparent colors
• try printing dimensions, bounds or other information to console in chrome