Overview

Generative (or Algorithmic) art is art or design produced by an artist or designer or anyone who chooses to create and explore imagery by writing computer programs by oneself or with the aid of a programmer.

“Processing integrates a programming language, development environment and a teaching methodology into a unified system. It was created to teach fundamentals of computer programming within a visual context. Students, artists, design professionals and researchers use it for learning, prototyping and production.” (Processing: A Programming Handbook for Visual Designers, Second Edition, Casey Reas and Ben Fry.) It is built on a simplified version of Java.

Objectives

Learn enough Processing coding to enable execution of the final project for the ART303 course.
Develop a basic understanding and facility for solving visual problems algorithmically.
Explore aesthetic ideas and visual structures through algorithmic processing of graphic data with computers.
Gain an understanding of basic computer programming through hands-on exploration and creation of images.
The focus of these exercises is not on training skilled programmers. Only minimal programming skills are expected. However anyone with previous programming experience is encouraged to explore each exercise as far as he/she is able.

Helpful Resources

Skills Covered in this Exercise

Essential Coding Structure (please see list below)

what is a program?
statement
comments
library (as used in programs)
variable
declaration (as it applies to typing a variable before it can be used)
function
x,y coordinates
hexadecimal notation
loops

Graphic Imaging

Clearing screen using background command
HSB color mode

Intermediate Coding

global variable

Intermediate Imaging & Sound

Translation, rotation and scaling of rectangles and ellipses
Animation: Moving graphic objects on the screen for still and moving imagery
Using frameCount for controlling scene sequencing
Playing and stopping sound at specific frames

Coding for Interactivity

conditional expressions
incrementing a variable
nested loops vs sequential loops
Debugging, using the println command
onscreen text
Synchronous and asynchronous sound
Interactivity — reacting to a mouse position
Mouse movement and mouse dragging
Key press
Buttons with and without text

Hour of Code

Before completing the below exercises, work through the online Processing Hour of Code, either on your own or in class with your instructor.
http://hello.processing.org/

Shapes
Color
Interact (mouse position)
Questions (Conditionals)

Instructions | Drawing, Translating Objects, and Audio Integration

Download the ex04-audio files.
You’ll need to install the minim library into your Processing environment. Create a File>New sketch. Then choose: Tools>Add Tool>Libraries>Minim>Install. You only have to do this once.
Background: Minim is an audio library that allows for integration of sound files within a sketch:Mono and Stereo playback of WAV, AIFF, AU, SND, and MP3 files
Mono and Stereo audio recording
Mono and Stereo input monitoring
Mono and Stereo sound synthesis
BeatDetect: a class for doing beat detection
Ugens: real-time audio synthesizers and effects
Save your sketch to a folder on your desktop, naming it [your last name]-ex4. Be sure to use only lower case letters and no spaces. Note that Processing places the .pde file into a new folder with the same name as your sketch.
Drag the four sound files from the downloaded archive to your new sketch folder: GER_MUE_M.aif; GER_MUE_N.aif; GER_MUE_Y.aif; knock_walk_dooropen.aiff

Copy the below code into the new sketch:

// import of the minim library and declaring special AudioPlayer variables 
import ddf.minim.*; 
Minim minim; 
AudioPlayer player1; 
AudioPlayer player2; 
AudioPlayer player3; 
AudioInput input;

// Statements in setup are only executed once 
void setup() { 
size(640, 480); 

// the variable "minim" is called each time a new sound is imported into the sketch 
minim = new Minim(this); 
player1 = minim.loadFile("knock_walk_dooropen.aiff"); 
minim = new Minim(this); 
player2 = minim.loadFile("GER_MUE_Y.aif"); 
minim = new Minim(this); 
player3 = minim.loadFile("GER_MUE_M.aif"); 

// the sounds do not play until activated 
player1.loop(); 
}

// Statements in draw are executed repeatedly (looped) 
void draw() { 
background(0,0,0); 
}

Type command-t to auto-format your code. Examine and identify the parts of the sketch. Run the sketch and note what happens.
Change the color of the background. (Use colorpicker.com to help determine the (R, G, B) value of a color of your choosing.)
Place the below code just above the setup block, below the minim variables. This declares a variable, x, of type integer which will be used for timing and the position and size of items in the draw loop. (An integer is a non-decimal number.)
```
int x;
```

