19. September 2013

Für den Einstieg in das Programmieren verwenden wir Processing. Processing basiert auf Java. Da ich in der Lehre (vor vielen Jahren) das programmieren mit Java erlernt habe, war der Wiedereinstieg relativ einfach. Zuerst mussten wir einen Punkt dem Mauscursor folgen lassen. Danach sollten wir ein Zeichnungsprogramm erstellen. Ich versuchte mein erstes Programm zu erweitern, merkte aber, dass das durch den draw()-loop nicht sehr einfach ist. Ich habe mich dann darauf beschränkt bei einem Klick einen Punkt zu zeichnen und diesen in einer ArrayList zu speichern. Bei jedem draw() wird diese ArrayList durchlaufen und die Punkte wiederhergestellt. Version 1 Punkte speichern mit der ArrayList:

int currentMouseX;
int currentMouseY;
boolean clicked = false;
ArrayList<int[]> saved = new ArrayList<int[]>();
color[] colors = new color[6];
color currentColor;


void setup() {
  size(300,300);
  background(0);
  
  currentColor = color(111, 222, 12);
  
  println(colors);
}
 
void draw() {
  background(0);  
  
  // gespeicherte punkte neu zeichnen
  for (int i = 0; i < saved.size(); i++) {
    int[] item = saved.get(i);
    fill(item[2]);
    ellipse(item[0],item[1],30,30);
  }
  
  fill(currentColor);
  ellipse(currentMouseX,currentMouseY,30,30);
}
 
void mouseClicked() {
  print(mouseButton);
  if (mouseButton == RIGHT) {
    background(0); 
    saved.clear();
  } else if (mouseButton == LEFT) {
    save();
  }
}

void save() {
  int[] coordinates = new int[3];
  coordinates[0] = currentMouseX;  
  coordinates[1] = currentMouseY;
  coordinates[2] = currentColor;
  saved.add(coordinates);  
}

void mouseMoved() {
  // println("x: " + mouseX + ", y: " + mouseY);
  // println(clicked);
  if (!clicked) {
    currentMouseX = mouseX;
    currentMouseY = mouseY;
  }
}

void keyPressed() {
  switch (keyCode) {
    case 49: 
      currentColor = color(167, 2, 16);
    break;
    case 50: 
      currentColor = color(130, 2, 167);
    break;
    case 51: 
      currentColor = color(2, 55, 167);
    break;
    case 52: 
      currentColor = color(2, 167, 97);
    break;
    case 53: 
      currentColor = color(50, 167, 2);
    break;
    case 54: 
      currentColor = color(255, 255, 255);
    break;
  }
  // println(keyCode);
}

Version 2 In einem neuen Programm erstellte ich ein zweites Zeichnungsprogramm mit folgenden Funktionen:

• Farbwahl: 1-6
• Vergrösserung des Pinsels (Kreis): Q
• Verkleinerung des Pinsels: (A)
• Darstellung einer Vorschau des aktuellen Pinsels
• Radieren mit der rechten Maustaste

color currentColor;
color lastColor;
int size;
color backgroundColor = color(255);

void setup() {
  size(400, 400);
  background(backgroundColor);
  noStroke();
  smooth();

  currentColor = color(111, 222, 12);
  lastColor = currentColor;
  size = 30;
}

void draw() {

  fill(currentColor);

  if (mousePressed) {
    ellipse(mouseX, mouseY, size, size);
  }

  // vorschau
  fill(backgroundColor);
  rect(0, 0, size+3, size+3);

  fill(currentColor);
  ellipse(1+size/2, 1+size/2, size, size);
}

void keyPressed() {
  switch (keyCode) {
    // farben 1-6
    case 49:
      currentColor = color(167, 2, 16);
    break;
    case 50:
      currentColor = color(130, 2, 167);
    break;
    case 51:
      currentColor = color(2, 55, 167);
    break;
    case 52:
      currentColor = color(2, 167, 97);
    break;
    case 53:
      currentColor = color(50, 167, 2);
    break;
    case 54:
      currentColor = color(255, 255, 255);
    break;

    // grösser und kleiner
    case 81:
      size++;
    break;
    case 65:
      size--;
    break;
  }
  // println(keyCode);
}

void mousePressed() {
  // rechte maustaste = schwarz = radieren
  if (mouseButton == RIGHT) {
    lastColor = currentColor;
    currentColor = backgroundColor;
  }
}

void mouseReleased() {
  // letzte farbwahl setzen
  if (mouseButton == RIGHT) {
    currentColor = lastColor;
  }
}