Signing coders #1
The Signing Coders classes focus on providing coding education for people who are deaf or hard of hearing. We are using p5.js to introduce computational thinking and creative expression with technology. The first session with this course notes happened on 4/11/2016 at BRIC House.
Welcome to Signing Coders!
My name is Taeyoon. We have special friends helping with the workshop today. Atul, Luisa, Claire, Michael and Yeseul are all teachers and artists. Feel free to ask them questions. Vern Leon is our interpreter today. 🙂
What is coding?
Computers are dumb and we, humans, are sophisticated. Humans are intuitive, imaginative, and are able carry out many actions at once. Computers however, can only carry out actions in a specific order with very specific instructions. We need to talk to computers in a language that it can understand. That’s called code. Many of the things we talk about in this class will be new to some of you. If you are unsure what something means, don’t hesitate to ask. Also, if you are confused, it’s not your fault, it’s the computers that are perplexed.
First, let’s play a game called Bit’s journey.
Bit’s Journey
Bit’s journey is an activity to understand the concept of ‘instructions.’ You will learn about writing simple statements for the Bit to travel from start to finish.
Now, let’s try to draw a line by statements line(x,y,x1,y1) in the draw() function. The values of x and y is the starting coordinate, and x1 and x2 are the finishing coordinate. The top left is 0,0 and the bottom right is 200,200.
Try to draw a W shape! Start from the top left corner and draw W in 4 separate lines.
It’s very important that each statement is written on a new line or separated by semicolon ;. Otherwise, the computer thinks it’s one long statement.
Functions
Functions are blocks of code that perform a particular task. A function is executed when it is called up. You can create your own functions but their are also some functions “built in” to p5.js. The most important of these are function setup() and function draw().
function setup() runs once when the sketch is loaded and creates the Canvas.
A few important punctuation…
Curly braces {} is like a fence to protect the statements that live inside. The segments of code inside these brackets carry out actions.
You type curly braces by pressing shift & [ or ] on the keyboard.
Parenthesis () is a container where the parameters for the statements are identified.
Comma, separates numbers from each other.
function draw() runs forever, until it’s asked to stop. This is where action happens!
function setup() runs once and function draw() is a bit like an art work “Flippy” by Juan Fontanive, except it redraws the pages every time. p5.js draws on the canvas about 60 times per second. Like the cinema, images can be animated because it’s refreshed faster than our eyes can see the frames.
We will try to break this code to understand how to read the error messages. Delete parenthesis ( or curly braces { from some part of the code and check out the error message. Field guide to debugging. You will see that the code runs procedurally by fixing the bugs.
Drawing robot activity
We will pair up and program another person to draw on the clear sheet of paper.
Instructions for the Drawing robot exercise
How to draw with a computer program
Draw an ellipse, triangle by replacing rect. Triangle will need 6 points. Also try noStroke() to get rid of the outlines.There are few ways to draw shapes.
– rect (_,_,_,_) : the first two values are x and y positions of where the rectangle will begin. The two values that follow are the width and height of the rectangle.
– ellipse (_,_,_,_): this draws a circle. Interesting different here is that the first set of x and y are the center of circle. And the third value is the width and the fourth value is the height.
– triangle(_,_,_,_,_,_) has three points.
Now, try to make a face.
With two eyes, mouth (rect) and nose (triangle) and the big face in circle.
You can color the shapes with fill(). It works like picking up a color pencil, or paint. every time you draw a shape. – default white.
– Grey scale, black to white in 256 steps. fill(155)
– Color – RGB, lights add up. Try fill (255,0,0) or fill (0,255,0) to see what happens!
mouseX and mouseY
function setup() {
createCanvas(200, 200);
background(200);
}
function draw() {
rect(mouseX, mouseY, 10, 10);
}
– mouseX and mouseY, taking inputs
– make a brush by changing the shapes and sizes
– change colors of the brush
– try putting mouseIsPressed – like rect(mouseX,mouseY,mouseIsPressed,mouseIsPressed)
– Make the brush bigger by multiplying the value of mouseIsPressed by 5 or 10 times, like mouseIsPressed*5.
Use the random() function to create random behavior. That’s what computers are good at!
random(0,255)
For more complex project, we can use p5.js desktop editor
Free course at Kadenze for p5.js
Getting started with p5.js book
If you have suggestions, please contact taeyoon@sfpc.io
Pictures from the workshop.