- Useful learning resources
- "Hello, World!" in Node.js
- Command Line Tools & Utilities
- 3D Geometry and Parametric Design
- How to install Node.js on Raspberry Pi
- How to make the Raspberry Pi display a web page fullscreen at power on
- Making a website for your HTML, JS, CSS or p5.js files
- How to image a Raspberry Pi
- How to make a Raspberry Pi Video Looper
- How to export your p5.js as a video
- Workshop: Introduction to Creative Coding
- Systems in art & design
- Week 1 - Coordinates, shapes and colour
- Week 2 - Animation, conditionals & random numbers
- Week 3 - Iteration, arrays, objects and pixel arrays
- Week 4 - Other inputs and APIs
- Other workshops
Useful learning resources
- HTML & CSS
- HTML & CSS Book - A book aimed at designers introducing concepts within web development
- Learning Processing by Daniel Shiffman
- Nature of Codeby Daniel Shiffman
- Khan Academy Programming courses - Free online video courses with interactive code editor
- Lynda.com - Foundations of Programming Fundamentals
Daniel Shiffman has a vast collection of videos introducing programming using p5.js. Take a look through these videos if you are interested in getting a head start:
Kadenze is an online platform for creative education. You can take structured courses with plenty of video based content and exercises. Here is an Introduction to Programming for the Visual Arts with P5:
- Programming Design Systems / Printing Code
- A course that intersects graphic design and programming run by Rune Madesen at ITP in New York: http://printingcode.runemadsen.com/
- [Video] Printing Code: Programming and the Visual Arts, Rune Madsen https://vimeo.com/61113159
- Soon to be an online book with tutorials: https://programmingdesignsystems.com/
- HTML & CSS
- Open CV
- Face detection
- Which Face
- Edge detection
- Pattern matching
- Background Subtraction
- Data Vis
"Hello, World!" in Node.js
The first program most people write when learning a new programming language is one form or another of the infamous "Hello, World!".
What you'll need to know
To follow this tutorial you should be familiar with the basics of the command-line (also known as Terminal on OS X or Command Prompt on Windows). Below are some resources that will help you get up to speed on this topic:
Code Academy short course - Code Academy provide a short course on command line. It has an interactive prompt in the browser so you can get to grips with the syntax before diving into the CLI.
An introduction to Unix and Shell - The Interactive Telecommunications Program at NYU has a very interesting introduction to Unix, which is the precursor and model for Android, Apple iOS, Raspbian (Raspberry Pi), Linux and OSx operating systems. It is also a good overview of the history, philosophy and the anatomy of the shell.
You will need to download and install NodeJS. Download the installer for your particular operating system (OSX, Windows or Linux) from the NodeJS website and follow the instructions.
To test if NodeJS has been installed successfully:
- Open a command line prompt (Terminal or Command Prompt)
- And type the following:
$ node -v
Do not type the `$`. This just tells you that everything following the dollar is a single line in the command line prompt.
You should see the version of NodeJS that you installed. Something like:
v4.4.7. If you see an error then you may need to downloading and installing again.
Install other software (optional)
We recommend installing and using Atom text editor, because it is free, cross-platform and good for beginners to advanced programmers.
To create and execute our first NodeJS application we simply (1) create a text file with the
(1) Create a directory and file
Our goal is to create a directory called
hello-world and within it a file called
hello.js. You can create a directory and a file using many methods but below are the instructions and an animation of how this is done using the command line.
$ cd Desktop $ mkdir hello-world $ cd hello-world $ touch hello.js
The commands above explained:
cd [directory-name]- Change the current directory you are in
mkdir [directory-name]- Make a new directory in your current location
touch [file-name]- Create an empty file
The result of this should be a directory and file on your desktop in this structure:
Desktop/ └── hello-world/ └── hello.js
- Open the file
hello.jsin your preferred text editor
- Add the following code to the top of the file and save:
console.log("Hello, world of NodeJS!");
(3) Execute our
hello.js script using NodeJS
- Open a command-line prompt
- Change directory so that you are inside
$ cd ~/Desktop/hello-world
TIP: When changing directory with the `cd` command (or using any command for that matter) you can use the tilde (`~`) to navigate to your home directory. e.g. `cd ~/Desktop`- Pass your `hello.js` script to the `node` command ``` $ node hello.js ``` You should see the "Hello, world of NodeJS!" message printed out into your CLI prompt.
Below is an animation of this step.
Command Line Tools & Utilities
A Command Line Interface is a way of interacting with a computer by issuing commands in the form of lines of text. These commands interface with your operating system and hardware to perform complex and intensive operations.
There is a large amount of useful Free and Open Source Software (FOSS) available online that does not need or use a Graphical User Interface (GUI). Often this software works more efficiently with the operating system or directly with the hardware and therefore can perform tasks such as image, video or sound manipulation with ease.
Also because the CLI has a scripting language you can write scripts that automates certain tasks. For example:
- Downloading/uploading files from servers or web pages
- Converting, cropping, trimming, splitting, combining video files
- Converting, cropping, combining image files
- Adding effects to, combining, trimming, splitting audio files
- Mixing video & audio
- Extracting video & audio
- Adding text to video or images
Installing CLI Tools
Homebrew - Package Manager for macOS
Homebrew is a package manager for the macOS CLI. Once you install it on the CLI you can with one line install a lot of software from it's repository.
Copy and paste the following line:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- Hit enter and it will install it for you.
- To test if it was successful enter the following command:
FFMPEG is a powerful and flexible tool for performing any transformation tasks on video files.
brew install ffmpeg \ --with-tools \ --with-fdk-aac \ --with-freetype \ --with-fontconfig \ --with-libass \ --with-libvorbis \ --with-libvpx \ --with-opus \ --with-x265
Example use / Tutorial
The homepage for SoX calls it "the Swiss Army knife of sound processing programs" and gives the following description:
SoX is a cross-platform (Windows, Linux, MacOS X, etc.) command line utility that can convert various formats of computer audio files in to other formats. It can also apply various effects to these sound files, and, as an added bonus, SoX can play and record audio files on most platforms.
brew install sox
Example use / Tutorials
- Good introduction and some examples - http://www.krisyu.org/blog/processing-audio-files-sox.html
ImageMagick is a powerful image manipulation tool.
brew install imagemagick
- A comprehensive list of example use - http://www.imagemagick.org/Usage/
3D Geometry and Parametric Design
This is an informal workshop experimenting with a method of generating 3D meshes from 2D images based on the RGB colour space and making this content viewable in low-fi VR headsets.
I have been making a piece of software using openFrameworks to explore creating generative 3D meshes and also the challenge of quickly and easily getting 3D models into a lo-fi VR environment. During the workshop I will introduce you to the some basic concepts of 3D modelling and explain how this software can be used as a tool to explain generative design. Below is a screenshot of the software:
- Achieve a basic understanding of concepts in 3D geometry
- Become familiar with the concept of parametric design
- Generate 3D meshes from found and created 2D images
- Import 3D meshes into SketchFab, an online platform for sharing and discovering 3D models.
- Download Google Cardboard app for iPhone or Android
- Access to a computer
Concepts in 3D geometry
We will examine some of the fundamental principles of 3D geometry that allow the computational representation of three dimensional shapes and allow us to understand how these can be created programatically.
Glossary of Terms
Vertex (singular) or Vertices (plural)
One or more points in 3D space.
A vertex is commonly located in 3D space using the Cartesian coordinate system. When positioning a point on you use the the X, Y and Z coordinates as show below:
When joined together vertices make the basic building blocks of a 3D structure. The shapes formed are called primitives. Primitives can be points and lines but they become more useful when they form more complex shapes such as triangles or rectangles that can form a surface area. also known as a face.
As you can see from the the cow model each of the individual triangles is covered by a flat surface. Each one of these is a face, which combined make up the surface of the solid object.
To create a face you must have 3 or more vertices. This is why the triangle is the commonly used shape in 3D modelling. It is the most simple (or primitive) shape and can be used to represent the surface of a model.
Tesselation is the process of filing a flat surface with shapes (or tiles) so that there are no gaps in that surface.
Graphics cards on computers work only work with triangles so any 3D shape you see on screen will have been converted in triangles at some point by the software or by the graphics card itself.
The ground of parametric design is the generation of geometry from the definition of a family of initial parameters and the design of the formal relations they keep with each other.
What is a parameter?
In maths it is the part of an equation that can be variable, creating change in the output/result. It follows this simple model:
In programming and computation writing an algorithm follows this pattern. When an input parameter is changed the rules of the equation or algorithm produce a variety of possible outcomes. If there are multiple input parameters then those possible outcomes increase exponentially.
Algorithms as a design partner
The project below is a study of algorithms on baroque and renaissance paintings. The artist, David Quayola, leaves behind the iconographic meaning of the pictures and uses the raw information (for example colour, shape and the relationships within these) to create new pieces. The informational nature of the pictures can be used in combination with algorithms to modify outputs. No doubt within the creative process there are ways to manually delve into the code to tweak parameters and therefore manipulate the possible outcomes.
Parametric design is also used within architecture to functionally and creatively explore the possibilities in 3D spatial design. Combining formal rules (i.e. algorithms or equations) and making small variations to the input can produce huge and sometimes unexpected shifts in outcome.
As you can see from this Google search for parametric design (June, 2017) there is a recognisable style that is reminiscent of organic shapes and patterns. Without speculating on the functional or aesthetic value of this trajectory it is without doubt a function of designing with the aid of powerful computers that can model physical systems in nature that has enabled this. The relationship between parametric design and this type of outcome is that each of these designs would be partially determined by systems of rules in computation and part by the agency of designers, architects or artists.
Characteristics of Parametric Design
Creating Composition Systems
As a designer you often construct systems or 'grammars' that help to guide an outcome. This is the principle of parametric design however formalised into code and software.
Variation to a single parameter of a system (i.e. equation or algorithm) can create change in the output that is proportionally larger to the scale of the input. Increasing the number of parameters can again increase the variations of output exponentially! The challenge then becomes how to capture these outputs and make choices between them.
Simple rules create complex outcomes. Also incorporating randomness into systems can increase the the variation of outcomes.
Modelling physical systems
The speed of calculations in modern computers means that simulation or modelling of physical systems is entirely possible and in doing so can become part of system of parametric design.
How does the software work? Let's use it and find out.
If you want to recreate or learn from this yourself the code is available here and I would recommend following this tutorial for a grounding in 3D meshes in openFrameworks.
Further Reading / Watching:
- Parametric Design Fundamentals YouTube series
- A History of Parametric Design
- What is Parametric Design?
- openFrameworks Book: Generating Meshes from 2D images (This was an invaluable resource used for the creation of the software in this workshop)
How to install Node.js on Raspberry Pi
Installing Node.js on Raspberry Pi is very simple for those with basic command line experience.
In the terminal or via SSH:
- Add the package source:
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
- Install Node using:
sudo apt-get install -y nodejs
- Confirm package is installed:
You may also wish to install the development tools to build native addons:
sudo apt-get install gcc g++ make
And you may wish to install Yarn package manager to replace NPM:
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt-get update && sudo apt-get install yarn
How to make the Raspberry Pi display a web page fullscreen at power on
This short tutorial should be enough for you to be able to setup a Raspberry Pi with GUI mode and auto login enabled to disable a web page full screen automatically when it turns on.
full-screen.shinto the home folder of the pi user, and run the following command:
sudo chmod +x full-screen.sh
export DISPLAY=:0.0 xset s off xset -dpms xset s noblank chromium-browser --noerrdialogs --kiosk https://google.co.uk --incognito
- Create a folder called autorun inside the
.configfolder of the home folder of the pi user:
[Desktop Entry] Type=Application Exec=/home/pi/full-screen.sh Hidden=false X-GNOME-Autostart-enabled=true Name=kiosk
- Reboot the Raspberry Pi.
sudo reboot now
Making a website for your HTML, JS, CSS or p5.js files
We are going to make a website using something called GitHub pages to make a website. Signing up for a GitHub account and subsequently creating a GitHub pages URL will allow you to upload your HTML, JS & CSS files online, so that you can access your website from anywhere.
Bit of background (Feel free to skip)
GitHub is a website that stores what are called repositories. Repositories contain code, very much just like a folder on your computer. Git is what is called a version control system and to us what it means is that when you save files and commit them it will also save the previous version of your files too. This is very popular with a lot of people in the world of tech, because if something goes wrong, you can always go back to when it did work!
Step 1: Signing up for GitHub
Go to https://github.com and sign up for an account, the form should be on the homepage. There will be a few extra forms when you signup, you can skip through these.
The way that GitHub pages work is that in the end, your website will have the name of your username in it (
Step 2: Creating a repository
Now we have to create a repository. On the left hand side there should be a link that says Create a repository. Click this link and it should take you to this page:
This is where we need to set our repository name to equal exactly this structure:
Step 3: Uploading your code
Now we need to upload our files to the Github repository. Hopefully after you created your repository you should see the below page. What we want to do is click the link that says uploading an existing file
After that, if you drag your HTML, JS and CSS files (if you have them) onto the upload section, they should upload to your repository. BUT! You need to 'commit the changes' for them to be saved.
Step 4: Commiting your changes
This section is also relevant if you want to update your files too. Everytime you make changes to the files, you have to 'commit them'. To the Git repository, that basically means, storing these new files, committing them to memory.
Github makes this part quite easy. If you want to add a message you can do, but if not, all you have to do is click Commit changes and your files will be stored in the git repository.
Step 5: Viewing your website
It may take a couple of minutes but, after you have uploaded your code, you should be able to see your website running at
Step 6: Updating files
To update files so that you make your newest files available on the internet, you need to follow the same as Steps 3 & 4. The only difference is you now click that says Upload files which you can find where, below
Everything in this section isn't necessary but it might help you out, to work faster and better!
Step 7: Using a Git application
We can download github's application to help speed up commiting files. You can download the program here: https://desktop.github.com/. Once you've downloaded it, you need to log in and set up your name and e-mail address. Then you will see all of your repositories on your account.
If you click your
By default it will download the repository to this location: Documents/Github/REPO_NAME