Visual Communication Design

We will use P5.js for several reasons. When learning visual (interaction) design, there is always the difficult issue of what kind of platform/software to use. There is a wide spectrum ranging from off-the-shelf interaction prototyping software on the one side, and purely coding (e.g. HTML5 etc) on the other hand.

P5.js seems to be nicely in the middle. On the one hand, it is relatively easy to generate interesting visuals. On the other hand, it can be a good introduction about how things on the web are organized. But most importantly using P5.js is really what sketching is about: a creative ping-pong game between your mind and the world where many serendipitous events occur that will lead to (literally) unimaginable outcomes. Further advantages include:

free
great community of artists and designers
access to a wide variety of javascript plugins including machine learning
concrete result because you generate an HTML page

How to sketch

Below you will find instructions to learn how you can code using P5.js, but before that let me quickly highlight the various ways you could use P5.js, specifically for this VCD course.

Besides using simple graphical elements, you can also use pictures of fragments of pictures as elements. Cut something out and save as .png so the background is rendered transparent. Also, you could use .svg files, which are vector graphics for the web.
Explore all types of input. It all starts with (mouseX,mouseY) but there are many other cool input variables such as the orientation of your smart phone (although this is turned off for privacy reasons on some smartphones), microphone sound level and even camera input (including machine learning stuff like face tracking).
It is possible to sketch both 2D and 3D (with webGL). As you can load images, you can also load 3D files (obj) and do interesting things with these.
As data input, it is possible to load JSON files, which can be used for data visualization.

Below you will find links to P5 video tutorials by the creative coding genius teacher Daniel Shiffman. Be aware that some older videos use a different coding interface, you should just do everything in the P5 online editor.

Besides watching videos, the best things to do are

Check out examples in the online editor
Check out examples in on p5 website
Check out the reference page

Coding train resources

The best thing to do is go to p5.js tutorial playlist from The Coding Train and watch all videos in the 1-7: Foundations of Programming in Javascript. I’ve seen all of them, and they are super usefull and enjoyable.

Nevertheless, if you have too little time, you can watch fragments from the tutorials that I ‘cut’ (using youtube’s embedding options). In most cases, I skipped the (quite lucid) fragments of Daniel Shiffman explaining theory on the whiteboard.