|
MOME, 2010/11 tanév, I. szemeszter
Kurzus neve: Programozási alapismeretek | Kurzuskód: 124-13-03
Oktató: Samu Bence
Időpontok: 2-3. hét - Szerda 8.30-12.50, Péntek: 8.30-18.00 | Helyszín: B101
Évfolyam: BA II. - kötelező
Kredit: 2
Számonkérés módja: GY/Gyak.
Kurzusleírás:
Kurzus témája:
A kurzus célja, hogy bevezesse a hallgatókat a programozott kép, animáció és
interakció területeibe. A végeredmény egy, minden diák munkáját tartalmazó
interaktív, gesztus vezérelt festő szoftver lesz, mely online, vagy installációként is
prezentálható.
Feladat:
A kurzus első felében az elméleti alapokat alátámasztó, kisebb feladatokat kell
elkészíteni. Ezután az elsajátított programozási alapelveket a hallgató egy önállóan
elkészített programban alkalmazza.
Értékelés szempontjai:
• Órai jelenlét, aktivitás
• Elkészítendő feladat ötletessége, összetettsége.
• Megvalósítás minősége
Technika, beadáshoz szükséges formátum:
Ajánlott szakirodalom:
• Getting started with Processing (Casy Reas, Ben Fry)
• Processing: A Programming Handbook for Visual Designers and Artists (Casy
Reas, Ben Fry)
• Learnin Processing: A Beginner’s Guide to Programming Images, Animations
and Interaction (Daniel Shiffman)
processing.org/
www.openprocessing.org/
http://www.learningprocessing.com
1.óra
Dinamikus rajrolás WIDTH, HEIGHT beépített változók használatával
size(600, 400);
ellipse(width / 2, height / 2, width, height);
line(0, height / 2, width, height / 2);
line(width / 2, 0, width / 2, height);
Processing program szerkezete
void setup()
{
// ez a resz egyszer az elejen fut le
println("beallitaasok");
}
void draw()
{
// ez a resz folyamatosan fut
// ahogy befelyezodott az utolso muvelet, az elso sorrak kezdi elorol
println("loop");
}
void mousePressed()
{
// ez a programresz akkor fut le, ha az eger gombja le lett nyomva
println("eger lenyomva");
}
void keyPressed()
{
// ez a programresz akkor fut le, ha egy billentyu le lett nyomva
println("bill lenyomva");
}
Változó típusok
int egeszSzam;
float valosSzam;
String szoveg;
char karakter;
boolean ketAllapotu;
Példa változók használatára
int xPozicio;
int sebesseg;
void setup()
{
size(600, 400);
xPozicio = 0;
sebesseg = 5;
}
void draw()
{
// mindig torli a kepernyot
background(255, 0, 0);
// kirak ellipszist az adott koordinatakra
ellipse(xPozicio, height / 2, 50, 50);
// noveli a valtozo erteket
xPozicio = xPozicio + 5;
println(sebesseg);
}
void keyPressed()
{
// megvaltoztatja a valtozo elojelet
sebesseg = -sebesseg;
}
Generatív óra feladat (egyszerű példa)
int masodperc;
int perc;
int ora;
void setup()
{
size(600, 400);
noFill();
}
void draw()
{
background(255, 255, 255);
masodperc = second();
perc = minute();
ora = hour();
stroke(255, 0, 0);
ellipse(masodperc * 10, height / 2, 50, 50);
stroke(0, 255, 0);
ellipse(perc * 10, height / 2, 100, 100);
stroke(0, 0, 255);
ellipse(ora * 25, height / 2, 150, 150);
}
2.óra
Péda: random walker
float posX, posY, meret;
void setup()
{
size(600, 400);
posX = random(width);
posY = random(height);
meret = random(5, 20);
}
void draw()
{
posX += random(-5, 5);
posY += random(-5, 5);
ellipse(posX, posY, meret, meret);
}
Feltétel vizsgálat
void setup()
{
size(600, 400);
background(255, 255, 255);
}
void draw()
{
if (mousePressed == true)
{
float d = dist(pmouseX, pmouseY, mouseX, mouseY);
fill(0, 0, 0, 20);
noStroke();
ellipse(mouseX, mouseY, d + 15, d + 15);
fill(255, 255, 255);
stroke(0);
ellipse(mouseX, mouseY, d, d);
line(pmouseX, pmouseY, mouseX, mouseY);
}
}
Feltétel vizsgálat (összetett feltétel)
void setup()
{
size(600, 400);
}
void draw()
{
background(255, 255, 255);
if (mouseX < 200)
{
// 0 - 199
fill(255, 0, 0);
ellipse(mouseX, mouseY, 50, 50);
}
// ha az egerX nagyobb, mint 199 ES kisebb, mint 401, akkor...
if (mouseX > 199 && mouseX < 401)
{
// 200 - 400
fill(0, 0, 255);
ellipse(mouseX, mouseY, 50, 50);
}
if (mouseX > 400)
{
// 401 - ....
fill(0, 255, 0);
ellipse(mouseX, mouseY, 50, 50);
}
}
Egy egyszerű játék, egy összetettebb probléma szemléltetésére
float x, y;
float ellensegX, ellensegY;
int pontszam;
PFont font;
void setup ()
{
size (600, 400);
// kezdoertekek megadasa
x = random (0, width);
y = random (0, height);
ellensegX = random (0, width);
ellensegY = random (0, height);
pontszam = 0;
// font betoltese :: Tools->Create Font !!!
font = loadFont ("Detonator-48.vlw");
textFont (font);
textSize (24);
}
void draw ()
{
background (0, 100, 20);
// az ellenseg mozgatasa
ellensegX += random (-2, 2);
ellensegY += random (-2, 2);
// az ellenseg es a jatekos nem hagyhatja el a kepernyot
// ha ez tortenne a visszakerulnek az ellenkezo oldalra
if ( x > width)
{
x = 0;
}
if (x < 0)
{
x = width;
}
if ( y > height)
{
y = 0;
}
if (y < 0)
{
y = height;
}
if ( ellensegX > width)
{
ellensegX = 0;
}
if (ellensegX < 0)
{
ellensegX = width;
}
if ( ellensegY > height)
{
ellensegY = 0;
}
if (ellensegY < 0)
{
ellensegY = height;
}
// pont szerzes, ha a jatekos es az ellenseg
// kozotti tavolsag kevesebb mint 10 pixel
// az ellenseg ujraszuletik egy veletlenszeru helyen
if (dist(x, y, ellensegX, ellensegY) < 10 )
{
pontszam += 1;
ellensegX = random (0, width);
ellensegY = random (0, height);
}
// a grafika kirajzolasa
// pontszamok
fill (255, 255, 255);
text ("pontszamok: " + pontszam, 10, 20 );
// jatekos
noStroke ();
fill (0, 0, 0);
ellipse (x, y, 10, 10);
// ellenseg
noStroke ();
fill (255, 0, 0);
ellipse (ellensegX, ellensegY, 5, 5);
}
// a keyPressed programresz akkor fut le, ha lenyomtunk egy billentyut
// ha a nyilakat nyomtuk le, a jatekos poziciojat
// novelni, vagy csokkenteni kell
void keyPressed ()
{
if (keyCode == 37)
//balra nyil
{
x -= 5;
}
if (keyCode == 39)
//jobbra nyil
{
x += 5;
}
if (keyCode == 38)
//lefele nyil
{
y -= 5;
}
if (keyCode == 40)
//felfele nyil
{
y += 5;
}
}
3.óra
Saját függvények létrehozása:
void setup()
{
size(600, 400);
}
// parameter nelkult fuggveny
void rajzoljKortKozepre()
{
fill(128);
stroke(0);
ellipse(width / 2.0, height / 2.0, 50, 50);
}
// ket parameteres fuggveny
// a fuggvenyen belul az "kozepX" es "kozepY" valtozokkal
// hivatkozhatunk az atadott parameterekre
// jelen esetben az arc kozeppontjara
void rajzoljFejet(float kozepX, float kozepY)
{
// fej
stroke(0, 0, 0);
fill(#EAC86F);
ellipse(kozepX, kozepY, 100, 200);
// szemek
fill(0, 0, 0);
ellipse(kozepX - 10, kozepY - 30, 15, 15);
ellipse(kozepX + 10, kozepY - 30, 15, random(5, 15)); // tikkelo szem
// szaj
fill(255, 0, 0);
ellipse(kozepX, kozepY + 50, 50, random(4, 9)); // blablabla
// szembogar
fill(255, 255, 255);
ellipse(kozepX - 8, kozepY - 30, 4, 4);
ellipse(kozepX + 8, kozepY - 30, 2, 2);
}
// "float" vagyis tort szammal visszatero fuggveny
// a "return" kulcsszo utani ertek lesz a fuggveny visszateresi erteke
float celsiusFarenheitben(float celsius)
{
float farenheit = celsius * 1.8 + 32;
return farenheit;
}
for ciklus
for ( valtozó definiálása ; feltétel ameddig a ciklus ismétlődjön ; definiált váltózóval végrehajtott művelet)
{
}
void setup()
{
size(600, 400);
}
void draw()
{
background(255, 255, 255);
stroke(0, 0, 0);
for (int x = 0; x < width; x += 2)
{
line(x, 0, x, height);
}
noFill();
for (int r = 0; r < height; r += 3)
{
ellipse(mouseX, mouseY, r, r);
}
for (int n = 0; n < 100; n += 1)
{
line(random(0, width), random(0, height), random(0, width), random(0, height));
}
}
Példa for ciklusra:
void setup()
{
size(600, 400);
}
void draw()
{
background(255, 255, 255);
for (int x = 0; x <= width; x += 15)
{
// font vizszintesen
line(x, 0, mouseX, mouseY);
// lent vizszintesen
line(x, height, mouseX, mouseY);
}
for (int y = 0; y <= height; y += 15)
{
// bal fuggoleges
line(0, y, mouseX, mouseY);
// jobb fuggoleges
line(width, y, mouseX, mouseY);
}
}
Kép és Font betöltése:
PFont betukeszlet;
PImage kep;
void setup()
{
size(300, 300);
betukeszlet = loadFont("valameyikFont.vlw");
textFont(betukeszlet);
textSize(12);
kep = loadImage("egySzepKep.jpg");
}
void draw()
{
fill(255, 255, 255);
image(kep, 0, 0, width, height);
text("Ez egy szep kep", 10, 10);
}
4.óra
több funkciós rajprogram
int festoMod;
void setup()
{
size(600, 400);
background(255, 255, 255);
festoMod = 0;
}
void draw()
{
if (mousePressed == true)
{
if (festoMod == 0)
{
fujj(mouseX, mouseY);
}
if (festoMod == 1)
{
rajzoljEgyArcot(mouseX, mouseY);
}
}
}
void fujj(float x, float y)
{
fill(0);
noStroke();
for (int n = 0; n < 20; n += 1)
{
ellipse(x + random(-10, 10), y + random(-10, 10), 2, 2);
}
}
void rajzoljEgyArcot(int x, int y)
{
noFill();
stroke(0);
ellipse(x, y, 100, 100);
ellipse(x - 30, y - 10, 30, 30);
ellipse(x + 30, y - 10, 30, 30);
ellipse(x, y + 30, 50, 5);
}
void keyPressed()
{
if (key == '1')
{
festoMod = 0;
}
if (key == '2')
{
festoMod = 1;
}
}
Pattogó labda
float x, y, vx, vy;
void setup()
{
size(100, 100);
x = random(0, width);
y = random(0, height);
//vx = random(-1, 1);
//vy = random(-1, 1);
vx = cos( radians(32) );
vy = sin( radians(32) );
}
void draw()
{
background(255, 255, 255);
x += vx;
y += vy;
if (x < 0)
{
vx = -vx;
}
if (x > width)
{
vx = -vx;
}
if (y < 0)
{
vy = -vy;
}
if (y > height)
{
vy = -vy;
}
ellipse(x, y, 2, 2);
}
Tömb használata:
tomb valtozo letrehozasa
float[] tomb;
tomb meretenek meghatarozasa
tomb = new float[hanyDarab];
a tomb elemeire a kapcsos zarojelek koze irt indexszammal lehet hivatkozni
tomb[0] = ertek;
tomb[1] = masikErtek;
println( tomb[0] );
Részecske rendszer létrehozása:
int db;
// egy elem tulajdonsagai
float[] x, y, meret;
color[] szin;
void setup()
{
size(500, 500);
db = 1000; // hany darab elem legyen
// tulajdonsagok inicializalasa
x = new float[db];
y = new float[db];
meret = new float[db];
szin = new color[db];
// kezdoertekek megadasa
for (int i = 0; i < db; i += 1)
{
x[i] = width / 2;
y[i] = height / 2;
meret[i] = random(5, 10);
szin[i] = color( random(255) , 0, 0, random(10, 30));
}
noStroke();
background(255, 255, 255);
}
void draw()
{
for (int i = 0; i < db; i += 1)
{
//elem mozgatasa
x[i] += random(-5, 5);
y[i] += random(-5, 5);
// elem szine
fill( szin[i] );
// elem kirajzolasa
ellipse(x[i], y[i], meret[i], meret[i]);
}
//saveFrame("seq#####.tif");
}
Kép színeinek felhasználása, kép alapú effekt
PImage kep;
void setup()
{
kep = loadImage("hatter.jpg");
size(kep.width, kep.height);
background(0, 0, 0);
noStroke();
}
void draw()
{
float meret = 2 + mouseX / 10.0;
for (int i = 0; i < 100; i++)
{
float x = random(0, width);
float y = random(0, height);
color szin = kep.get(int(x), int(y));
fill( szin );
ellipse(x, y, meret, meret);
}
}
|
