For the workshop our goal is to produce three final products. 1. High Resolution 11 x 17″ print 2. HD Video animation (1920 x 1080 px) or (1024 x 768 px) 3. Laser cut Lamp (size to be determined) Read more – ‘Final Assignments’.
// 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’.
To illustrate the difference between a class and an instance let’s take a look at applying the concept to dogs. Class A class is a definition for a collection of objects. For example, if we define a class for Dogs it would include all the characteristics common to all dogs. The class is a template: […] Read more – ‘Classes & Instances of Dogs’.
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’.
In order to create Generative Art through the medium of code, we first need several new tools. You will need to learn the basics of object-oriented programming (OOP). If you’re a seasoned programmer, you’re probably already familiar with this concept — very few languages above a certain power and sophistication don’t accommodate object-oriented structures. OOP […] Read more – ‘Object-Oriented Programming’.
The term originated in a paper by Philip Galanter, artist and professor at Texas A&M University, he wrote “Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some […] Read more – ‘Generative Art’.
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’.
The ‘While’ structure is similar to an if statement, but there is an important difference. With an if statement, the code inside the curly braces will run 0 or 1 times (0 times if the condition is false, 1 time if the condition is true). But with the while loop code can run many times, […] Read more – ‘The While Loop’.
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’.
The color() function is used to create a variable of the type color. This is handy if you need to create colors you can use anywhere in your sketch. In this example, I’ve declared a color variable named c, before the setup() function. The fill() function is used to set the fill color of the […] Read more – ‘Review 1’.
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’.
Processing is a popular, very-high-level programming language that began at MIT in 2001. Originally developed by MIT Media Lab alums Casey Reas and Benjamin Fry—both artists and technology thinkers, Processing was intended to be a learning language, a tool to get non-programmers, particularly artists, hooked on code via the promise and delivery of immediate visual […] Read more – ‘Introduction to Processing’.
