[PYTHON] Einführung in die Verarbeitung und p5.js (für diejenigen, die andere Sprachen beherrschen) 01

Was ist Verarbeitung?

Sprachen und IDEs, die sich gut mit interaktiver Kunst und Werken auskennen und häufig für Medienkunst verwendet werden

Charakteristisch

――Sie können Arbeiten ausführen, die sich sehr leicht bewegen lassen

• Gut bei Prototypen ――Es ist so einfach, eine Umgebung aufzubauen

Eine sehr lustige Sprache, ich bin in dieser Sprache in einen Programmiersumpf gefallen. Zum Beispiel, was gemacht werden kann (es gibt auch eine Bibliothek namens gifExport, aber das Verhalten ist seltsam, also nehme ich den Bildschirm auf)

Der umgebende Kreis dreht sich, wenn sich die Maus bewegt. Es sieht wegen der verdammten Bildrate überhaupt nicht hübsch aus.

Quellcode

Der Quellcode wird so einfach sein. (Es ist schmutzig, weil die Person, die den Code schreibt, fickt) Schreiben Sie in Draw, was Sie beim Einrichten des Ereignisses wiederholen möchten, das zu Beginn nur einmal auftritt. Es basiert auf Java, sodass Sie sich sofort daran gewöhnen können void setup() Wann void draw()

Aufgrund der Art der Funktion nimmt die Anzahl der globalen Variablen tendenziell zu.

kurukuru.pde

float[] x, y, pX, pY;
float[] distance;
float[] gapTheata;
color[] c;

final int n = 200;

void setup(){
  size(1000, 1000);
  background(255);
  colorMode(HSB);
  
  x = new float[n];
  y = new float[n];
  pX = new float[n];
  pY = new float[n];
  distance = new float[n];
  gapTheata = new float[n];
  c = new color[n];
  
  for(int i = 0; i < n; i++){
    x[i] = y[i] = pX[i] = pY[i] = 30;
    distance[i] = random(15, 150);
    gapTheata[i] = random(-PI, PI);
    c[i] = color(random(255), 255, 255, random(255));
  }
  
}

void draw(){
  background(255);
  noStroke();
  colorMode(HSB);
  
  for(int i = 0; i < n; i++){
    fill(c[i]);
    float theata = radians(frameCount*5.0) + gapTheata[i];
    float dist =distance[i] + 90.0*noise(theata/1.0, frameCount/100.0, i);
    x[i] = (mouseX + dist*cos(theata) + pX[i])/2.0;
    y[i] = (mouseY + dist*sin(theata) + pY[i])/2.0;
    pushMatrix();
    translate(x[i], y[i]);
    ellipse(0, 0, 20, 20);
    popMatrix();
    pX[i] = x[i]; pY[i] = y[i];
  }

  colorMode(RGB);
  fill(0);
  ellipse(mouseX, mouseY, 40, 40);
}

Ich werde die ausführliche Erklärung weglassen.

Interessante Dinge

• noise(w, x, y, z)
• Gibt einen Wert zwischen 0 und 1 zurück.
• Alles andere als w. ――Ich denke, es ist in Ordnung zu denken, dass Rauschausdrücke wie Wellen hinzugefügt werden, während die Kontinuität erhalten bleibt (zufällig ist diskontinuierlich, Rauschen ist kontinuierlich).
• Wenn Sie einen festen Wert angeben, wird ein fester Wert zurückgegeben. ――Wenn Sie den Wert sofort ändern, unterscheidet sich der Wert vollständig vom vorherigen Frame.

• pushMatrix() popMatrix()
• Speichern oder wiederherstellen Sie den aktuellen Koordinatenstatus

• colorMode()
• Sie können zwischen HSB und RGB wechseln (ich habe noch nie etwas anderes gesehen). Sie können auch andere Argumente angeben, um die Obergrenze des Werts zu ändern.

• color
• Bei einem Typ, der die Farbe beibehält, können Sie die im obigen Farbmodus deklarierte Farbe verwenden. Sie können auch α-Kanäle hinzufügen

• frameCount ――Es wird die aktuelle Anzahl von Frames haben. Es kann verwendet werden, wenn Sie etwas machen möchten, das sich ständig ändert. Sie können auch aus irgendeinem Grund ersetzen.

Ich möchte ins Web portieren

Dann, als ich dies ins Web portieren wollte ** Sie können p5.js verwenden **

Lassen Sie uns dies ins Web portieren. (Im nächsten Artikel)