USB Arduino Setup

This was an extra session held by spencer to introduce processing through an Arduino to those who were interested.


USB Port

Screen Shot 2017-04-01 at 17.24.09

Line 3: The serial library is what allows processing to receive data from the USB port.
Line 4: Serial myport is the path of communication to the Arduino

Line 117: The serial myport is setup here. Serial.list()[3] defines which USB port to use and 9600 is the speed of communication.


Println reveals that the serial.list array only has 2 drawers. Because I don’t have an arduino plugged in and serial list()[3] is out of bounds.

To catch this error we wrote a for loop…


with a new variable called havearduino (we had to define this at the top)


…and apply it with an if statement at the beginning of void draw so our check reader() function only runs if the arduino is plugged in

The next line down in void draw calls the function to replace the old ID with a new one.


Now the sketch runs, bypassing the need for an arduino because there is already some functionality built in that works based of keypresses.


Check reader function


Check reader needs to figure out the new ID

336: Listen for information from the arduino and store it in dat
338: We use asterisks to separate the id numbers so the if statement checks to see if the current character is an asterisk. It will use this break to store non-asterisk characters in thisreading.
342: If the character IS and asterisk, that means we have come to the end of the id, and it can now be compared with the lastreading. If they are not the same, then thisreading replaces lastreading.

348: Int stpos6 is about applying the numbers to a string UID: 01 23 45 67


Get data function

This function searches within the data and makes arrays from chunks of it. We end up with 3 arrays based on the FMP, Special Study and Dissertation data. The way you write this function will vary depending on the data that you are reading.


Applying Interactivity

Now, to apply the connection with the Arduino to an existing sketch. For this, we used the generative letter project we had been working on in Tuesday sessions.


For this we work by pasting the necessary parts of the code across part by part.


First import the library.


Then copy over the havearduino variable and all the other strings utilised in the checking and receiving parts of the code


create the link to card reader

check the card reader each frame at the beginning of void draw, note that you’ll also need to paste in the checkreader() function.

Now the id and new id values are being picked up.

Screen Shot 2017-01-26 at 12.10.14

paste across the if statement that compares the new and old id. Remember to paste in the getdata function AND copy across the data text file too.

Screen Shot 2017-01-26 at 12.13.11

some of the variables in get data are undeclared, we could declare them but a lot of them are not necessary, since the only part of the data we are using in this sketch is the name.

Screen Shot 2017-01-26 at 12.14.53

Strip down the get data function accordingly.

Now paste your original variables into get data and redeclare them to link them up with getdata

This works, except we need to add asterisks onto the end of currentname


SS.1.04/B.04 Random with Constraints

At the end of SS.3.01 Auto-Random Colour Picker with Expressions, I concluded that the expression I wrote would need modification, since true randomness brings about the possibility of the same colour being picked twice. The time I spend rectifying this by selecting and modifying individual layers meant that this expression could not realistically be used as a time saving device.

Today in the open coding session I requested that Spencer show us how to write a code that would generate a random number but while also storing the number it picked previously, ensuring that the same number is not picked twice in a row. This is the code:


There are two arrays in this code (If we think of arrays like filing cabinets, this makes a lot more sense).

Line 1: The first array is called stuff and it contains all of the seven options.
Line 2: The second array is called used and will only contain 1’s and 0’s. The used array is define to always be the same size as the stuff array.
Line 3: A new integer called numpicked keeps track of how many times we have picked an option out of the stuff array. We will use this later to check if it is more than seven, and reset the used drawer if it is.
Line 4: Int total is just for the user to define how many random choices the program has to make.

Line 6: Void setup() is used because we do NOT need to repeat the whole function. The main repetition power comes from the for loop on line 14. Even this loop has a limit, which is defined on line 4 and called in the loop’s condition.
Line 8: Set numpicked to zero.
Line 10: This for loop then runs through completely, from lop=0 to lop=7. It goes through all seven ‘drawers’ of the used array ‘filing cabinet’ and putting a value of 0 into each one.
Line 14: Here, a large for loop begins, using lop2 this time. Every time lop2 increases in value, the following happens…

Line 15: A random number between 1-7 is picked and stored locally as thisran.
Line 16: A while loop is used to see if the used ‘drawer’ that correlates to the number thisran contains a 1. If it does, a new thisran is picked. (A while loop is used instead of an if statement because it repeats until used[thisran] does not equal 1 – meaning we have found an unused value.)
Line 19: When we are happy with thisran, we elect to use it. A number has been chosen, so numpicked increases by 1.
Line 21: If this increase in numpicked bring us to numpicked = 6, we know that the number we have just picked will be the last in the sequence (see paragraph below). Line 22: If this is the case, numpicked is reset to equal 0.
Line 23: The for loop from line 10 is run through again, setting all the ‘drawers’ in the used array to 0.
Line 27: On this clean slate, the ‘drawer’ in the used array that corresponds to thisran is given a value of 1.
Line 28: The ‘drawer’ in the stuff array that corresponds to thisran is printed.

This code actually picks out numbers in groups of six before resetting to do another six, I originally intended it to be 7, so that all numbers would be scrambled but still equally represented. Increasing the condition of the if statement on line 21 to (numpicked == stuff.length) meant that regardless of the value I plugged into total, I would still only get 13 values. I could investigate this and spend time fixing it, but I have elected not to, since I believe that, having one less space than there are options brings about another element of randomness. There is no guarantee that any one choice will be picked at all, and they all have a 1 in seven chance every time 6 options are picked.

If I can later figure out how to change this, I might add a button into my script that allows the user to pick between these two modes, scrambled or random.

I realise that processing has a slightly different syntax to the javascript expressions inside After Effect, but I believe I can figure out how to apply the principle of the code spencer showed us to the context of expressions.

