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’.
// 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’.
// 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’.
// 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’.
// 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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
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’.
// 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’.
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’.
// 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’.
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’.
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’.
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’.
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’.
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’.
