Wenn Sie normalerweise nur Datenmanipulations- und Benutzeroberflächenprogramme schreiben, möchten Sie manchmal Programme schreiben, die nichts mit Ihrer Arbeit zu tun haben. Lassen Sie uns deshalb dieses Mal mit Processing ein kleines weihnachtliches Bild zeichnen.

Was ist Verarbeitung?

Processing ist eine Programmiersprache und eine integrierte Entwicklungsumgebung für elektronische Kunst und visuelles Design. Es mag ein wenig schwierig erscheinen, so zu schreiben, aber ich denke, es ist in Ordnung, wenn Sie genug darüber nachdenken, um ein Bild durch Schreiben eines Programms zu zeichnen. Da die durch das geschriebene Programm verursachten Änderungen sofort sichtbar sind, ist der Unterschied in den Ausführungsergebnissen leichter zu verstehen als das Programm, das Daten manipuliert.

Die Verarbeitung erfolgt in Java, und das Programm ist grundsätzlich in Java geschrieben. Es kann jedoch auch in Python oder JavaScript geschrieben werden, indem ein Modus hinzugefügt wird. Versuchen Sie die Verarbeitung in der Programmiersprache, die Sie interessiert.

Lassen Sie uns installieren

Um Processing zu installieren, laden Sie einfach die ZIP-Datei von der folgenden Seite herunter, entpacken Sie sie und doppelklicken Sie dann unter Windows auf Processing.exe oder unter Mac auf Processing.app.

https://processing.org/download/

Wenn Sie die Verarbeitung starten, wird die folgende IDE angezeigt.

Lassen Sie uns sofort etwas zeichnen. Bitte kopieren Sie das folgende Programm, fügen Sie es in die IDE ein und führen Sie es aus. Ausführen ist die Schaltfläche mit dem Dreieck oben links.

size(300,250);
background(255);
stroke(0);

fill(255);
ellipse(150,160,100,100); // body
line(110,130,70,100); // left arm
line(190,130,230,100); // right arm
ellipse(150,100,60,60); // head
arc(150, 106, 30, 25, -TWO_PI, -PI); // mouth

fill(0);
rectMode(CENTER);
rect(150,65,34,20); // hat
line(125,75,175,75); // brim
ellipse(142,92,5,5); // left eye
ellipse(158,92,5,5); // right eye

noStroke();
fill(255,100,0); 
ellipse(150,102,7,7); // nose

Wenn Sie so etwas sehen, sind Sie erfolgreich. Das Programm zeichnet einfach Kreise auf jedem Teil, um Linien zu füllen oder zu zeichnen. Das Bild ändert sich durch Ändern des numerischen Werts jedes Teils. Probieren wir also verschiedene Dinge aus.

Beispielprogramm

Dieses Mal werde ich nicht erwähnen, wie man ein Verarbeitungsprogramm schreibt. Sie können viele Möglichkeiten zum Schreiben von Verarbeitungs- und Beispielprogrammen finden, indem Sie im Web suchen. Wenn Sie das Beispielprogramm kopieren oder neu schreiben und verschieben, werden Sie bald verstehen, wie das Programm geschrieben wird. Es wird daher empfohlen, das Beispielprogramm häufig zu verschieben. Hier sind einige Beispielprogramme.

Erleuchtung

Wenn Weihnachten ist und Sie das Gefühl haben, dass der Raum trostlos ist, verwandeln Sie Ihr PC-Display in Weihnachtsbeleuchtung. Passen Sie den Zeichenbereich des Beispielprogramms und die Größe des Kreises an, um die Anzeige wunderschön zu gestalten. Ich zeichne nur, indem ich die Koordinaten, die Kreisgröße, die Farbe und die Transparenz mit Zufallszahlen ändere. setup () wird zu Beginn nur einmal ausgeführt, und draw () wird regelmäßig wiederholt ausgeführt.

void setup() {
  size(700,400);
  background(0);
  smooth();
}

void draw() {
  float r = random(255);
  float g = random(255);
  float b = random(255);
  float a = random(255);
  float x = random(width);
  float y = random(height);
  float diameter = random(20);
  
  noStroke();
  fill(r,g,b,a);
  ellipse(x,y,diameter,diameter);
}

Zeichne einen Baum mit fraktalen Figuren

Eine fraktale Figur ist "ein Teil der Figur, der sich selbst ähnlich ist (retrospektiv)". Es gibt viele Arten von Fraktalfiguren, aber hier zeichnen wir so etwas wie einen Baum nach dem Weihnachtsbaum.

int angle = 110;

