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);
  }
}