Intro: movable-shape
is a way of animating a shape that doesn't need you to refactor everything to be relative to itself. It's super useful to do that, and you should get in the habit of doing that. But! movable-shape
provides a sort of wrapper around p5.js drawing code that lets you move it around, even if it's dumb.
Concepts that are introduced:
-
Multiple files: You will note that there are now two separate JavaScript files:
sketch.js
andmovable-shape.js
. This helps keep my work (the guts ofmovable-shape
) separate from your work (drawing your object). (To see what's happening, look at lines 8 & 9 ofindex.html
.) -
Overwriting properties/extending code: You'll notice that I'm asking you to overwrite the
drawShape()
function insketch.js
. It's defined onmovableShape
as an empty function, and lines 8-10 ofsketch.js
overwrite that function with whatever you want to put in it. -
Wrapping code: You can essentially copy-and-paste your unrefactored drawings into
drawShape()
, andmovableShape
will let you move your drawing around at will.