A framework to animate your P5 sketches

This work comes from a realization made for a cyber Opera where graphics animations where needed.
P5 allows many primitives to animate objects, but a framework appears as imperative to stay in schedule.
This is a review of what was learned in this adventure.

two pilars

• Usage of literals to hold properties of objects
• A tandem between generators in charge of actions and scenario responsible for restarting generators in time.

how to start examples

Some examples will work directly by loading the html from the directory,
BUT some examples needs to load resources only available through http.

micro web server in python

from your terminal launch the ./py.command that will start a web server and open a chrome navigator.
If no chrome load http://8081 then open the /sketches/ dir

chapter 0: Literals and class properties

Properties in a class are hold as a literal object.
Mechanisms are provided to control class definition and instance variations.

chapter 1: Literals and class properties

To have something to draw and animate, a hierarchy of four classes :

• BasicObject: a class that do nothing except implementing useful principles
• MoveableObject: to hold properties for moving elements like position or rotation.
  • Main derived classes : GraphicObject, Tripod4Camera, MoveablePointLight, MoveableSpotLight
• GraphicObject : object able to draw itself in place
• GraphicObjectModel: the previous extended to use an external model (.obj, .stl) (or any p5 Geometry) with optional texture.
  

code examples

sketches/0-basicObject
sketches/1-cupOfCoke

chapter 2 : scenario

A scenario is a way to schedule steps of animation in a practical way.

code example

sketches/2-trafficLights

chapter 3 : basic movement

How to create a journey able to make variations of any data in time.
Use generic descriptions to define expected start and end values for the journey.
...

code example

sketches/3-basicMovement

chapter 4 : define variation along time

How to define speed variations for a trajectory using functions to modify estimated time.

code example

sketches/4-advanceMovement
sketches/990-showCurvesOnTime

chapter 5: decoupling time between parameters

You can give more precise timing to your parameters inside a same journey so that they don't all start at the same time or last the same duration.
... ...

code example

sketches/5-advanceMovement

chapter 6: use Beziers curves in space

Design easily and use Bezier trajectories for your parameters.
Learn to design a Bezier with an helper using keyboard.

code example

sketches/6-bezierTrajectory
sketches/991-bezierHelper

chapter 7 : move a camera using a tripod

Defining a tripod as a moveable element and mounting a camera on this tripod allows to set it in any scenario to apply movements to the camera. Sample shows a jump tripod to tripod then a smooth camera movement using a Bezier curve.

code example

sketches/7-cameraLiberty

chapter 8 : enlightments

See and move your lights, see where they are, choose right places with keyboard, organize trajectories, etc.

code example

sketches/8-ligthingObject
sketches/8-ligthingObjectSpot

Annexes:Environment and some technical stuff

Gallery : images from p5 animation for cyber Opera Terres Rares