void setup() {
  background(255);
  size(600, 600, P2D);
  
  tree(300, 600, 0.0, radians(0), radians(angle), 200, 10);
  tree(300, 600, 0.0, radians(angle), radians(0), 200, 10);
}

void tree(float posX, float posY, float angle, float forkRight, float forkLeft, float length, int counter) {
  if (counter == 0) {
    return;
  }

  float nextX = posX + length * sin(angle);
  float nextY = posY - length * cos(angle);

  line(posX, posY, nextX, nextY);
  
  tree(nextX, nextY, angle + forkRight, forkRight, forkLeft, length*0.6, counter - 1);
  tree(nextX, nextY, angle - forkLeft,  forkRight, forkLeft, length*0.6, counter - 1);
}

Es kann schwierig sein zu lesen, wenn Sie nicht mit rekursiver Verarbeitung vertraut sind, aber dieselbe Form wird eine bestimmte Anzahl von Malen reduziert und wiederholt gezeichnet. Wenn Sie den Winkelwert ändern, ändert sich die Form des Baums. Versuchen wir es also. Das folgende ist das Zeichnungsergebnis, wenn Größe = 80.

Zeichne Schneekristalle mit fraktalen Figuren

Es gibt eine Koch-Kurve als eine Art fraktale Figur. Die folgende Abbildung kann erstellt werden, indem die Linie in drei gleiche Teile geteilt und die Zeichnung eines regelmäßigen Dreiecks mit den beiden geteilten Punkten als Scheitelpunkten auf unbestimmte Zeit wiederholt wird.

Wenn Sie diese Koch-Kurve in einem regelmäßigen Dreieck platzieren, erscheint eine Figur wie ein Schneekristall. Diese Figur heißt Koch Schneeflocke.

Das folgende Beispiel ist ein Programm zum schrittweisen Erstellen von Koch-Schneeflocken. Bewegen wir es tatsächlich und sehen, wie Koch-Schneeflocken hergestellt werden.

int depth = -1;

void setup(){
  background(255);
  size(400, 400);
  frameRate(1);
}

void draw() {
  background(255);
  depth++;
  if (depth > 5) {
    depth = 0;
  }

  int border = (int) (width * 0.8);
  int triangleHeight = (int) (border * Math.sin(Math.toRadians(60.0)));
  
  Point p1 = new Point(width / 2, 10);
  Point p2 = new Point(width / 2 - border / 2, 10 + triangleHeight);
  Point p3 = new Point(width / 2 + border / 2, 10 + triangleHeight);

  drawKochCurve(depth, p1, p2);
  drawKochCurve(depth, p2, p3);
  drawKochCurve(depth, p3, p1);
}

void drawKochCurve(int count, Point p1, Point p2) {
  stroke(0);

  if (count == 0) {
    line(p1.x, p1.y, p2.x, p2.y);
  } else {
    int deltaX = p2.x - p1.x;
    int deltaY = p2.y - p1.y;
    
    double cosConst = Math.cos(Math.toRadians(30.0));
    int zx = (int)((p1.x + p2.x)/2 + cosConst * (p1.y - p2.y)/3.0);
    int zy = (int)((p1.y + p2.y)/2 + cosConst * (p2.x - p1.x)/3.0);
    
    Point x = new Point(p1.x + deltaX / 3, p1.y + deltaY / 3);
    Point y = new Point(p1.x + deltaX * 2 / 3, p1.y + deltaY * 2 / 3);
    Point z = new Point(zx, zy);

    drawKochCurve(count - 1, p1, x);
    drawKochCurve(count - 1, x, z);
    drawKochCurve(count - 1, z, y);
    drawKochCurve(count - 1, y, p2);
  }
}

class Point {
  int x;
  int y;
 
  Point(int x, int y){
    this.x = x;
    this.y = y;
  } 
}

The Nature of Code Wie war es bisher? Ich hoffe, Sie werden so viel wie möglich an der Verarbeitung interessiert sein. Abschließend möchte ich Ihnen "The Nature of Code" vorstellen. "The Nature of Code" ist ein Buch über die Verwendung von Processing zur Beschreibung der Regeln der natürlichen Welt wie der Gesetze und Formeln der Physik und Mathematik. Die diesmal eingeführten fraktalen Zahlen werden ebenfalls ausführlich beschrieben. Lesen Sie sie daher bitte, wenn Sie interessiert sind.

https://www.amazon.co.jp/Nature-Code-Processingではじめる自然現象のシミュレーション-ダニエル・シフマン/dp/4862462456

Die englische Version kann kostenlos von der folgenden Seite eingesehen werden.

https://natureofcode.com

Ich wünsche allen ein schönes Weihnachtsfest.