Ders 1

Dengeyi değiştirmek için fareyi sola ve sağa hareket ettirin. "MouseX" değişkeni, dikdörtgenlerin hem boyutunu hem de rengini kontrol etmek için kullanılır. 

void setup() {

  size(640, 360);

  noStroke();

  colorMode(RGB, height, height, height);

  rectMode(CENTER);

}

void draw() {

  background(0.0);

  float r1 = map(mouseX, 0, width, 0, height);

  float r2 = height-r1;

  fill(r1);

  rect(width/2 + r1/2, height/2, r1, r1);

  fill(r2);

  rect(width/2 - r2/2, height/2, r2, r2);

}

Fareyi hareket ettirmek her kutunun konumunu ve boyutunu değiştirir. 

void setup() {

  size(640, 360); 

  noStroke();

  rectMode(CENTER);

}

void draw() {

  background(51); 

  fill(255, 204);

  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);

  fill(255, 204);

  int inverseX = width-mouseX;

  int inverseY = height-mouseY;

  rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);

}

Sinyal oluşturmak için fareyi hareket ettirin ve tıklayın. Üst sıra "mouseX" den gelen sinyal, orta sıra "mouseY" den gelen sinyal ve en alttaki sıra "mousePressed" den gelen sinyaldir.

int[] xvals;

int[] yvals;

int[] bvals;

void setup() {

  size(640, 360);

  noSmooth();

  xvals = new int[width];

  yvals = new int[width];

  bvals = new int[width];

}

int arrayindex = 0;

void draw() {

  background(102);

  for (int i = 1; i < width; i++) { 

    xvals[i-1] = xvals[i]; 

    yvals[i-1] = yvals[i];

    bvals[i-1] = bvals[i];

  } 

  // Add the new values to the end of the array 

  xvals[width-1] = mouseX; 

  yvals[width-1] = mouseY;

  if (mousePressed == true) {

    bvals[width-1] = 0;

  } else {

    bvals[width-1] = height/3;

  }

  fill(255);

  noStroke();

  rect(0, height/3, width, height/3+1);

  for(int i = 1; i < width; i++) {

    // Draw the x-values

    stroke(255);

    point(i, map(xvals[i], 0, width, 0, height/3-1));

    // Draw the y-values

    stroke(0);

    point(i, height/3+yvals[i]/3);

    // Draw the mouse presses

    stroke(255);

    line(i, (2*height/3) + bvals[i], i, (2*height/3) + bvals[i-1]);

  }

}

Odaklanmak için resmin üzerine tıklayın ve zaman ve uzayda formlar oluşturmak için harf tuşlarına basın. Her anahtarın benzersiz bir tanımlama numarası vardır. Bu sayılar, boşluktaki şekilleri konumlandırmak için kullanılabilir.

int rectWidth;  

void setup() {

  size(640, 360);

  noStroke();

  background(0);

  rectWidth = width/4;

}

void draw() { 

  // keep draw() here to continue looping while waiting for keys

}

void keyPressed() {

  int keyIndex = -1;

  if (key >= 'A' && key <= 'Z') {

    keyIndex = key - 'A';

  } else if (key >= 'a' && key <= 'z') {

    keyIndex = key - 'a';

  }

  if (keyIndex == -1) {

    // If it's not a letter key, clear the screen

    background(0);

  } else { 

    // It's a letter key, fill a rectangle

    fill(millis() % 255);

    float x = map(keyIndex, 0, 25, 0, width - rectWidth);

    rect(x, 0, rectWidth, height);

  }

}

Fareyi ekran boyunca hareket ettirin ve ardından sembol gelecektir. Program, animasyonun her karesini çizerken, sembolün konumu ile imleç arasındaki farkı hesaplar. Mesafe 1 pikselden büyükse, sembol mesafenin (0.05) bir kısmını mevcut konumundan imlece doğru hareket ettirir.

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

}

Dairelerin konumunu değiştirmek için fareyi ekran boyunca hareket ettirin. Farenin konumları bir diziye kaydedilir ve her kare oynatılır. Her kare arasında, her dizinin sonuna en yeni değer eklenir ve en eski değer silinir.

int num = 60;

float mx[] = new float[num];

float my[] = new float[num];

void setup() {

  size(640, 360);

  noStroke();

  fill(255, 153); 

}

void draw() {

  background(51); 

  // Cycle through the array, using a different entry on each frame. 

  // Using modulo (%) like this is faster than moving all the values over.

  int which = frameCount % num;

  mx[which] = mouseX;

  my[which] = mouseY;

  for (int i = 0; i < num; i++) {

    // which+1 is the smallest (the oldest in the array)

    int index = (which+1 + i) % num;

    ellipse(mx[index], my[index], i, i);

  }

}

Processing dilini incelediğimizde Java'ya olan benzerliği fark ediliyor. Fakat Java'dan en önemli farkı grafikler ve iletişim metodları üzerine özel nitelikleri olması. Geliştirme arayüzü Processing  Development Envirioment (PDE), Processing için özel tasarlandığı için çok basit ve sade, bir o kadarda kolay bir arabirim. Yazdığınız programları çalışmaya hazır hale getirebilmek için sadece PDE deki "export" butonunu kullanmak yeterli. 

void setup() {

       size(400, 400);

       stroke(255);

       background(192, 64, 0);

       } 

void draw() {

       line(150, 25, mouseX, mouseY); 

       }

void mousePressed() {

       saveFrame("output-####.png");

       background(192, 64, 0);

       }