SS.1.03 Processing and p5.js: Maps and other Functions

As part of my efforts to widen my knowledge of code i’m learning Processing and JavaScript from Daniel Schiffman. Today I followed Coding Challenge 01:

This was fun and interesting, but really speedy! This is good though because its pushing me to get better and quicker and more comfortable with typing out the basics quickly and spending more energy on the important stuff.

Here’s my outcome.

The thing I took away from this short challenge was that I was a little behind on maps. I understand how they work but don’t remember that syntax and cannot write one myself. Soo THIS is what i’ll go over next.

Another part which was fairly new ground for me was the idea of multiple tabs within a sketch, and defining and running a function like he did. It seems to be written differently to how I remember writing functions in Codecademy, and I’d like to cover that again so I can completely understand.

OKAY SO. Map Function.

I found another Dan Schiffman tutorial on the Map() function for JavaScript. This is probably more useful for me as i’ll be writing my script in JS anyway. (I don’t really forsee a use for the map function at this point though, who knows). First, though i’ll watch this tutorial on the map function within processing, since its the only time i’ve used one and the syntax may be different for JavaScript.

I understand that, the first letter in the brackets is the property we are looking at, the next two are the max and min values to take from that property and the second two values are the max and min values to assign to the variable (in the example above, that’s x or y). I was able to understand what was going on here because I was also able to correct a mistake in the video. Where he assigned x and y to the position on the box and not mouseX, mouseY.

Right, on to p5.js now.

While Schiffman was explaining the basics of a map() function, I tried my hand at writing one in p5 using what I knew from processing. It didn’t work.


Originally put my map function up at the top before function setup but then I got an error message telling me to put it inside setup. I did but the effect still didn’t work. I thought it was probably a syntax difference between Processing and JS so I followed the rest of the video to see how he did it.

Turns out, that map functions in JavaScript are written the exact same way they are in Processing, I was however supposed to put my map function in the draw not the setup. Now it works!

Next up, Functions. Not the ones written like map() or line() but the ones that require curly brackets, and how to call them. In processing, they begin with ‘void’, and in JavaScript they seem to begin with ‘function’. I do vaguely remember a lesson in functions on Codecademy. So lets revisit that and then try to figure out how this translates to Processing.

The functions i’m working with in this lesson are a little different to the map function since it has steps to complete {inside the curly brackets}. This makes it feel a little more similar to the void functions i’ve seen in Processing, even though the void functions i’ve seen so far all leave the () brackets blank. They don’t seem to have any need for parameters just yet. Maybe that’s because i’ve never had to call these functions yet (except earlier in this post in the starfield challenge).

Calling a function in Javascript feels pretty different to calling one in Processing too. I’m pretty sure that they use . (dot) in the syntax for Processing. Maybe I should try writing the same functions in both, to identify the differences.

Yet again Daniel Schiffman has become super useful as he has a series of videos on Functions within Processing.

Screen Shot 2016-12-18 at 14.51.48.png

In this series, Schiffman introduces functions, explains the make up of them:

returnType name (parameters){block of code}

for instance:
void draw (){}
rect(30,30,50,50); and
int map(mouseX,0,600,0,255);

A quick refresher on return types. Void is used when a return type is not necessary, AND the function in being defined by you. Rect, Map, Line ect are all functions that were defined by Casey and Fry when they developed processing.


Using a made up function as an example – flower(); – he demonstrates how you can store a block of code in a function and use it in elsewhere in your code. The ‘flower’ was actually a red ellipse but after the tutorial, I went ahead and made an element that looked vaguely more like a flower.

Screen Shot 2016-12-18 at 14.39.23.png

This is extremely useful and I can already see where this could be used. Before progressing with this tutorial, I went back to the code from Processing Week 01 to alter the way I organised clouds as a repeating element.


In the next video, Schiffman shows how to call a function in Processing. It’s exactly the same as JavaScript (though this example requires no parameters). I still haven’t found out where the . (dot) comes into this. So I’ll complete the tutorial to find out.


I finished the tutorial and never found out the use for a . (dot) but now I know how to call a function in Processing I can translate the JS function I wrote in Codecademy to make it work in Processing.

I even made an interactive version where the user can input the length and width of the box with mousePressed. To aid understanding, I included visual feedback in the form of a rectangle drawn showing what the user inputted when they clicked the mouse and the calculated perimeter displayed on screen.

SS.1.01 Processing Week 01

Today begins the first week of working with processing in process and production. I really enjoyed this session because it involved creating images with calculated shapes, something i’m quite at ease with and is usually a technique I use in illustrator. Usually my obsession over the geometry of my work holds me back, but here it made everything easier to understand.

Firstly we were taught the basics of the programming language, then allowed 15 mins to create our own images with the knowledge we’d just learned.




Above is my process in motion and below is the final stage of my code and the sketch it produced.


But why use processing when I can make things like this (and better) in Illustrator?

Good question, the answer is that processing has the added benefit of interactivity both, reading/reacting to user input and printing data and results.

To demonstrate this, we were then introduced to code that created circles at the postion of the cursor each time it was logged. Then on top of of this code we added other variables like keyboard clicks to change color and size of the generated circle. Below is the final stage of the code, where the colour of the circles changed depending on where the cursor is positioned on the canvas.



One more time from the top…

In Spring I began to learn the basics of JavaScript through Codecademy. I made some good progress and even began using it in my After Effects workflow, getting more out of my expressions than I ever had done before.

Of course then things got busy, I took a holiday and then in July I lost my blog and all the content of my laptop. I took a break, and now i’m starting again. JavaScript one more time from the top, just to really make sure its sticks this time.

Here we go.