THU | Drawing With Code

THU | Drawing With Code

September 7, 2023
9:15–12:00
Room G203

Welcome 👋 to the first steps in your creative coding journey!

Inspiration #

Every week, I introduce you to different artists and designers who use code/computational processes in their work.

Introduction #

The content of the course is based on classes that Matti Niinimäki has been teaching at Aalto University for the past 10+ years. They have had different names over the years:

  • Software Studies: Programming for Artists
  • Programming for Visual Artists
  • Introduction to Creative Coding

AXM-E7001 Computational Art and Design is the latest version of this course that was created during the curriculum renewal process for the new Master’s Programme in Art and Media at Aalto University.

This track of the course is aimed for beginners. The course also has another track taught by Markku Reunanen for students who already have some experience in coding. You can find the details of that implementation on the MyCourses page of this course.

Important resources #

Book #

There is a great book that covers the topic. “An essential guide for teaching and learning computational art and design: exercises, assignments, interviews, and more than 170 illustrations of creative work.”

Levin, Golan, and Tega Brain. 2021. A Handbook for Computational Art and Design. London, England: MIT Press.

Tools #

p5.js #

The programming language we use on this course is JavaScript. More specifically, we use a creative coding library called p5.js

p5js Editor #

Whenever you work with your own code, I recommend that you write it using the official p5.js editor. Especially in the beginning. However, these are some other options:

This website #

My goal is to make this website a very thorough learning resource for the course and for anyone wanting to learn creative coding. I use many examples together with the written instructions and explanations. On some pages I use this interactive p5js-widget that allows you to play with the code right here as you go through the examples and materials:

Try editing the code above. See the Revert button that appears? That allows you to revert back to the original code. The widget saves your edits even if you go to a different page on the website so it might have saved something you did earlier that broke the code. Make sure to keep an eye out for that button!

The widget does not work so well for more complex programs or sketches where I want to use some other libraries. Therefore, I sometimes embed example code using Open Processing. You can edit the code with this as well.

Your keyboard #

Writing code requires you to use special characters on your keyboard. Make sure you figure out how to type the following characters on your keyboard (especially if you use the computers at Aalto that have Finnish keyboards).

  • parentheses ( )
  • square brackets [ ]
  • braces/curly brackets { }
  • asterisk *
  • slash /
  • pipe |
  • ampersand &
  • equal sign =
  • colon :
  • semicolon ;
  • comma ,
  • hash #
  • tilde ~
  • single quote ‘ – note that this is not the same as accent ´
  • double quote “
  • less/greater than < >

Our First Sketch #

The first sketch that we create is going to use the drawing functions available in the p5.js library. The programs that you write in p5.js and Processing are often referred to as sketches. In JavaScript, you might often also hear the word script.

So open a new sketch in the p5.js Editor.

setup() and draw()? #

There is always some code written for us whenever we create a new sketch with the p5.js Editor. We are going to learn more details about these two functions a little bit later. For now, the most important parts to understand:

  • The setup() and draw() functions are part of how the p5.js library is structured.
  • You need to always have them in your code. If you remove them you will get error messages popping up in the console and nothing will work.
  • Today, we will leave the setup part untouched and write all of our code inside the curly brackets { } of the draw() function.

This is enough information for now, we will learn more details during the next lecture.

Canvas #

When you draw on paper with a pen, the first thing you need is a piece of paper. With our digital drawings on the computer, the first thing to decide is the size of our “paper” on the screen. In p5.js this “paper” is called the canvas.

You define the size of the canvas in pixels using the command (function) called:

createCanvas(400, 400);

The two parameters inside the parenthesis of createCanvas() define the size of our canvas. The first value is the width and the second is the height. You can find a detailed explanation of how it works in the reference.

Note that you can use windowWidth and windowHeight to stretch the canvas to the entire window.

Color #

Try changing the numbers in the background() command. The way p5.js understands the values depends on how many parameters you provide.

  • If you just use one value background(100); the number will be interpreted as a grayscale value between 0–255
  • If you use three values background(255,0,0); the numbers will be interpreted as red, green, and blue channels (RGB). These values also range between 0–255.

These functions will be useful for you today:

You can also change the way the color channel values are interpreted using colorMode() but let’s stick with RGB for now.

Shapes (2D Primitives) #

There are a couple of attributes that will be useful today also:

Comments #

By the way, any line of text in the code that starts with // is a comment and gets ignored by the program. Comments are there for you to remind yourself what you are doing or to explain to others what the code does. You can create multiline comments with /* and */

// this is a comment


/*
With multiline comments you can write poems 
or love letters inside your code:

roses are red
violets are blue
boolean is either false or true
*/

Homework #

Assignment #

Experiment with the various shapes and drawing possibilities and try to create some sort of illustration using only these basics shapes. You can draw anything you want (self portrait, some kind of character or animal, something more abstract).

Limit yourself only to the following functions:

  • Shape –> 2D Primitives (all of them should be quite simple to use except arc())
  • Shape –> Attributes –> strokeWeight()
  • Color –> Setting –> background(), fill(), noFill(), stroke(), noStroke()

Add your sketch to our Open Processing page.