Processing – HUD and tweens with ijeomamotionlib


In recent posts I flagged up some possible next stage developments for my Light Wave Virtual sketch with OCD and ControlP5…

  1. “…control over the Perspective Changes & Linear Movements… could be useful to set up some oscillators to do this job…“
  2. ”…[develop a] persistent HUD display showing a Monomatic ‘Live’ console with all the real-time input from our performance instruments and controllers displayed graphically etc…“
  3. ”… Combinations [could be useful] – which could actually be an XY pad – as per the ‘ControlP5diyController.pde’ example…“
  4. ”…make these a set of generic controls too – so their their outputs are switchable between cameras – perhaps by radio button?“

and I’ve generally had success – or stopped trying – with each of the above

1. I started by looking at the ControlP5 Matrix… intended primarily as a sequencer I was able to make a pseudo XY-pad controller… but at lower resolutions the steps are too coarse and at higher resolutions it’s difficult to ‘draw’ complete paths – although I’m sure these could be saved as ‘presets’ and recalled on the fly easily enough. If I could overcome the inevitable sync issues it might actually be a useful tool to trigger the simple SVG layer animations in the Discome sketch…

void setupControls() {
 itsControlP5.addMatrix("Matrix1", 11, 11, 10, 200, 100, 100).setTab(itsControlWindow, "OCD");

void controlEvent(ControlEvent theEvent) {
  String  name = theEvent.controller().name().substring(0,1);
if (name.equals("M")) {
    if (Matrix.getX(theEvent.controller().value()) <= 4) {
      Cam1_xDistance = Matrix.getX(theEvent.controller().value())*-100;
      Cam1_yDistance = Matrix.getY(theEvent.controller().value())*-100;
    else if ((Matrix.getX(theEvent.controller().value()) >= 6)) {
      Cam1_xDistance = Matrix.getX(theEvent.controller().value())*100;
      Cam1_yDistance = Matrix.getY(theEvent.controller().value())*100;

I also started to look at ijeomamotionlib”Motionlib is a library for doing time/frame based animations using tweens“ – by LA based designer Ekene Ijeoma – recommended to me as a possible contributor to InProcess:ing by Kyle McDonald.. Although I’m not wholly convinced this is the way to go… I’ve never been a huge fan of Flash – and since the library ”…can be used the same as TweenMax and Tweener for Flash“ this may not be a paradigm I’ll end up being happy with… I now have the ‘Tween_Tween_Events.pde’ example running in Light Wave Virtual and controlling the Cam1_circle value… albeit a lttle sluggishly…

2. And it’s on screen as a persistent HUD display – so I can happily change the camera position using PeasyCam or OCD and it stays put – realised by copying the code from the ‘ControlP5withPeasyCam.pde’ example…

PMatrix3D currCameraMatrix;
PGraphics3D g3;

void setup() {
  g3 = (PGraphics3D)g;

void draw() {

void gui() {
   currCameraMatrix = new PMatrix3D(;
	[your code goes here] = currCameraMatrix;

I’m really pleased to have finally got this working – having known about the possibility for a little while but failing to actually implement it… wicked.

Also realising this allowed me to adjust empirically for the offsetting I was getting when switching between PeasyCam and OCD the first time I ran the sketch… since the HUD elements also shifted I was able to compare PeasyCam and OCD camera feeds in a way I wasn’t able to previously – and it turns out there’s a difference in both the global FOV (+0.04) and Aspect values (+0.33) between PeasyCam and OCD which I’ve now compensated for.

3. I struggled for a while trying to make an XY-pad with the ‘ControlP5diyController.pde’ but just couldn’t get it to run in a secondary window… I think that having to ”// overwrite the draw method for the controller’s visual representation.“ as required by the demo sketch is the problem… I may post the ControlP5 forum thread asking if an XY-pad is considered for future releases – it would be really useful.

While looking for suggestions of how to make it work a ‘ControlP5 and XY-pads’ google search listed a Make your own multitouch music controller? thread on the forums which led to some tangential but interesting projects… mostly around multi-touch interfaces:

  • subcycle labs – the creative work of christian bannister a musician, designer and developer located in portland, oregon.
  • – Founded in 2006 – the Natural User Interface Group or ~ NUI Group is an open source interactive media community researching and creating sensing and display techniques to benefit artistic, commercial and educational applications.
  • – …a blog of John Rasmussen…
  • – FlipMu is home to the collective works of Owen Vallis and Jordan Hochenbaum. Interested in exploring the artistic and aesthetic implications of fusing interactive design, sound, and technology, FlipMu has created works ranging from large scale interactive multi-touch commercial installations to live musical performance using custom hardware and software.
  • – MSA Visuals was founded in 2003 by Mehmet Akten (aka Memo @ and has evolved from traditional 2D/3D animation, video production & post-production, rich internet applications to immersive interactive installations, computational audio-visual design and large-scale real-time adaptive experiences.
  • antima55 – adventures in reality – – personal spaces of and general project sites plus logs by the art group antima55 – including the cute stop motion machine

4. I also managed to implement a method for making a generic slider in ControlP5 – assigning which camera it linked to through a radio button group – but I ran into problem which I’m going to need some help resolving…

My approach was to set up ControlP5 sliders for arc, circle, etc… and a set of radio buttons labelled Cam1, Cam2 etc… – then join a String together based on which of these elements were selected… test if this string matched one of the predefined OCD variables – and then assign the slider value to that.

void controlEvent(ControlEvent theEvent) {
  String fullname = theEvent.controller().name();
  String[] OCDVariable = new String[4];
  OCDVariable[0] = "Cam";
  OCDVariable[1] = str(CamNo);
  OCDVariable[2] = "_";
  OCDVariable[3] = fullname;
  String OCDVariableA = join(OCDVariable, "");

String[] test = match(OCDVariableA, "(Cam1_arc)");
  if (test != null){
    Cam1_arc = theEvent.controller().value();

int CamNo;
void radio(int theID) {
  switch(theID) {
    CamNo = 1;
    CamNo = 2;
    CamNo = 3;
    CamNo = 4;
    CamNo = 5;

But it only seemed to work for a single String[] test at a time – I did try with more – and also I couldn’t think through a way to make it more generic… hmmm. [Update] I’ve since resolved this issue with a bit of advice – it was a simple error in repeating test rather than test[i] in the checking code… and I’ve since realised I also need to start working with object orientated syntax to create classes which will allow me rationalise and repurposes my code more efficiently – so I’m now developing a CameraConfig [] cameraconfigs; class which should thin things out considerably…

But I’m generally finding that as my Processing sketches get more complex – and I try to ‘bolt’ more things on – I end up scratching my head an awful lot more. And while it is satisfying to realise an idea – its not a particularly inspiring when I sit down to start a coding session with this expectation… hmmm.

Comments are closed.