Arrays & Objects

We were asked to create a sketch using arrays and constructor functions. This really helped to simplify and organize the code which I appreciate, because it makes it easier to read.  For this assignment, I wanted to simply try to emulate my favourite season by making the leaves fall on the page when one clicks on the canvas. Go ahead, click above! You can also see the code here.

A struggle that I had creating this sketch was that I was trying to attempt to have the leaves fall and spin at different speeds.  This turned out to be a very daunting task and I decided I would leave that out and ask the teacher for assistance on this during class.

Last Friday, we took at stab at combining ICM with Physical computing by using serial communication to communicate between p5.js and the Arduino.  Please read about that experience at my Synthesis Workshop - Combing PComp and ICM blog post.

Synthesis Workshop - Combining PComp and ICM

The purpose of this workshop was the apply learnings from physical computing and combine that with Introduction to Computation Media to create physical interactions on the breadboard and have the result be reflected on the screen in the p5.js editor. The first activity was to use a potentiometer to move an ellipse across the screen as you turned the dial from 0 to 1023 and the second activity was to use a button to have an ellipse disappear on a screen when pushed.

This is what my board looked like for both of those exercises

The tricky part was ensuring that the breadboard and Arduino properly spoke to the p5.js library through serial communications.

Here were the exact instructions for the above activities (I want to share them here because there are a lot of variables and I want to be sure not to miss anything):

1. 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.
2. 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. 
}

The only issue that we ran into was with the potentiometer activity -- when the ellipse moved across the screen it was very jittery. Apparently there is a smoothing function that can help with this issue

Application

Finally, we were asked to create out own "physical variable sketch" in p5.js.  We were given the option to create a new sketch and add a physical component or incorporate a a physical interaction through serial on a previously created sketch.

My partner, Dominic, and I decided that we would implement a button interaction to a previous sketch that I created for ICM: Horus.

Because this was a previously generated sketch we had to upload p5.serialport.js file and link the this to the index.html file by including this line of code:

<script src="p5.serialport.js"></script>

Here is the code in the p5.js Horus sketch that allowed the serial communications to work in the browser:

var clicked = false;
var lastPeriodic = 1;
var serial; // variable to hold an instance of the serialport library
var sensorValue = 0; // ellipse position

function periodic(freq) {
 if (clicked == false) {
 return lastPeriodic;
 }
 // sin of frequency * two pi * time
 lastPeriodic = sin(freq * TWO_PI * millis());
 return lastPeriodic;
}

function randColor() {
 if (clicked == true) {
 fill(random(255), random(255), random(255));
 }
}

// When mouse is clicked, switched Boolean value of clicked
function mouseClicked() {
 clicked = !clicked;
}

function setup() { 
 createCanvas(400, 400);
 serial = new p5.SerialPort(); // make a new instance of serialport library
 serial.on('list', printList); // callback function for serialport list event
 serial.on('data', serialEvent);// callback for new data coming in
 serial.list(); // list the serial ports
 serial.open("/dev/cu.usbmodem1411"); // open a port
}

function draw() { 
 background(220);
 randColor();
 // Stroke growing based on time
 strokeWeight((millis() / 75) % 400);
 // Draw ellipse using periodic function for width and height
 ellipse(width / 2, height / 2, 300 * periodic(22), 300 * periodic(22));
 if (sensorValue !== 0) {
 clicked = true;
 }
 else {
 clicked = false;
 }
}

function printList(portList) {
 for (var i = 0; i < portList.length; i++) {
 // Display the list the console:
 println(i + " " + portList[i]);
 }
}

function serialEvent() {
 var inString = serial.readLine();
 if (inString.length > 0) {
 inString = inString.trim();
 sensorValue = Number(inString/4);
 }
}

Here is a video that demonstrates how the button behavior affected the Horus sketch

I would be interested to also include the potentiometer in this sketch so that the Horus eye moved from right to left with the values on the potentiometer. Combining two serial inputs is something that we will be working on in class this week, so I hope to implement after.

Re-working the fire fox

For this assignment we were asked to take an existing project to re-work and clean up the code using functions, objects and arrays -- I selected my fire fox sketch. The purpose of using functions is to compartmentalize and simplify the code.

By creating a fox function() that called all of the arguments needed to construct the fox, I am not able to easily change the following:

1. the x, y coordinates of the fox without having to move each shape individually
2. create multiple foxes as seen in the image below
3. add variation to the additional fox without affecting the original fox

Here is the location to view the code for the fire fox.

I definitely see the benefit of using functions however this assignment turned out to be a lot more difficult that initially expected.  For some reason, the way functions work doesn't come easily and so this sketch rework took me quite a long time. I am going to take more time this weekend to understand the basic principles.

One specific issue that I was having was that if you have a variable in the header that references random(), it breaks the code.  For a very long time I didn't understand what was going on.  Apparently, you need to call the random() in the setup() or draw() and not in the header because random() is a specific function to p5.js and the library needs to be referenced before this can be called (?).

Repetition with Variation

In last week's class we were introduced to the concept of for loops to reduce repetitious code.  According to Wikipedia a four loop "is a control flow statement for specifying iteration, which allows code to be executed repeatedly."

Here is an example of a for loop that I worked on in the help session last Friday:

Movement in Sketch

In class two of ICM, we were asked to add movement to our sketches to an interactive component. The sketch was to include all the following elements:

• One element controlled by the mouse.
• One element that changes over time, independently of the mouse.
• One element that is different every time you run the sketch.

Here is my sketch called Horus. Feel free to interact and click on the canvas

Here is the code associated with the sketch:

I was interested in trying to apply a sinusoidal waveform equation to an interactive image to see what could be created with this.  My partner has a signal processing background so he helped me through the logic of those calculations. The sine wave equation was taken from is location and iterated on to achieve the desired effect.

I wanted to create something that initially had a smooth and calming state that could be disrupted by a mouseClicked to transform to an opposing state. The hectic-ness of the quick sinusoidal wave can then be jolted back to a smooth and appealing visual with a second mouseClicked.

There is a time-based element included in this sketch where the strokeWeight continually grows over time to the height and width of the canvas an then resets to the the size of the ellipse created.

The element that is constantly random is the color associated with the ellipse that is constantly generated.

Working through the logic of movement with the application of math is an intriguing concept that I am eager to continue to explore.