S1. First Interaction

📌 Objectives

After this session, students are able to:

• Create an account on https://editor.p5js.org
• Describe what p5.js is and things you can create with p5.js
• Simply describe the use of function
• Understand p5 canvas’ coordinate system
• Use p5 built-in libraries to
  • Draw simple shapes.
  • Color the shapes.
  • Make interaction with mouse.

🌞 Warm-up

Before the class starts, participants should access and sign up https://editor.p5js.org.

Brief introduction about the course.

• Class theme and philosophy
• Course structure and duration
• Class resources hub (this website).

We start by discussing about three creative projects that are based on programming.

👨🏻‍🏫 NOTES:

• For teachers: The selection of projects is up to teachers. But you should choose projects that students can try or play, or the projects that clearly emphasize the interaction between human and computer.
• For students: You can explore more examples at the p5 examples or in CodeSurfing’s reading archive.

Suggestions:

Clappy Bird by The Coding Train

Music Follows Hand Gestures by Rebecca Fiebrink

Deep Swamp by Tega Brain

DISCUSSION

• What mediums are these projects on?
• How do the audiences interact with the artwork?
• What is the purpose of code in each project? (Eg: it is used to process users’ voice)

👨🏻‍🏫 NOTES:

For teacher: This can be done as a group activity with guided questions, or if time is limited, teachers can just teach while asking students these questions.

The idea of programming

• The main concept of programming bases around input → code → output. Think about code as a machine that takes inputs as ingredients and spits out output as dishes.
• Each of the example projects includes “coding” in different way, but it still follows the above idea of code. What are the inputs and outputs of each project?
  • Clappy Bird: clap (sound) → animation on screen (visual)
  • Music by Hand: hand movement (visual) → music playing (sound)
  • Deep Swamp: environment (data sensor) → data to adjust the aquarium environment (physical computing)
• In each project, how do we (or the subject) communicate with the machine?
  • Clappy Bird: clap → change of sound amplitude → code → change of the location of visual element on screen
  • Music by Hand: movement of hand → change of input data → code → change of music frequency.
  • Deep Swamp: change of environment (e.g. lighting) → change of input data → code → change of lighting data.
• Code is a set of rules (algorithms) that maps the input into the output. Or here, adjust the output according to the change of input.
• This links to our course philosophy: to use coding as a medium to document and react to the change of the nature around us.

What is programming?

• Computers are devices, including PC, laptop, or mobile phone.
• Programming is a set of instructions to tell computers what to do. In other words, it maps inputs into outputs.
• Instructions are written in code. Thus, the process of writing the instructions is call “coding” or “programming”.
• The purposes of programming are to automate, to connect, and to scale.

Programming for creativity

• Programming expands creative possibilities by expanding material, method, and interactivity.
• Programming can also integrate into other different disciplines.

Programming with p5.js

In this course, we learn to code using p5.js. It is a library, written on the language of Javascript. p5.js is designed for coders who want to create interactive, visual programs that run directly in a web page. It’s designed for creative coding, and it sits right at the intersection of coding and art.

📖 Show some projects that are built using p5.js. This can be teacher’s personal projects, past students’ projects, other artists’, or the p5 Showcase. Based on this, students can have a sense of what p5 can do and what to expect as an outcome of this class in term of technicality.

Advantages of p5.js

• Designed for creative coding.
• Can be integrated with other platforms.
• Collaborative: easy to show, duplicate, and share.
• Easy to access: p5 editor, documentation, and supporting resources.
• Open source.
• The Processing Community.

🏄🏻‍♂️ Activity: Human Fax Machine

• Students are divided into pairs. Each pair is given a serie of drawings that they need to copy. But only one member can see the drawing and they need to use words to guide the other to draw.
• Drawings are simple shapes that range from easy to difficult to draw. For example:

REFLECTION

• What we have done is a metaphor of programming with the instructor as programmer, the painter as computer, and the action of instructing to draw is programming.
• Drawing instructions need to follow some sort of agreements - rules and coordinate system
  • Rules: The instructor and the painter must agree on terms and concepts like “what does it mean by saying rectangle?”, “what does it mean by saying repeat?”. Agreement on this forms a standard instruction between the instructor and the painter. Or in the context of programming, between the writer and the computer, we call it syntax. Every language has its own syntax, which is to instruct computer do a specific task. These syntax is mandatory and must be followed. For example, in order to draw a circle in p5.js, we must call circle(), which is a term that can be understood by p5.js.
  • The coordinate system shows us how to navigate on the canvas, like a map. Each coordinate includes a measurement of the horizontal axis x and another one of the vertical axis y. This helps computers execute the drawing instruction exactly at where we want. In p5.js the position (0, 0) is at the top left.
• To finish a drawing, we have to divide it into small subtasks. Finishing all of them leads to the finish of our drawing.
• Programming works on the same concept. In order to complete a big task, we write codes that execute small tasks. Each chunk of code is called function. Each function has its own purpose. For example, to finish drawing a robot, we might have functions to draw different parts of a robot, for example: eye(), nose(), face(), … This is not just to help break down the solution to easier task, but also help us efficiently re-use the code. We will discuss more about function later.

🗣️ Teach

👨🏻‍🏫 Notes for teachers while teaching

