Processing

Telepítés
• https://processing.org
• letöltés: https://processing.org/download/
• ZIP kitömörítése, exe futtatása
Processing consists of:
• The Processing Development Environment (PDE):
an Integrated Development Environment (IDE)

• A collection of functions („commands” or

„methods”): the “core” programming interface
(API), and libraries
• A language syntax, identical to Java but with a
few modifications.
• An active online community,
at http://processing.org
 First program in Processing
• ellipse(50, 50, 80, 80);
– Ctrl+r
– Present
• Ctrl+Shift+F v. jobb egér gomb a függvényen
– Find in reference
• ellipse(50, 50, 180, 80);

• Save
• Export Application
 setup és draw függvények
void setup() {
size(480, 120); }

void draw() {
if (mousePressed) { fill(0); }
else { fill(255); }
ellipse(mouseX, mouseY, 80, 80);
}
 „Rajzolóprogram” készítése
• Módosítsa úgy a programot, hogy jobb
egérgombbal fehér, jobb gombbal fekete
köröket rajzoljon!
 Programs in Processing
• called sketches
• stored in sketchbooks
– File/sketchbooks
stroke(255); // sets the stroke color to white
stroke(255, 255, 255); // identical to the line above
stroke(255, 128, 0); // bright orange (red 255,
size(400, 400); green 128, blue 0)
background(192, 64, 0); stroke(#FF8000); // bright orange as a web color
stroke(255); stroke(255, 128, 0, 128); // bright orange with 50%
transparency
line(150, 25, 270, 350);
• Módosítsa úgy a rajzolóprogramot, hogy a
körök átlátszóak legyenek!
void setup() {
size(400, 400); void setup() {
size(400, 400);
stroke(255); stroke(255); }
background(192, 64, 0); }
void draw() {
void draw() { background(192, 64, 0);
line(150, 25, mouseX, mouseY); } line(150, 25, mouseX, mouseY); }

void setup() {
size(400, 400);
stroke(255); }
void draw() { line(150, 25, mouseX, mouseY); }
void mousePressed() { background(192, 64, 0); }
 Using files
import processing.pdf.*;
size(400, 400, PDF, "output.pdf");
stroke(255); Hogyan mentünk el teljes elérési útvonalra?

ellipse(50, 50, 80, 80);

// Examples of loading a text file and a JPEG image
// from the data folder of a sketch.
String[] lines = loadStrings("something.txt");
PImage image = loadImage("picture.jpg");
import processing.pdf.*;
beginRecord(PDF, “ellipse.pdf");
ellipse(50,50,50,50);
…. <- mi hiányzik?
noStroke();
colorMode(RGB, 100);
for (int i = 0; i < 100; i++)
{ for (int j = 0; j < 100; j++)
{ stroke(i, j, 0); point(i, j); } }

noStroke();
colorMode(HSB, 100);
for (int i = 0; i < 100; i++)
{ for (int j = 0; j < 100; j++)
{ stroke(i, j, 100); point(i, j); } }
 Feladat
• JPG kép betöltése (akár URL-ről)
• Rajzolás a képre kétféle színnel (jobb és bal
egérgombbal kiválasztva)
• Save feliratú rectangle a kép felső részén
• Oda kattintva a kép pdf és jpg mentésre kerül
 loop() vs. noLoop()
boolean someMode = false;
float x = 0.0;
void draw() {
background(204); void setup() {
x = x + 0.1; size(200, 200);
if (x > width) { noLoop();
}
x = 0;
}
void draw() {
line(x, 0, x, height); if (someMode) {
} background(204);
x = x + 10;
void mousePressed() { if (x > width) {
noLoop(); x = 0;
} }
line(x, 0, x, height);
void mouseReleased() { }
loop(); }
}
void mousePressed() {
someMode = true;
//redraw(); // or
//loop();
}
 3D grafika
https://processing.org/tutorials/p3d/
 Mozgatás 3D térben
float x,y,z;
void setup() {
size(200,200,P3D);
x = width/2;
y = height/2;
z = 0; }

void draw() {
translate(x,y,z); // move the object at each iteration
rectMode(CENTER); //interprets the first two parameters of rect() as the
// shape's center point, while the third and fourth parameters are its width and
height.
rect(0,0,100,100);
z++; // The rectangle moves forward as z increments.
}
Majd távolítsák a téglalapot! Milyen függvényt kell használni a draw()-ban,
hogy megfelelő legyen ez eredmény?
 Forgatás a tengelyek körül
size(200, 200, P3D);
background(100);
rectMode(CENTER);
fill(51);
stroke(255);

translate(100, 100, 0);

rotateX(PI/4); // rotateX(PI/2);
rect(0, 0, 100, 100);
 Feladatok: forgatás
1. Forgassunk betöltött képet adott sebességgel
mindhárom tengely körül folyamatosan!
PImage img;

void settings()
{
img = loadImage("cat.png");
size(img.width, img.height, P3D);
}
void setup()
{
fill(51);
stroke(255);
}

float i=0;
float j=0;

void draw()
{
background(100);
translate(width/2,height/2, 0);
rotateX(j);
//rotateY(j);
//rotateZ(j);
image(img,-width/2,-height/2);
i=i+0.02;
j=i%(2*PI);
}
 Push/pop data…
fill(255);
rect(0, 0, 50, 50); // White rectangle

pushMatrix();
translate(30, 20);

fill(0);
rect(0, 0, 50, 50); // Black rectangle
//popMatrix();

fill(100);
rect(0, 0, 50, 50); // Gray rectangle
 Gömb és tetraéder
size(640, 360, P3D);
size(640,360,P3D); background(0);
background(0); translate(width/2, height/2, 0);
lights(); stroke(255);
rotateX(PI/2);
pushMatrix(); rotateZ(-PI/6);
noFill();
translate(130, height/2, 0);
rotateY(1.25); beginShape();
rotateX(-0.4); vertex(-100, -100, -100);
noStroke(); vertex( 100, -100, -100);
vertex( 0, 0, 100);
box(100);
popMatrix(); vertex( 100, -100, -100);
vertex( 100, 100, -100);
pushMatrix(); vertex( 0, 0, 100);
translate(500, height*0.35, -200); vertex( 100, 100, -100);
noFill(); vertex(-100, 100, -100);
stroke(255); vertex( 0, 0, 100);
sphere(280);
vertex(-100, 100, -100);
popMatrix() vertex(-100, -100, -100);
vertex( 0, 0, 100);
endShape();
 Rajzolás a háttérben
PGraphics pg;

void setup() {
PGraphics pg; size(640, 360);
pg = createGraphics(400, 200);
void setup() { }
size(200, 200);
pg = createGraphics(100, 100); void draw() {
} fill(0,12);
rect(0, 0, width, height);
fill(255);
void draw() { noStroke();
pg.beginDraw(); ellipse(mouseX, mouseY, 60, 60);
pg.background(102);
pg.stroke(255); pg.beginDraw();
pg.line(pg.width*0.5, pg.height*0.5, pg.background(51);
mouseX, mouseY); pg.noFill();
pg.endDraw(); pg.stroke(255);
//image(pg, 50, 50); pg.ellipse(mouseX-120, mouseY-60, 60, 60);
} pg.endDraw();

// Draw the offscreen buffer to the screen with image()

image(pg, 120, 60);
}
 Kamera használata
void setup() {
size(640, 360, P3D);
fill(204);
}

void draw() {
lights();
background(0);

// Change height of the camera with mouseY

camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
0.0, 0.0, 0.0, // centerX, centerY, centerZ
0.0, 1.0, 0.0); // upX, upY, upZ

noStroke();
box(90);
stroke(255);
line(-100, 0, 0, 100, 0, 0);
line(0, -100, 0, 0, 100, 0);
line(0, 0, -100, 0, 0, 100);
}
 Szövegek kezelése
PFont f;
String message = "Each character is written individually.";

void setup() {
size(400, 150);
f = createFont("Arial",20,true);
}

void draw() {
background(255);
fill(0);
textFont(f);
int x = 10;
for (int i = 0; i < message.length(); i++) {
textSize(random(12,36));
text(message.charAt(i),x,height/2);
// textWidth() spaces the characters out properly.
x += textWidth(message.charAt(i));
}
noLoop();
}

Font szerkesztő az eszköz menüpontban…

 Hullámfüggvény
• Math/Sinewave