PFA:009-011 – Tutoring

Use this time to work on your project. I will provide one-on-one tutoring.

Also consider using our Slack channel #courses-pfa to talk with fellow students. Ask Matti or other students how to join the mlab team on Slack.

Useful Links

• Useful Processing Code Snippets
• Processing Examples (very useful example sketches)
• Processing Tutorials
• OpenProcessing
• 25 Life-Saving Tips for Processing
• Daniel Shiffman/Coding Train: Processing Video Tutorials
• Daniel Shiffman: Learning Processing example code
• Daniel Shiffman: The Nature of Code (The entire book online for free)

Resources for Students

Anssi

• The SMT library for multitouch doesn’t seem to work with Processing 3 https://github.com/vialab/SMT
• There might be some way to convert the windows multitouch to TUIO that could be then read in Processing. Check out the TUIO output Bridges section, if any of them work.

Anze

• We have a Kinect in room O102, you can grab it from there
• You could also try using Runway ML for detecting hands and poses from just a webcam image (the Posenet model in there) Tutorial: https://www.youtube.com/watch?v=7btNir5L8Jc
• There is also Pose-OSC that has a Processing example. (this one seems to run faster than Runway ML)

Bailey

• PixelFlow has great fluid dynamics simulation, if you don’t what to start figuring the math yourself.

Boeun

• Processing has a face detection in the openCV library. It can be installed from the library manager.
• There is also this: Face OSC

Emeline

• Create a Bubble class
• A new bubble should appear when the mouse is pressed
• The minim library has more options than the default Sound library
• Maybe the bubble could also be let go and it will burst when it hits the edge of the screen
• The bubble could have a maximum size where it bursts (you can make the size random)

Hannu

• write down on paper what each controller should do
• figure out what the number of that controller is
• create a variable for that parameter that it should change
• connect the input data and the variable together

Jasmine

• Mathematical Rose Patterns: https://www.youtube.com/watch?v=f5QBExMNB1I (this is p5js, but can be easily converted to Processing)
• Also this https://www.youtube.com/watch?v=4uU9lZ-HSqA

Juha

• Thanks for bringing this controller to my attention, I didn’t even know about it!
• Built-in processing filters are slow, writing your own filters is very complicated. I would recommend using libraries.
• https://github.com/diwi/PixelFlow
• https://github.com/milchreis/processing-imageprocessing
• Both can be installed from the Library Manager

Lassi H.

• Use P3D mode, if you want to be able to zoom in/out to details.
• Might be better to draw the image using beginShape(), endShape(), texture() and vertex()
• The way to move from one viewpoint to another could be done using something like this:
  • You have variables x, y and z that tell where the “camera” currently is
  • You also have other variables targetX, targetY, targetZ where the position variables will always try to move to.
  • You can also use vectors (PVector) (currentPos, targetPos)

Lassi V.

• Detecting hitting the walls is a lot more difficult with a spinning object (especially if you use the rotate() command).
• Instead, rotate the character using sin and cos https://forum.processing.org/two/discussion/5333/how-to-do-collision-detection-for-rotating-objects
• You could even think of the character as two rotating points that are connected by a line. This way you only need to check the two end points for collision.
• You will also need to use FloatList to save the values from the FFT analysis
• A tip: only scroll the background, do not scroll the character. It will be easier to calculate the movements and collision testing. The corridor will scroll on its own because of the way you can dynamically add values to the FloatList.

Matias

• Going from FFT to pitch detection is quite complicated, but there are examples.

Mirya

• I will bring you this sensor: https://www.sparkfun.com/products/11574
• Here is an example how to read the data in Processing https://github.com/WorldFamousElectronics/PulseSensor_Amped_Processing_Visualizer

Niklas

• When you load an svg file it becomes a PShape
• You can get each point of the shape using getVertex() It returns a PVector
• You can then distort each point based on the data coming from the sound analysis.
• For p5js: https://www.youtube.com/watch?v=4hA7G3gup-4

Pietu

• Don’t do 3D physics, it is way too complicated.
• 2D can be done with some of the libraries https://processing.org/reference/libraries/#simulation but even they are not so simple to use. Adding sound or MIDI to them is very doable though.

Sirja

• Sounds like the mask option for images could be useful here
• Geomerative library could be useful for the glitchy/noisy texts

Taavi

• The size of the clearing ellipse probably could use a lot of smoothing or some non-direct relationship to the sound, so that it is not so jumpy