Synthesis
- Friday, Oct 7th
- 11am-2pm
- Meet in the ITP Lounge
- Bring your arduino and any sensors or buttons you might have!
The focus for today is a design challenge: Physical Variable.
Create an experience using p5 that responds to a single physical interaction. Think creatively about your physical interaction -- is it a switch, a sensor, attached to your body, invisible?
You can create something new or build off of a previous sketch you or your partner made. The approach we suggest is to take a single variable in the sketch and control its value with a physical sensor.
You are randomly assigned a partner and should work together on this challenge:
(If you cannot find your partner, come to the front of the lounge and we'll find you one.)
-
Download the P5 Serial Control application. This application serves as a bridge between your arduino and your p5 sketch. For it to run you'll on a mac you either need to have "allow apps downloaded from anywhere" enabled or cntrl-click to open. More info on apple's help pages.
-
Open the following example, connect your arduino, and get it running. (You can "duplicate" it in the p5 editor to save it into your account.) Make sure the editor is using http and not https.
- p5.js code for reading analog value. Works with AnalogReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples-> Basics —> AnalogReadSerial. Turn a potentiometer from 0 - 1023, the ball moves from 0-255 on the screen.
- p5.js code for reading digital value. Works with DigitalReadSerial Arduino sketch, found in the Arduino IDE, File menu, Examples -> Basics —> DigitalReadSerial. Push a button, ball appears or disappears.
The examples use the p5.serialport library. You can read documentation and find more examples.
You might notice the above examples use a new concept called a "callback." This is a concept we will examine in detail next week in ICM while looking at "DOM manipulation." A quick explanation for how this relates to serial communication is as follows:
There is an "event" each time your p5 sketch receives data from the serial port. You get to decide what function is executed for that event. In the case of the examples, that function is serialEvent().
// When there is data, run serialEvent
serial.on('data', serialEvent);The above line of code then requires you write a function called serialEvent() to handle the data.
function serialEvent() {
// Your code for reading the data goes here.
}Take a break and eat!
You can divide the project into two parts (screen and physical) and split up the work or simply work on both aspects together however you like. You can create something new or build off of a previous sketch you or your partner made. The approach we suggest is to take a single variable in the sketch and control its value with a physical sensor.
If you are adapting a previous sketch made in the p5 editor, you'll need to upload p5.serialport.js to your sketch as follows:
As well as add the following line to the index.html file.
<script src="p5.serialport.js"></script>User test the project with your neighbor. Document your work with some photos and a short video. You should include a discussion of Synthesis on your ICM blog post for this week's homework.