Place the below code within the draw block, below the background color function (before the closing } brace:

// Sets the value of the variable x
x = x + 1;
// A conditional that if true resets the value of x to 0
if (x > 640)
{x = 0;}
ellipse(x, 50, x+10, 60);
fill(150,150,50);

Type command-t. Examine and identify the new code. Try changing the arguments within the ellipse function. You may change the color of the ellipse if you wish. Try adding additional shapes (lines, rectangles), etc.
Declare two new variables, y and z which will also be used for timing and the position and size of items in the draw loop. Place these below the x variable declaration above the setup block.
```
int y;
int z;
```

Paste the below code beneath the background function in the draw loop, before the closing brace }.

z = z + 1;
if (z > 120)
{     z = 0;   }

fill(z*2, z*2, z*2);
ellipse(640-x, 150, x+10, 60);

println("z = ", z);
/* The println function shows the results of an expression in the console area. It is useful to keep track of numbers as events play out on screen, or to assist in debugging a sketch.*/

Remove the background function from the draw loop and place it in setup, before the closing brace }.
```
background(0,0,0);
```

Place this code within the z conditional statement, before the closing brace }.

// When the condition for z is true, player2 plays its sound, starting 100ms into the file
player2.rewind();
player2.play(100);
// A trail is left for every 120 frames, and then the background is redrawn
background(0,0,0);

Paste this code above the println function to introduce two additional ellipses. Note the timing of all events.
```
fill(y*1, y*2, y*3);
ellipse(640-x, 250, x+10, 60);
fill(120,20,40);
ellipse(x, 350, x+10, 60);
```
Note that the value for variable y has not yet been declared. Copy the value and conditional statement for x and change the relevant code for y. Set the condition to > 120 to match the z conditional.
Save your pde project and upload according to your instructors directions. For your reference, download and review the completed sketch.

Motion

animation: a sequence of images that when played in succession at a high enough speed (frame rate) can create an illusion of motion.
frame rate: The speed at which images are played back, measured in frames per second (fps). Conventional movie film is played back at 24fps, digital video at 30fps.
frame (or canvas) size: The resolution of a video, measured in pixel dimensions of a frame—its width by its height expressed in number of pixels.
standard definition video (SD): NTSC frame size = 720 × 480 pixels
high definition digital video (HDV): frame sizes = 1280 × 720 pixels or 1440 × 1080 pixels. The format of 1440 × 1080 pixels is displayed at the resolution of 1920 × 1080 pixels.
frame aspect ratio: The ratio of a frame’s width-to-height dimensions. SD frame aspect ratio for standard format is 4:3, and for widescreen format is 16:9. The frame aspect ratio for HDV is 16:9.; Interaction Design
multimodality
A theory of communication and social semiotics. Multimodality describes communication practices in terms of the textual, aural, linguistic, spatial, and visual resources – or modes – used to compose messages.

multimedia
A term used in art or education that uses more than one medium of expression or communication.
interactive multimedia
Any computer-delivered electronic system that allows the user to control, combine, and manipulate different types of media, such as text, sound, video, computer graphics, and animation.
page-based
arranged in discreet moments
time-based
arranged in time
Linearity vs Non-Linearity
Interface Design
User interface design (UI) is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.

Generative Art

Generative Art
Art that has been created with the use of an autonomous system. This is generally one that is non-human and can independently determine features of an artwork that would otherwise require decisions made directly by the artist.