Despite knowing the syntax, teachers should demonstrate the use of documentation so students can get used to it and practice by themselves. Getting bugs while live-coding is a good chance to teach debugging! Don’t shy away.

p5.js editor

• p5 Web Editor makes it easier to code.
  • Users can write and run the code instantly to see the result.
  • All the coding happens on the cloud, not in your local machine. Just like Google Docs.
  • There are options to share your sketch in different views: edit or fullscreen.
  • Sketches are saved and organized.
  • The p5 Web Editor also have a mobile version that students can explore later.

Function, basic shapes, and styling

• p5.js has many built-in functions, for example, the drawing functions.
  • p5.js provides user with a well-written documentation at https://p5js.org/reference/.
  • It’s a common practice in program to use documentation as a guide, even for senior programmers as syntax might change and vary from time to time, in different libraries.
• Function is like a box that can take inputs, process the inputs, and produce outputs.
  • A function input is restrictedly designed by the one who wrote the function.
  • A function can require one, many, or no inputs.
  • Similarly, a function can also produce one, many, or no outputs.
  • The inputs of a function are called parameter.
• Function can be built-in (provided by the library by default), or designed by developers - us. We stick with the built-in functions for now.
• By default of the p5 editor, there are two functions setup() and draw(). We will discuss more about these two functions later.
• For now, all the code for drawing will be written within the draw() function. By within we mean that every drawing code should be within the curly brackets “{}” of the function and has an indent - a tab at the beginning of the line compared to the function line.

• Inside the setup() function, we write the all the set-up needed for our drawing. For example, createCanvas() sets up a canvas on which we can draw. Change parameters inside to change the size of the canvas. For example, createCanvas(300, 300) to create a 300px * 300px canvas.

• Introduce circle() built-in function. Search Reference and answer:
  • What does circle() do?
  • What are the required inputs of the function?
  • What is the output of the function?
• Add color into the sketch.
  • background(): to change the background color.
  • fill() and noFill(): to fill color into the shapes.
  • stroke() and noStroke(): to change color of the border of the shapes.
  • strokeWeight(): to change the thickness of the border of the shapes.
• All the functions above receive parameters as color code in RGB.
  • A common RGB color code looks like (255, 48, 67), for example. It includes measurement of color in three channels Red, Green, and Blue.
  • So a finish syntax would look like background(255, 48, 67)
  • Read more about RGB colors: https://p5js.org/learn/color.html
  • Pick your your own RGB color
  • Transparency: In case you want to add opacity into your drawing, you can decide it at the forth channel - alpha, with value ranges from 0 (completely transparent) to 255 (completely solid). For example: background(255, 48, 67, 100)

• Order of code matters in p5.
  • The styling functions (color and stroke) need to be called before the drawing functions that they apply to.

🏄🏻‍♂️ Activity: Draw a window

• Looking through a window, what do you see? Draw it using only basic shapes. (It can be the window of your room, your parents, this classroom, or any window in your imagination)
• Starter Code:

• Remember to use p5.js Reference as a guide.
• Explore other drawing functions (rectangle, triangle, ellipse, arc) to enrich your drawing.

☕️ Break

🗣️ Teach

STRUCTURE OF A P5 SKETCH

• The setup() function is executed first and executed for only one time when you run a p5 sketch.
• The draw() function is executed after the setup() and executed repeatedly according to the the setting of frame rate.
• In the below example:
  • The background is moved to setup() so the background is only painted one time when we started the sketch.
  • The circle painting is drew on top of each other again and again as the function draw() repeat. Hence, it’s getting more and more solid.
  • 🏄🏻‍♂️ Tweaking the code to experiment yourself.
• frameRate: number of frames appear in one second - fps. By default, 60 frames per second.
• We can adjust the frame rate by adding, for example, frameRate(10) in the setup() to adjust the frame rate to 10 frames per second.

VARIABLE, ANIMATION, AND MOUSE INTERACTIVITY

• Now that we have a still drawing, let’s make it move. For example, make the circle move across the canvas.
• In order to make the circle move across the screen, we need to adjust its location over time. For example, to move to the right, we need to increase its x-coord by 1 every frame.
• Instead of giving a fixed location, we now use variable to host the value of x-coord. So we can give a new value to the variable x at every frame. And by that, make the circle move.

The syntax will look like this:

Observations:

• Using let to declare a variable.
• Using = to assign value to a variable.
• As the draw() repeats itself every frame, we can use it to increase our x-coord.

• Beside variables that are declared by users, we also have system variables. They are variables but reserved by the library by default.
• For example, mouseX and mouseY are system variables that host the location of the mouse cursor on the canvas.
• Using mouseX and mouseY to move the circle.

🏄🏻‍♂️ Activity: Animate and Interact

• Pick one element of your drawing and make them animate.
  • Adjust the opacity of the object and background to create blurry effect.
  • Adjust the speed of the animation
• Pick one element of your drawing and make them follow the mouse.

🌅 Cool-down / Q&A

• Variable naming conventions: variable naming convention,
• Zoom out and chat about other tools/languages.
• In 1 minute, write down 3 things that you learn from this session.

🤹 Assignment

• Continue on your drawing.
• Make at least one animation.
• Make at least one mouse interaction.

👨🏻‍🏫 Notes for teachers:

• Optional but not recommend to ask students to share with class because some might be shy and discouraged as it is their very first exercise).

📚 Further Readings & Resources