Design Research Skills

Maker Skills and Attitude

Collaborative Learning

Processing Workshop

Step 01 - Download Processing

Step 02 - Unzip

double click the downloaded file
put the extracted folder in a place you can remember

inside that folder is a file called: 

Processing.exe (Windows)
Processing.app (macOS)

Step 03 - Run Processing

space where the magic happens

Play Button = Run the Code

Stop Button = Stop the Code

Step 04 - your first program

ellipse(50, 50, 80, 80);

This line of code means "draw an ellipse, with the center 50 pixels over from the left of the screen and 50 pixels down from the top of the screen, with a width and height of 80 pixels."

two main functions

void setup()
{
size(500,500);
}

Setup()

Draw()

void draw()
{
ellipse(250,250, 250, 250);
}

Step 05 - a few major components

void setup() {
size(1280, 500);
}

void draw() {
elipse(250,250, 250, 250);
fill(color(245,12,112));
}

COLORS

RGB
color c1 = color(245,12,112);

HEX
color c2 = #FFCC00;

FLOATs

BOOLEANs

INTs

Datatype for the Boolean values true and false.

example:

boolean a = false;
if (!a) {
rect(30, 20, 50, 50);
}
a = true;
if (a) {
line(20, 10, 90, 80);
line(20, 80, 90, 10);
}

Data type for floating-point numbers, e.g. numbers that have a decimal point.

examples

float a; // Declare variable 'a' of type float
a = 1.5387; // Assign 'a' the value 1.5387
float b = -2.984; // Declare variable 'b' and assign it the value -2.984
float c = a + b; // Declare variable 'c' and assign it the sum of 'a' and 'b'

Datatype for integers, numbers without a decimal point.

examples

int a; // Declare variable 'a' of type int
a = 23; // Assign 'a' the value 23
int b = -256; // Declare variable 'b' and assign it the value -256
int c = a + b; // Declare variable 'c' and assign it the sum of 'a' and 'b'

Step 06 - 2D Primitives

arc()

arc(a, b, c, d, start, stop)

float: x-coordinate of the arc's ellipse
float: y-coordinate of the arc's ellipse
float: width of the arc's ellipse by default
float: height of the arc's ellipse by default
float: angle to start the arc, specified in radians
float: angle to stop the arc, specified in radians

a
b
c
d
start
stop

circle()

circle(x, y, extent)

float: x-coordinate of the ellipse
float: y-coordinate of the ellipse
float: width and height of the ellipse by default

x
y
extent

Draws a circle to the screen. By default, the first two parameters set the location of the center, and the third sets the shape's width and height.

Draws an arc to the screen. Arcs are drawn along the outer edge of an ellipse defined by the a, b, c, and d parameters.

ellipse()

ellipse(a, b, c, d)

float: x-coordinate of the ellipse
float: y-coordinate of the ellipse
float: width of the ellipse by default
float: height of the ellipse by default

a
b
c
d

line()

Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height.

line(x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2)

float: x-coordinate of the first point
float: y-coordinate of the first point
float: x-coordinate of the second point
float: y-coordinate of the second point
float: z-coordinate of the first point
float: z-coordinate of the second point

x1
y1
z1
x2
y2
z2

Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function.

Step 03 - super helpful stuff

color c1 = color(245,12,112);

void setup() {
size(1280, 500);
background(112,112,112);
}

void draw() {
elipse(250,250, 250, 250);
fill(color(245,12,112));
}

size(500,500);

This line of code creates a window that shows the visuals.

The width is defined by the first value in the brackets (x)
The height is defined by the second value. (y)

BACKGROUND

background(255, 204, 0);


in case you want to use an image: 

PImage img;
img = loadImage("laDefense.jpg");
background(img);

triangle()

triangle(x1, y1, x2, y2, x3, y3)


float: x-coordinate of the first point
float: y-coordinate of the first point
float: x-coordinate of the second point
float: y-coordinate of the second point
float: x-coordinate of the third point
float: y-coordinate of the third point

x1
y1
x2
y2
x3
y3

A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point.

Step 07 - functions

void setup() {
size(480, 120);
}

void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}

color c = color(0);
float x = 0;
float y = 100;
float speed = 1;

void setup() {
size(200,200);
}

void draw() {
background(255);
move();
display();
}

void move() {
x = x + speed;
if (x > width) {
x = 0;
}
}

void display() {
fill(c);
rect(x,y,30,10);
}

FIRST INTERACTION

FIRST "GENERATIVE" FUNCTION

I wrote a class to define how the shape of the rectangular should look like. The class is called within the setup() function and added to an array called "squares".

in the update() function i am using a noise for the x und y position of each rectangle

noise is a random sequence generator producing a more natural, harmonic succession of numbers than that of the standard random() function.

portName is the serial connection port name of my macbook. it has to be set so that processing knows where the input data is coming from.

this printing lines print the different values of my input signal

i had to convert my incoming signal from the input device from an INT to a FLOAT. Because i wanted to remap the values the range 0 - 255 to 0.11 - 1

zen = not confusing /complicated

chaos = super confusing / complicated

this visualization is changing it's shape from a really controlled clear circle to a complete chaos.
it is representing your state of mind.

This week the focus was on Processing.
Shirley approached me last week and asked me if I could prepare a little workshop or introduction to processing.
It's been a long time since I've worked with processing myself, but I really wanted to give an introduction.

Due to my experiences from the Arduino week, I kept the workshop rather very low key. To give a basic understanding of processing and some built-in functions. In order to explain some basics of programming based on it.

Follow the super pink rectangles to start the introduction:

This week I learned how to use a Node MCU as input device for processing.I didn't had much contact with electronics so far - so I had a lot of new things to learn.

and i am using a lerp function to give every rectangle a rotation

PART 1: With the skills attained in Electronics week, use an analog or digital sensor to capture any subjective data (e.g. responses to a question, the distance of peoples preferred personal space, stress levels, ...) and visualize this data in a meaningful way using Processing.

This is an individual assignment that is meant to get each of you comfortable with the very basics of visual programming. Some of you may have some experience in (Arduino or Javascript) coding; we challenge you to try and take your visualization a step further - e.g. calculate the average of the data captured, use arrays etc.

ASSIGNMENT

After I finished the introduction to processing on Monday. I got the feeling that programming in general causes a lot of confusion or ambiguity in many people.
So I have two questions for the subjective perception of our course.

The first question is: "How confused were you after Monday?
The second question is: "How confused were you at the end of the week?

I was looking for a visualization with which I could map both states.
So I used the rotary potentiometer as an input device to vary between two extremes.

I would like to take Screenshots of every given answer and compare them, to see if any progress has happened.

This week was especially fun for me as I was able to help many people solve their problems.
When I think of my workshop, I would definitely make it a lot more active next time. And not just sit there and click through different slides.

Loes fortunately supported me in the second part of the presentation on Tuesday. And took over this active part. Thanks again for that!

I believe that this combination of explaining live on the whiteboard in a simplified way and then writing the code directly together has provided an A-HA experience for many.

SOME RESULTS FROM THE CLASS

BEGINNING OF 
THE WEEK

END OF 
THE WEEK