Work documentation is very important!!
See these examples for ways of documenting process:
Zach Lieberman: Play the World
https://devart.withgoogle.com/#/project/15870625
Taeyoon Choi: In search of Personalised Time
Also check out Open Processing for ways of posting code online – put a link in your work.
https://www.openprocessing.org/
Download them here (also on the Moodle.)
Also for an amazing use of the capture class. Take a look at the examples>>Video>>Capture>>SlitScan for an example of slitcanning. Also see Golan Levin’s collection of slit scanning examples for a collections of artworks that use and explore this technique.
A conference this weekend in Brooklyn, it’s a 3 day thing but you can just get a ticket for one day. Also there’s a free opening party on Friday night!
Description: From mass surveillance to the over-commercialization of the Internet, the technology that we depend upon for community and connection is being compromised. The recent accessibility of networking technology through devices such as the Raspberry Pi and software such as BATMAN Adv has made it affordable and possible for everyday citizens to learn how to design their own web servers and networks.
Internet Yamichi (Internet Black Market)
Here you will buy and see lots of weird art and meet lots of weird internet artists!
Part 1:
Working in pairs, write a class that for a creature that moves in some way. Perhaps it produces sound in some way (eg. every second or when it is clicked or rolled over, or when a key is pressed etc). Write your class with at least:
Add comments that make it clear what your code is doing. Check your code works.
Save a version of your program that only contains the code for your class. Name your sketch with the name of the creature you have made. Zip folder and upload to this dropbox.
Part 2:
Look in this folder and take two classes that other group’s have written and use them in a sketch. Eg. make a program that draws many of their creatures to the screen.
(Hint! On seeing how some of you wrote classes, you may need to add in popMatrix() and pushMatrix() functions in their classes to contain translations.)
See these examples for different ways of programming movement:
Random Walker
int x;
int y;
void setup(){
size(300,300);
x=width/2;
y=width/2;
}
void draw(){
int choice = int(random(4));
ellipse(x,y,20,20);
if (choice == 0) {
x++;
} else if (choice == 1) {
x--;
} else if (choice == 2) {
y++;
} else {
y--;
}
}
Trigonometric Movement
float x = 0.0; // X-coordinate
float y = 50.0; // Y-coordinate
float angle = 0.0; // Direction of motion
float speed = 0.5; // Speed of motion
void setup() {
size(100, 100);
background(0);
stroke(255, 130);
randomSeed(121); // Force the same random values
}
void draw() {
angle += random(-0.3, 0.3);
x += cos(angle) * speed; // Update x-coordinate
y += sin(angle) * speed; // Update y-coordinate
translate(x, y);
rotate(angle);
line(0, -10, 0, 10);
}
Easing
float x;
float y;
float easing = 0.05;
void setup() {
size(640, 360);
noStroke();
}
void draw() {
background(51);
float targetX = mouseX;
float dx = targetX - x;
x += dx * easing;
float targetY = mouseY;
float dy = targetY - y;
y += dy * easing;
ellipse(x, y, 66, 66);
}
Arrays of Images
1. Write code to animate a walking character with sprite images. Choose a walk cycle gif from the internet, and use a tool like this one, to break it into it’s frames.
2. Rename the images so they are 01.jpg, 02.jpg, 03.jpg etc. etc. Put these into the data folder of your sketch.
3. To start, declare and initalize an array of PImages that is the same length of the amount of images that you have broken your GIF into, your code will look something like this:
PImage[] myArray = new PImage[10]; //make your array as long as it needs to be to hold all your frames.
3. In setup, write a for loop and run through each box of your array, loading in each image to your for loop. If you image files are called. 01.gif, 02.gif, 03.gif and so on, then your for loop will look something like the code below. Look up the nf(); function. You will need it if you use more than 9 images to pad out the single digit file names with an extra 0, so 1.gif becomes 01.gif.
for(int i=0; i< myArray.length; i++){
String s=nf(i, 2);
myArray[i]= loadImage(i+".gif");
}
4. In draw, run through your array of images, drawing each image to the screen. You will need to set up a global variable (here I've called in frameNo) and increase it to flip through all the frames.
image(myArray[frameNo], 100, 100, 100,100);
5. You will need to add in a conditional statement testing the frameNo variable. This should be at the end of draw and it should assign it the value 0 when it reaches the end of your array.
6. Get your animation moving in the direction it is stepping/flapping/jumping!
7. Flip the direction the character is facing, if you’re able, when the character is moving towards the left. You are advised to do this (FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT), just before the character is rendered to the screen. We recommend you achieve this by applying a scale() of (-1,1) to the character’s image inside a push()/pop() structure. This step may be tricky, so save it for last.
float angle1 = PI/4;
float angle2 = PI/4;
void setup(){
size(200,200);
rectMode(CENTER);
}
void draw(){
pushMatrix();
translate(50,50);
rotate(angle1);
rect(0,0,30,30);
popMatrix();
angle1=angle1+PI/180;
pushMatrix();
translate(100,100);
rotate(angle2);
rect(0,0,30,30);
popMatrix();
angle2=map(second(),0,60,0,PI*2);
}
void setup() {
size(100, 100);
stroke(255);
}
void draw() {
background(0);
fill(80);
noStroke();
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
// processing things 0 radians is at the 3pm mark
ellipse(50, 50, 80, 80);
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
stroke(255);
line(50, 50, cos(s) * 38 + 50, sin(s) * 38 + 50);
line(50, 50, cos(m) * 30 + 50, sin(m) * 30 + 50);
line(50, 50, cos(h) * 25 + 50, sin(h) * 25 + 50);
}
1) Create a sketch with a shape or images spinning on its centre.
2) Using pushMatrix() and popMatrix() create a sketch with three spinning shapes or images in it. Shapes should be spinning from their center. Can you make them all spin at different speeds?
HINT: You will need a different variable for the angle of rotation for each shape and will then need to change these by different amounts.
3) Can you make one rotate once per minute, once per hour and once per day? HINT: You will need to increase the angle of the rotation using map(). angle=map(second(),0,60,0,PI*2);
(One way of doing this is to call pushMatrix to contain the translation, translate the origin to the center the shape, call rotate with a changing angle to create the spin, then return the origin back to it’s usual position after rotate using popMatrix, before doing the same for the next shape.)
See the book chapters for reference under resources.
int lastSecond = 0;
void setup() {
size(100, 100);
}
void draw() {
int s = second();
int m = minute();
int h = hour();
// Only prints once when the second changes
if (s != lastSecond) {
println(h + ":" + m + ":" + s);
lastSecond = s;
}
}
Exercise. change the background color to a random color every second.
//1. declare variable
PFont myfont;
void setup() {
size(100, 100);
//2. load in the data to your variable
myfont = createFont("Georgia", 14);
//3. set text font to your font
textFont(myfont);
}
void draw() {
background(0);
//4. use your font to do something
text("hello world", 10, 55);
}
Ex. Change the font, change it’s size, change it’s location.
Remember your sketch has to be saved first. Your image file has to be located in the data folder that is located in your sketch folder. If it is not there, Processing does not know where to find it.
//1. declare variable
PImage myImage;
void setup() {
size(200, 200);
//2. load in the data to your variable
myImage = loadImage("sun.jpg");
}
void draw() {
background(0);
//3. draw what is in your variable to the screen
image(myImage, 10, 55);
}
Exercise: Set up the above with an image of your choosing. Then modify it so that your image moves around with your mouse.
PFont font;
void setup() {
size(100, 100);
font = createFont("Georgia", 14);
textFont(font);
}
void draw() {
background(0);
int s = second();
int m = minute();
int h = hour();
// The nf() function spaces the numbers nicely
String t = nf(h,2) + ":" + nf(m,2) + ":" + nf(s,2);
text(t, 10, 55);
}
Exercise: Write a program to draw specific images in the background of this sketch at a specific time or date (e.g., display a pumpkin on Halloween, a sunrise at 6am etc.