In this workshop module, you are invited to explore and learn the basic principles and methods of programming by creating digital art.
This short introduction to web development will allow you to explore the fundamentals of programming through a series of hands-on exercises which will each introduce a concept and lead to the creation of a generative drawing.
The module culminates with your own adaptation of the intersection of the different programming methods learned in the form of an animated digital artwork.
The languages introduced are HTML, CSS and Javascript, complemented with the p5.js, face-api.js, and ml5 libraries.
Tools and platforms: editor.p5js.org, Visual Studio Code and Github for the creation and deployment of your codes.
References: p5js.org, w3schoools.com, thecodingtrain.com, generative-gestaltung.de, ml5js.org.
Now let’s get started!
00 Intro
00 A – Introductory lecture
– Introducing the module. What is creative coding? What is p5?
– Quick introduction to web development and programming languages.
– Helpful resources
00 B – Workshop methodology
– Module outline, deliverables, methods
01 Your first sketch
01 A – Creating your first sketch
– Introduction to editor.p5js.org
– Brief introduction to web development file structure (HTML, CSS, Javascript)
– How to link the p5 library?
– Coding colors
– The setup function and the draw function in p5.
– Drawing a circle in p5
01 B – Saving your first sketch
– How to save a file in p5?
– How to create a p5 editor link?
– How to create a p5 editor embed code?
– How to save your sketch as jpg?
– Creating a button in p5.
– Creating a function.
01 C – Cleaning your code
– Alignments, comments, spacings.
02 Your parametric sketch
02 A – Variables & Operators
– What are variables? Global v.s local.
– What are operators?
– What is the console?
03 Your animated sketch
03 A – Conditional statements
– Introducing conditional statements in Javascript.
– Comparison operators
03 B – Conditional statements using and or
– Conditional statement with logical operators
03 C – Randomizing
– Using random numbers in p5
04 Sketching with lines
04 – Your line drawing
– Line drawing in p5
05 Coding your drawing program
05 A – Creating your drawing program (v1)
– Introducing mousePressed in p5
– Boolean (true false)
– Equality comparison operator
– Introducing map
– Introducing push and pop in p5
05B – Creating your drawing program (v2)
– Creating buttons and custom functions using p5
05C – Styling your buttons
– Introduction to CSS customization
– Introduction to Google Developper Tools
05D – Refining the drawing tool
– Introducing p5 transformations: translate and rotate
– Introducing the p5 matrix (coordinate system)
05E – Creating a customizable drawing tool
– Creating a slider using p5
06 Sketching a grid-based pattern
06A – Drawing a grid
– What are arrays? What are loops?
– What are two-dimensional arrays? What are nested loops?
06B – Attractor points
– Measuring a distance in p5
06C – Creating variations
– Randomizing the grid
07 Drawing from an image
07A – Loading an image in p5
– How to load and visualize an image in p5
– Your code folder; uploading assets to the p5 editor
– Image width to height ratio
07B – Visualizing pixel data
– Loading pixel data in p5
– The pixel index
– What are arrays? How to get an element from an array?
07C – Line-based visualization
– Drawing lines in p5
– Using push and pop in p5
– Experimenting with pixel data visualization
07D – Color-based representation
– Applying a filter in p5
– Color-based pixel selection
08 Agent-based programming
08A – Intro to agent-based programming
– What is an agent?
– What is a Javascript object?
– Defining object properties
– Editing object properties
08B – Intro to object-to-object communication
– How to make objects communicate?
– Checking for intersections
– Condition-based object styling in real-time
09 Mapping emotions
09A – Capturing a video using the webcam
– Starting the webcam from p5
– Positioning the capture in the canvas
09B – From video to dynamic pattern
– Loading the video’s pixel data
– Creating a grid using nested loops
– Calibrating the grid based on pixel data
09C – Face recognition using ml5
– How to link a javascript library?
– Linking the ml5 library. Use the code below and place it in the ‘head’ of your HTML file.
– Running face-api functions using ml5.js and loading the data in the console
– Specifying the ml5 facial detection options
https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js09D – Visualizing face recognition in real-time
– Getting the landmarks positions from the ml5 detections object and visualizing it in real-time
09E – Visualizing emotions in real-time
– Getting the expressions from the ml5 detections object and visualizing the emotion change in real-time
10 Conclusion
Now that you’ve explored all these different concepts to create generative drawings, go ahead and create your own sketch. Start from scratch, and merge multiple methods to one final p5 sketch that will generate drawings for you.
Feel free to go on the web and explore tutorials, resources, example codes. The resources we recommend are linked in the introduction paragraph at the top of this page.
Enjoy!
** Blog Submissions
For each exercise and step:
- Play around with the code, the variables, the operators. Customize it and make it your own.
- Save one or multiple jpg images of your trials using the save button that you coded in p5 and upload them on your blog.
- Post a live view of your sketch using the ’embed’ code: you can get it from the p5 editor (file, share, embed code).
- Post the fullscreen link on your blog: you can get it from the p5 editor (file, share, fullscreen).
++ Going further
11A – Introducing ‘visual studio code’
– From p5 editor to Visual Studio Code
– The Live Server and Live Preview plugins
11B – Introducing Github
– Creating a Github repository
– Github desktop
– Github pages
And finally, congratulations on becoming a creative coder!
Material (In)formation 