# Lessons

Bonus: Waves
int i, w=1024, h=768, x, y, s=10; float k, m, r, j=.01; void setup() { size(w, h, P3D); noStroke(); } void draw() { background(#A4D6E8); lights(); beginShape(8); for (i=0; i < w*h; i+=s) { x=i%w; y=i/w; k=y+s; m=x+s; fill(100, 100, random(220,255), 200); vertex(x, n(y*w+x), y); vertex(m, n(y*w+m), y); vertex(m, n(k*w+m), k); vertex(m, n(k*w+m), k); vertex(x, n(k*w+x), […] Read more – ‘Bonus: Waves’.
Creating a Lamp with Processing
We will use an existing Processing library to create the pieces for the laser-cut lamp. Let’s follow the instructions here. Codeable Objects LibraryCodeable Objects is a library for Processing that allows anyone to design and construct an artifact using geometric computation and digital fabrication. This tutorial will show you how to use the library to […] Read more – ‘Creating a Lamp with Processing’.
Bonus: Circular Galaxy
int num = 40, circles=80, frames=60; float theta; void setup() { size(540, 540); } void draw() { randomSeed(3453); background(0); noStroke(); float angle = 0; for (int j=0; j < circles; j++) { fill(255, 25); float r = random(TWO_PI); beginShape(TRIANGLE_STRIP); float r2 = random(30, 50); for (int i=0; i < num; i++) { angle=TWO_PI/num*i+r; float offSet=TWO_PI/num*i; […] Read more – ‘Bonus: Circular Galaxy’.
Bonus: Glitch 2
PImage img; int min = 40, max = 80; int r = 10; void setup() { img = loadImage("https://s-media-cache-ak0.pinimg.com/736x/2c/f6/a5/2cf6a58f75b368949cf98db03b925f1b.jpg"); size(img.width, img.height); image(img, 0, 0); } void draw() { doStuff(); } void keyPressed() { save(random(123456)+".jpg"); } void doStuff() { PImage tmp = createImage(width, height, RGB); tmp.loadPixels(); float rd = random(25, 100); for (int px=0; px < […] Read more – ‘Bonus: Glitch 2’.
Bonus: Mouse Follower
// P_2_2_3_02.pde // // Generative Gestaltung, ISBN: 978-3-87439-759-9 // First Edition, Hermann Schmidt, Mainz, 2009 // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // // http://www.generative-gestaltung.de /** * form mophing process by connected random agents * two forms: circle and line * * […] Read more – ‘Bonus: Mouse Follower’.
Exercise 55
int _numChildren = 4; int _maxLevels = 4; Branch _trunk; void setup() { size(750,500); background(255); noFill(); smooth(); newTree(); } void newTree() { _trunk = new Branch(1, 0, width/2, height/2); _trunk.drawMe(); } void draw() { background(255); _trunk.updateMe(width/2, height/2); _trunk.drawMe(); } class Branch { float level, index; float x, y; float endx, endy; float strokeW, alph; float […] Read more – ‘Exercise 55’.
Exercise 54
// P_2_1_3_02.pde // // Generative Gestaltung, ISBN: 978-3-87439-759-9 // First Edition, Hermann Schmidt, Mainz, 2009 // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // // http://www.generative-gestaltung.de /** * draw a module made of lines in a grid * * MOUSE * position x […] Read more – ‘Exercise 54’.
Exercise 53
// P_2_1_3_04.pde // // Generative Gestaltung, ISBN: 978-3-87439-759-9 // First Edition, Hermann Schmidt, Mainz, 2009 // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // // http://www.generative-gestaltung.de /** * changing positions of stapled circles in a grid * * MOUSE * position x : […] Read more – ‘Exercise 53’.
Exercise 52
// P_2_1_2_02.pde // // Generative Gestaltung, ISBN: 978-3-87439-759-9 // First Edition, Hermann Schmidt, Mainz, 2009 // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // // http://www.generative-gestaltung.de /** * changing module color and positions in a grid * * MOUSE * position x : […] Read more – ‘Exercise 52’.
Exercise 51
// P_2_1_3_01.pde // // Generative Gestaltung, ISBN: 978-3-87439-759-9 // First Edition, Hermann Schmidt, Mainz, 2009 // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni // // http://www.generative-gestaltung.de /** * changing circle amount, size and position in a grid * * MOUSE * position x […] Read more – ‘Exercise 51’.
Exercise 50
/*-------- Circle Pattern ----------------*/ int margin; int res = 4; int padding; color c [] = { #75a665, #5c801a, #5a7e18, #735742, #afb837, #564311, #32320e }; void setup () { size (700, 700); smooth(); frameRate (10); margin = width/10; padding = width /30; } void draw () { background (237); randomSeed (year() + day() + hour() […] Read more – ‘Exercise 50’.
Bonus: Glitch
PImage img; int min = 40, max = 80; int r = 10; void setup() { img = loadImage("https://s-media-cache-ak0.pinimg.com/736x/2c/f6/a5/2cf6a58f75b368949cf98db03b925f1b.jpg"); size(img.width, img.height); image(img,0,0); } void draw() { int w = (int)random(min, max); int h = int(w*3); int x = (int)random(0, width-w); int y = (int)random(0, height-h); PImage tmp = createImage(w, h, RGB); tmp.loadPixels(); float rd = […] Read more – ‘Bonus: Glitch’.
Exercise 45
using rotation and sine cosine functions to draw patterns. float k = 2/7.0; int scaleIt = 400; void setup() { size(800, 800); background(20); colorMode(HSB); strokeWeight(0.01); smooth(); } void draw() { translate(width/2, height/2); //scale(width/2, height/2); float t = frameCount / 20.0; float x = cos(k*t) * sin(t) * scaleIt; float y = cos(k*t) * cos(t) * […] Read more – ‘Exercise 45’.
Exercise 43
int num=50, d=100, frames=120; float theta; void setup() { size(540, 540, P2D); blendMode(SCREEN); stroke(255); noStroke(); fill(255); //noFill(); } void draw() { background(0); for (int j=0; j < 3; j++) { if (j==0) fill(255, 0, 0); if (j==1) fill(0, 255, 0); if (j==2) fill(0, 0, 255); for (int i=0; i < num; i++) { float angle […] Read more – ‘Exercise 43’.
Exercise 42
int frames = 235, num=30; float theta; void setup() { size(750, 750); rectMode(CENTER); } void draw() { background(20); noFill(); translate(width/2, height/2); for (int i=0; i < num; i++) { pushMatrix(); float offSet=TWO_PI/num*i; rotate(offSet); float sz = map(sin(theta), -1, 1, width*.15, width*.2); float x = map(sin(theta), -1, 1, sz, width*.2); translate(x, 0); pushMatrix(); rotate(theta); stroke(200); if […] Read more – ‘Exercise 42’.
Exercise 41
int frames = 220, num=30; float theta; void setup() { size(750, 750); } void draw() { background(20); stroke(#9EC3CE, 255); strokeWeight(2); noFill(); translate(width/2, height/2); for (int i=0; i < num; i++) { pushMatrix(); float offSet=TWO_PI/num*i; rotate(offSet); float sz = map(sin(theta),-1,1,width*.15,width*.2); float x = map(sin(theta), -1, 1, sz, width*.2); translate(x, 0); pushMatrix(); rotate(theta); if (i%2==0) { ellipse(0, […] Read more – ‘Exercise 41’.
Exercise 40
Outputting an animation as video takes two steps saving frames of the animation as separate image files compiling the sequence of images into a movie using MovieMaker tool int frames = 200, num=20; float theta; void setup() { size(750, 750); } void draw() { background(20); fill(255, 30); stroke(255, 50); translate(width/2, height/2); for (int i=0; i […] Read more – ‘Exercise 40’.
Exercise 39
// global vars int _num = 10; float _angnoise, _radiusnoise; float _xnoise, _ynoise; float _angle = -PI/2; float _radius = 100; float _strokeCol = 254; int _strokeChange = -1; void setup() { size(500, 300); smooth(); frameRate(30); clearBackground(); _angnoise = random(10); _radiusnoise = random(10); _xnoise = random(10); _ynoise = random(10); } void clearBackground() { background(255); } […] Read more – ‘Exercise 39’.
Exercise 38
now we randomize the radius using the noise() function size(500,300); background(255); strokeWeight(0.5); smooth(); int centX = 250; int centY = 150; float x, y; for (int i = 0; i<100; i++) { float lastx = -999; float lasty = -999; float radiusNoise = random(10); float radius = 10; stroke(random(20), random(50), random(70), 80); int startangle = […] Read more – ‘Exercise 38’.
Exercise 37
size(500,300); background(255); strokeWeight(5); smooth(); float radius = 100; int centX = 250; int centY = 150; stroke(0, 30); noFill(); ellipse(centX,centY,radius*2,radius*2); stroke(20, 50, 70); radius = 10; float x, y; float lastx = -999; float lasty = -999; for (float ang = 0; ang -999) { line(x,y,lastx,lasty); } lastx = x; lasty = y; } Read more – ‘Exercise 37’.
Exercise 36
Now let’s apply the same approach to a circle: size(500, 300); background(255); strokeWeight(5); smooth(); float radius = 100; int centX = 250; int centY = 150; stroke(0, 30); noFill(); ellipse(centX, centY, radius*2, radius*2); stroke(20, 50, 70); float x, y; float lastx = -999; float lasty = -999; for (float ang = 0; ang <= 360; […] Read more – ‘Exercise 36’.
Exercise 35
Now let’s add noise instead of randomizing. the new point will have some reference to the point before it. size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20, 50, 480, 50); stroke(20, 50, 70); int step = 10; float lastx = -999; float lasty = -999; float ynoise = random(10); float y; for (int x=20; x […] Read more – ‘Exercise 35’.
Exercise 34
size(500,100); background(255); strokeWeight(5); smooth(); int step = 10; float lastX = -999; float lastY = -999; float y = 50; int borderX = 20; int borderY = 20; for( int x = borderX; x -999) { line(x, y, lastX, lastY); } lastX = x; lastY = y; } Read more – ‘Exercise 34’.
Exercise 33
Now let’s animate the circles to move independently. int _num = 10; Circle[] _circleArr = { }; void setup() { size(800, 800); background(255); smooth(); strokeWeight(1); fill(150, 50); drawCircles(); } void draw() { background(255); for (int i=0; i<_circleArr.length; i++) { Circle thisCirc = _circleArr[i]; thisCirc.updateMe(); } } void mouseReleased() { drawCircles(); } void drawCircles() { for […] Read more – ‘Exercise 33’.
Exercise 32
Instead of just telling Processing to draw a circle, let’s instead create a circle object. The circle object will encapsulate everything there is to know about itself, which at the moment isn’t much more than the x,y of its center point, and its radius. class Circle { float x, y; float radius; color linecol, fillcol; […] Read more – ‘Exercise 32’.
Exercise 31
Let’s start simple. The following listing creates a script that draws a handful of randomly placed circles every time the mouse is clicked. int _num = 10; void setup() { size(500, 300); background(255); smooth(); strokeWeight(1); fill(150, 50); drawCircles(); } void draw() { } void mouseReleased() { drawCircles(); } void drawCircles() { for (int i=0; i<_num; […] Read more – ‘Exercise 31’.
Exercise 30
Let’s replace our while loop with a For Loop to see how it works int ellipseSize = 40; void setup() { size(800, 800); smooth(); } void draw() { noFill(); strokeWeight(.5); stroke(255); for (int i=0; i <100; i ++) { for (int j=0; j <100; j ++) { ellipse(i * (ellipseSize/2), j * (ellipseSize/2), ellipseSize, ellipseSize); […] Read more – ‘Exercise 30’.
Exercise 29
now let’s improve our grid sketch by overlapping the circles and giving them a random transparency size(400, 400); noStroke(); background(255); float x = 0; while (x < width) { float y = 0; while (y 98) { fill(255, 0, 0, random(50)); } else { // but usually pick a random gray color fill(random(100, 200), random(50)); […] Read more – ‘Exercise 29’.
Exercise 28
Now let’s change our rectangle to a circle and adjust the spacing size(400, 400); noStroke(); background(255); float x = 0; while (x < width) { float y = 0; while (y 98) { fill(255, 0, 0); } else { // but usually pick a random gray color fill(random(100, 200)); } ellipse(x+20, y+20, 40, 40); y […] Read more – ‘Exercise 28’.
Exercise 27
Adding a small probability of a red square to our grid size(400, 400); noStroke(); background(255); float x = 0; while (x < width) { float y = 0; while (y 98) { fill(255, 0, 0); } else { // but usually pick a random gray color fill(random(100, 200)); } rect(x, y, 38, 38); y = […] Read more – ‘Exercise 27’.
Exercise 25
now let’s nest a while loop inside another while loop to give us a grid size(400, 400); noStroke(); background(50); float x = 0; while (x < width) { float y = 0; while (y < height) { rect(x, y, 30, 30); y = y + 40; } x = x + 50; } Read more – ‘Exercise 25’.
Exercise 24
Now let’s rotate but change the center point of our rotation. We do that using the translate() function. float r = 0; void setup() { size(400,400); background(10); smooth(); noStroke(); } void draw() { translate(width/2, height/2); fill(255); rotate(r); float circle_size = random(5, 15); ellipse(100 + r, 10, circle_size, circle_size); r = r + 0.2; println(r); } Read more – ‘Exercise 24’.
Exercise 23
Continuing our experiments with rotation Think of the rotate() function like sticking a pin into the top left (0,0) corner of our piece of paper (our canvas) and turning the paper around the pin axis. float r = 0; void setup() { size(400,400); background(10); smooth(); noStroke(); } void draw() { fill(255); rotate(r); float circle_size = […] Read more – ‘Exercise 23’.
Exercise 22
Rotating Objects size(400,300); background(#6AA21E); noStroke(); smooth(); float c = 0; while(c < 100) { fill(random(255)); rect(200,10,50, 5); fill(255, 0, 0); rect(260,10,10, 5); rotate(0.02); c = c + 1; } Read more – ‘Exercise 22’.
Exercise 21
drawing circles with a While loop try changing the increment that i is increased by. size(400, 400); colorMode(HSB); // choose a random background color using Hue, Saturation and Brightness background(random(255), random(50, 100), random(50, 100)); noFill(); stroke(255, 100); float i = 0; while (i < 100) { ellipse(100 + i*2, 100 + i*2, 100+i, 100-i*2); // […] Read more – ‘Exercise 21’.
Exercise 20
Making a starry night void setup() { size(600,400); background(0); noStroke(); } void draw() { //background(0); fill(0, 10); rect(0, 0, width, height); fill(255); ellipse(random(width), random(height), 2, 2); } Read more – ‘Exercise 20’.
Exercise 19
Improving our drawing app void draw() { if (mousePressed == true) { point(mouseX,mouseY); } } void keyPressed() { if (key == 's') { save("my_drawing.png"); } if (key == 'b') { background(random(255), random(255), random(255)); draw_top_line(); } if (key == 'c') { stroke(random(255), random(255), random(255)); draw_top_line(); } } void draw_top_line() { strokeWeight(7); line(0,0, width, 0); strokeWeight(2); } Read more – ‘Exercise 19’.
Exercise 18
Our very own drawing application void draw() { if (mousePressed == true) { point(mouseX,mouseY); } } void keyPressed() { save("my_drawing.png"); } Read more – ‘Exercise 18’.
Exercise 17
Improving on our bar code generator float x = 0; void setup() { size(400, 400); background(255); stroke(255); } void change_line_color() { stroke(255, 0, 0); line(x, 100, x, 200); // now we decide if to use black or white if (random(100) > 50) { stroke(0); } else { stroke(255); } } void draw() { // draw […] Read more – ‘Exercise 17’.
Exercise 16
Random Bar Code Generator float x = 0; void setup() { size(400, 400); background(255); stroke(255); } void draw() { line(x, 200, x, 100); x = x + 1; if (x > width) { x = 0; } // sometimes we decide to change the line color if (random(100) > 70) { // now we decide […] Read more – ‘Exercise 16’.
Exercise 15
Rainbows in a different colour mode void setup() { size(300, 300); background(#04B1CE); noFill(); colorMode(HSB); } void draw() { strokeWeight(random(3, 10)); stroke(random(255), 255, 255); // HSB Hue Saturation Brightness float rainbow_size = random(200, 270); ellipse(150, 350, rainbow_size, rainbow_size); } Read more – ‘Exercise 15’.
Exercise 14
Making Rainbows void setup() { size(300, 300); background(#04B1CE); noFill(); } void draw() { strokeWeight(random(3, 10)); stroke(random(255), random(255), random(255)); float rainbow_size = random(200, 270); ellipse(150, 350, rainbow_size, rainbow_size); } Read more – ‘Exercise 14’.
Exercise 13
Making Rainbows // initial position for our circle float circle_x = 300; float circle_y = 20; // how much to move the circle on each frame float move_x = 2; float move_y = -2; void setup() { size(400, 200); stroke(#D60DFF); strokeWeight(7); } void draw() { background(#21EA73); ellipse(circle_x, circle_y, 40, 40); circle_x = circle_x + move_x; […] Read more – ‘Exercise 13’.
Exercise 12
moving our ball around float circle_x = 300; float circle_y = 20; void setup() { size(400, 200); stroke(#D60DFF); strokeWeight(7); } void draw() { background(#21EA73); ellipse(circle_x, circle_y, 40, 40); circle_x = circle_x - 2; circle_y = circle_y + 2; } Read more – ‘Exercise 12’.
Exercise 11
using random in a different way… float slow_circle_x = 0; float fast_circle_x = 0; void setup() { size(400,400); noStroke(); } void draw() { background(#1BB1F5); float slow_circle_size = 50; // what do you think this next line does? if(random(10) > 9) { slow_circle_size = 60; } fill(#C1FF3E); ellipse(slow_circle_x,50, slow_circle_size, slow_circle_size); slow_circle_x = slow_circle_x + 1; fill(#FF4800); […] Read more – ‘Exercise 11’.
Exercise 10
// An introduction to a conditional float slow_circle_x = 0; float fast_circle_x = 0; void setup() { size(400,400); noStroke(); } void draw() { background(#1BB1F5); fill(#C1FF3E); ellipse(slow_circle_x,50, 50, 50); slow_circle_x = slow_circle_x + 1; fill(#FF4800); ellipse(fast_circle_x,50, 50, 50); fast_circle_x = fast_circle_x + 5; if(slow_circle_x > 400) { slow_circle_x = 0; } if(fast_circle_x > 400) { fast_circle_x […] Read more – ‘Exercise 10’.
Exercise 09
// Animation Basics float circle_x = 0; void setup() { size(400,400); noStroke(); fill(#C1FF3E); } void draw() { background(#1BB1F5); ellipse(circle_x,50, 50, 50); circle_x = circle_x + 1; } Read more – ‘Exercise 09’.
Exercise 08
// white lines on black background // the lines begin on the top border and end on the bottom border // the lines must be vertical. void draw() { background(0); stroke(255); float distance_left = random(100); line(distance_left,0, distance_left,99); } Read more – ‘Exercise 08’.
Assignment 1
Instructions Create a new sketch file using Processing software Determine the size that you wish for the display window Create an intersting, original image for your own design using line(); and other associated codes Save the code and capture a picture of the output Read more – ‘Assignment 1’.
Bonus Challenge 1
try to replicate this painting. Read more – ‘Bonus Challenge 1’.
Exercise 06
// the lines begin on the left border and end on the right border // let's make the lines be horizontal this time Read more – ‘Exercise 06’.
Exercise 05
// animation // white lines on black background // the lines begin on the left border and end on the right border void draw() { background(0,10); stroke(255); line(0,random(100), 99,random(100)); } Read more – ‘Exercise 05’.
Coordinate System Quiz
For the first sketch: “A black outlined square with a red horizontal line from the midpoint of the left side toward the middle of the right side.” For the second sketch: “A black outlined square with a red diagonal line from the lower left corner toward the upper right corner; and another red line from […] Read more – ‘Coordinate System Quiz’.
Exercise 04
void setup() { background(0); // this makes the background black } void draw() { stroke(0, random(255), 0); // R, G, B // the screen is 100 pixels wide and 100 pixels tall // lines start at the middle of the screen (50, 50) line(50, 50, random(100), random(100) ); } Read more – ‘Exercise 04’.
Exercise 03
that wasn’t hard, try this; // use the menu File > Save to save your program // use the menu File > Load to load an existing program // setup() is called once at the start of the program void setup() { // framerate() tells processing how many times per second // it should execute […] Read more – ‘Exercise 03’.
Exercise 02
that wasn’t hard, try this; // the draw() function is called many times per second // it's very useful for animating objects // notice the opening and closing of curly braces // everything in between them is run many times per second void draw() { // background() erases the screen with a colour background(255, 204, […] Read more – ‘Exercise 02’.
Exercise 01
Let’s start with something simple… // lines that begin with two slashes are comments for yourself // point() draws a pixel on the display point(50,50); point(51,50); point(52,50); point(53,50); point(54,50); point(55,50); // the first number is the X value (distance from the left border) // the second number is the Y value (distance from the top […] Read more – ‘Exercise 01’.