Tutorial for the course, Typography and Code, at SAIC.
How to Save as JPG, TIFF, PNG, and PDF format?
Reference: http://www.processing.org/reference/save_.html
Exercise1: Save as .jpg by using save(“yourname_pattern1.jpg”)
void setup()
{
size(600,600);
background(255);
}
void draw()
{
for (int i = 0; i < 605; i = i+30)
{
for (int j = 0; j < 605; j = j+30)
{
fill(0);
stroke(255);
smooth();
strokeWeight(2.5);
ellipse(j, i, 40, 40);
}
}
save("yourname_pattern1.jpg");
}
You can change your image format like the following codes.
ex) save("yourname_pattern1.png");
ex) save("yourname_pattern1.tif");
How to use saveFrame()?
Reference: http://www.processing.org/reference/saveFrame_.html
Exercise2:
1. Use the same code of the exercise 1.
2. Use random() function on the parameters of the width and the height of ellipse()
void setup()
{
size(600,600);
background(255);
}
void draw()
{
for (int i = 0; i < 605; i = i+30)
{
for (int j = 0; j < 605; j = j+30)
{
fill(0);
stroke(255);
smooth();
strokeWeight(2.5);
ellipse(j, i, random(40), random(40));
}
}
}
Exercise3: add saveFrame() to save each frame of the exercise 2.
void setup()
{
size(600,600);
background(255);
}
void draw()
{
for (int i = 0; i < 605; i = i+30)
{
for (int j = 0; j < 605; j = j+30)
{
fill(0);
stroke(255);
smooth();
strokeWeight(2.5);
ellipse(j, i, random(40), random(40));
}
}
saveFrame("images/ahn-###.jpg");
}
noLoop(); http://www.processing.org/reference/noLoop_.html
If you want to generate only one visual output by using random() function with the exercise 2 each time to run, please include
noLoop() in your setup()
Exercise 4)
void setup()
{
size(600,600);
background(255);
noLoop();
}
void draw()
{
for (int i = 0; i < 605; i = i+30)
{
for (int j = 0; j < 605; j = j+30)
{
fill(0);
stroke(255);
smooth();
strokeWeight(2.5);
ellipse(j, i, random(40), random(40));
}
}
}
How to Convert as PDF?
Reference: http://www.processing.org/reference/libraries/pdf/index.html
Processing provides a library, processing.pdf.* to write PDF files directly from Processing. The vector-based PDF can be scaled
to any size and output at very high resolutions. It provides open possibilities for graphic designers, who need high-resolution
images for print-based publication design.
The screen size function variable is relatively small, size(200,200), because
graphic designers do not need to create a large size screen, such as size(1500,1500), because the small size can easily be
converted into a PDF and scaled up and down without losing image quality. Increasing the screen size will only cause an
unnecessarily longer running time in Processing and will not benefit the recorded PDF file.
Sample Code 1
import processing.pdf.*;
void setup() {
size(200, 200);
beginRecord(PDF, "image.pdf");
endRecord();
}
Sample 2 with draw function():
import processing.pdf.*;
void setup() {
size(200, 200);
beginRecord(PDF, "image.pdf");
}
void draw(){
ellipse(100,100,40,40);
endRecord();
}
We will use the code of Exercise 4 for demonstration and add the following red codes.
import processing.pdf.*;
void setup()
{
size(600,600);
background(255);
noLoop();
beginRecord(PDF, "yourname.pdf");
}
void draw()
{
for (int i = 0; i < 605; i = i+30)
{
for (int j = 0; j < 605; j = j+30)
{
fill(0);
stroke(255);
smooth();
strokeWeight(2.5);
ellipse(j, i, random(40), random(40));
}
}
endRecord();
}
How to convert your Interactive Animation to PDF files?
We will use the following code.
void setup()
{
size(600,600);
background(55);
}
void draw()
{
smooth();
noFill();
stroke(random(256),random(180),random(80));
float a=random(180);
ellipse(mouseX, mouseY, a, a);
}
You will add the following red codes in the above code to covert it into PDF files. Before you start adding the codes, please save
your code at first.
import processing.pdf.*;
void setup()
{
size(600,600);
background(55);
}
void draw()
{
smooth();
noFill();
stroke(random(256),random(180),random(80));
float a=random(180);
ellipse(mouseX, mouseY, a, a);
}
void mousePressed() {
beginRecord(PDF, "yourname1=###.pdf");
background(55);
}
void mouseReleased() {
endRecord();
background(55);
}
References:
mousePressed(): http://www.processing.org/reference/mousePressed_.html
mouseReleased(): http://www.processing.org/reference/mouseReleased_.html
Assignment
You will email me(yahn1@saic.edu) your class project1 as pdf. You would have more than one PDF
files. You can send me several PDFs files. They should be saved as yourname-###.pdf. For instance,
yeohyunahn-001.pdf. Note) don’t make any blank when you name your file.