Programming for Visual Artists

ARTS-A0701 – Digital Art 1

2024 - Lecture 1

Today

p5.js intro
Shapes, coordinates and colors
Assignment 1

p5.js editor

https://editor.p5js.org/

(if you really don't want to work with a browser editor follow this guide: https://p5js.org/get-started/)

p5.js intro

Let's create an save our first sketch

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  if (mouseIsPressed) {
    ellipse(mouseX, mouseY, 50, 50);
  }
}

function setup() {

}

function draw() {

}

Code here between { and } is executed once in the geginning

Code here between { and } is executed over and over again

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Call a function 'createCanvas' with the parameters 400 and 400. First parameter sets width and secon sets height.

Call a function 'background' with the parameter 220. A single parameter sets a grey value between 0 (black) and 255 (white)

JS is case sensitive. createcanvas is different than createCanvas

Each statement should end in a semicolon ;

function setup() {
  //This is a comment
  //Computer skips all comments
  //Sometimes is't good to write notes in your code
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function setup() {

}

This defines a function called setup that takes zero parameters

p5.js calls the setup function once in the beginning of execution

Now we're only missing variables, conditional statements, loops, arrays and classes and we're done!

Shapes, coordinates and colors

Coordinates and shapes

https://p5js.org/learn/coordinate-system-and-shapes.html

Colors

https://p5js.org/learn/color.html

Assignment 1

Use basic shape primitives to draw a face. The aim is to get familiar with the p5 shape primitives, coordinate system and colors so don't be too critical of your creation.
Submit a link to your p5 sketch on MyCourses.