Nicholas McLaughlin Blog

Day 01

An introduction to designing for the mobile web. Showing the potential and what can be achieved using the web and running P5js.

Such examples of these mobile web apps are:

https://www.exhaustingacrowd.com/london

In this example, exhausting a crowd takes inspiration from Georges Perec’s ‘An Attempt at Exhausting a Place in Paris’ to then let people from all over the world tag who they see the footage.

http://slaveryfootprint.org/

https://rhizome.org/editorial/2017/sep/06/the-good-life/

https://stealingurfeelin.gs/

After using Processing in my Creative Coding project, I don’t feel that I am going in completely blind, but to borrow my analogy from my creative coding work journal. If that was learning a new language, this is like learning a new dialect.

The next step was testing out the older code I had taken from Processing into P5js and then sharing it with my phone to see how it worked on other devices.

I then went on to mess around with the accelerometer on an android tablet to both have a chance at messing around with that function as well as gaining experience with an OS that I have no idea about.

As well as a bonus of troubleshooting and highlighting the question of access to the accelerometer on the Apple OS.

https://videopress.com/v/Fh4xe2AS?resizeToParent=true&cover=true&preloadContent=metadata&useAverageColor=true

Day 02

The second class was using code to gain access to certain functions like the motions of the phone and specific access. I’m still trying to figure out what I want to do for my mobile web project, but I know I want to integrate physical motion into my art. Either through the code affecting the phone, such as vibration or noise, or the phone affecting the code using the distance sensor or accelerometer.

The images above show tests I did with the accelerometer I did in my phone (IOS), I also tested it on an android device so that I know that its not one operating system.

https://videopress.com/v/1tCWppI6?resizeToParent=true&cover=true&loop=true&muted=true&persistVolume=false&preloadContent=metadata&useAverageColor=true

As shown in the video above, the force and direction of the phone as it is shaken determines where the circles are drawn and how big they are.

Day 03

I started by looking at different examples of how coding has been used in P5js to possibly inspire my project further.

https://videopress.com/v/1mof1F2v?resizeToParent=true&cover=true&loop=true&muted=true&persistVolume=false&preloadContent=metadata&useAverageColor=true

The video shown above tests the device turned command, so the phone is faced down when the square changes colour.

https://videopress.com/v/I5KLQRHu?resizeToParent=true&cover=true&loop=true&muted=true&persistVolume=false&preloadContent=metadata&useAverageColor=true

Ally broke a Nintendo switch to get to google and test my code; sadly, the accelerometer of the switch wasn’t accessed.

Final

https://videopress.com/v/LZZK2dBL?resizeToParent=true&cover=true&loop=true&muted=true&persistVolume=false&preloadContent=metadata&useAverageColor=true

https://editor.p5js.org/JustNic/sketches/xM955ChnG

This is footage of the final idea being run on Chrome through an iPhone. The accelerometer is still the driving force of this test. Still, in this iteration, I have also lowered the effect of the accelerometer on the drawing, as I added the random colour aspect to it.

https://videopress.com/v/Qg0REEiQ?resizeToParent=true&cover=true&loop=true&muted=true&persistVolume=false&preloadContent=metadata&useAverageColor=true

Above is the same code running on an Android device and also on chrome. As well a demonstration of how the user interacts with it.

Try it for yourself and see what images you can make!