Processing: A programming language the joins software concepts to principles of visual form, motion and interaction, created to teach fundamentals of computer programming within a visual context.
Object Oriented Programming: A programming language model organized around objects rather than actions and data rather than logic. Object-oriented programming takes the view that what we really care about are the objects we want to manipulate rather than the logic required to manipulate them. (techtarget.com)
algorithm: A series of instructions that performers a mathematical or logical task, usually to solve a problem like sorting a list or searching for text.
canvas: a coordinate system defining the drawing area on a screen
setup: The statements in the setup() function execute once when the program begins.
draw: The statements in the draw() function are executed until the program is stopped. Each statement is executed in sequence and after the last line is read, the first line is executed again.
function: a command that tells Processing to perform an operation or return a value. Sometimes called methods. Functions can take variables as input when you call them. These are called the parameters of the function call. The parameters of a function go in the parentheses after its name.
parameters: Data input to a function that affects the output. Each function has a specific number and type of parameters.
argument: The values with the parameters of a function.
statement: A complete instruction to the computer, ending with a semicolon. Statements can define a variable, assign a variable, run a function or construct an object.
comment: Descriptive text within a program that are meant to help human programmers understand the code. Ignored by the computer.
variable: A data element (or container for data) that is reference with a name. Every variable has a value, data type, and scope.
variable data types: The categories of data the can be stored in a variable
char used for storing alphanumeric symbols
float for decimal numbers
int Integers — values between 2,147,483,647 and -2147483648
byte values between -128 and 128
scope: The region of a program where a variable can be accessed – within the block where it is defined and in all blacks defined within its block.
code block: A group of code defined by a set of matching braces { and }. Blocks are used to group code into classes, functions, if structures and for loops.
loop: Normally, blocks with drawrepeat indefinitely at a rate defined by frameRate(), (the default frame rate is 60 frames per second). noLoop can stop draw from looping. loopand redraw can restart the loop.
translate: A function that allows objects to be moved to any location within the window. The first parameter sets the x-axis offset and the second parameter sets the y-axis offset.
rotate: A function that rotates the amount specified by the angle parameter.; scale A function that increases or decreases the size of a shape by expanding and contracting vertices. A single argument affects x and y equally. Two arguments affect x and y separately.
expression: A combination of operators, variables and literals, such as 6/2 (which evaluates to 3) and 5>4 (which evaluates to true).
Conditional (if/then/else) statement: A fundamental building block of programming. Causes a program to execute a different path based on the results of a question: IF some condition is true, THEN perform a specified function, otherwise (else) if it is false, THEN perform a different specific function.

Practice

media: Communication intended to inform or entertain.
multimedia: Contains combinations of text, audio, images, or video.
digital multimedia: Media that has become data and can be manipulated.
interactive multimedia: Data that can be manipulated based on user input.
page-based media: Information arranged in discreet moments.
time-based media: Experience and meaning unfold over time.
linearity: A fixed order of information that unfolds over time without navigational control by the user.
non-linearity: Structure that allows for arbitrary ordering of info by the user.
interface: Software or hardware based controls which allow a user to interact with data.
form vs. content: The idea of the relationship between data (content) and the structure (form) that allows us to interact with the data.
form: The way a work of art looks—how the content is presented and how it embodies an idea. Includes the physical materials to the use of the basic elements of art, such as lines, shapes, values and colors, and composition—how these different elements are put together to make the whole piece of art work into a unified whole.
diegetic: The world that is seen on-screen where the story’s events occur and the characters exist. Includes sounds of footsteps, a door closing, or a gun shooting created by the characters.
non-diegetic: Elements that are addressed to the viewer only and are not accessible to any of the characters. Includes background music and narration.
on-screen space: The visible space within the frame.
off-screen space: Space outside the frame. Can be acknowledged by using off-screen sound or implied through dialogue between characters.
Figure–Ground Phenomenon: Tendency to identify foreground as having brighter color, clear enclosure, larger distinct shapes, and more active movement.
Repetition: Multiple appearances of an element within the work
Rhythm: How multiple appearances of an element are repeated over time.
Variety: Rather than repeating the exact duplicate of an element, variation prompts the viewer to recognize the similarities by comparing and contrasting related elements.
Unity and Harmony: Each element or action included in a video has to have a purpose. Irrelevant actions and unrelated events may even contradict with other actions and events causing distraction to the viewer.
Balance: The idea of distributing the weight of elements in the temporal dimension.
Emphasis and Focus: Within a shot, emphasis can be changed by shifting the camera focal distance to direct the viewer’s attention from one subject to another in a frame. Temporally, repetition of an element can be used to create emphasis.
Perspective: Different types of camera shots give the viewer different perspectives and levels of details about the subject.

Search This Blog

art303–Intro to Digital Art

GENERATIVE ART WITH PROCESSING!

EXERCISE 04: GENERATIVE ART WITH PROCESSING