Ich bin in letzter Zeit süchtig nach Verarbeitung. Es ist [Akiyoshi] von S5 (https://twitter.com/pooh3akiyo3).
Heute ist der 14.12. ... das stimmt ku </ font> re </ font> su </ font> ma </ font> font> So </ font> (am Vorabend des Festivals)
Es sind noch 10 Tage übrig. Also, ich möchte bald eine Weihnachtskarte vorbereiten!
Dieses Mal werde ich die Verwendung von Processing erklären, aber ich werde Ihnen auch zeigen, was ich mit p5.js gemacht habe, was meine erste Herausforderung war! Ist es gut, neue Dinge auszuprobieren (˘ω˘)
Was ist Verarbeitung? ?? (Einfach gesagt, eine Java-basierte Programmiersprache für elektronische Kunst und Design) ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Verarbeitung (offiziell) https://processing.org/ Processing(Wiki) https://ja.wikipedia.org/wiki/Processing
Tatsächlich basiert die Arduino-Entwicklungsumgebung, die Sie in der technischen College-Klasse verwendet haben, auf der Verarbeitung. Ähnlich wie in der Entwicklungsumgebung Processing. Sie sehen, es ist sehr ähnlich!
Zuallererst, wenn es um Weihnachten geht, nicht wahr?
Ab Ende November vermehrte es sich rasch und tauchte plötzlich in Innenräumen auf, in denen keine Bäume hätten wachsen dürfen. Eine stationäre Waffe, die die Heckladung unterstützt und das Nicht-Heck beschädigt.
Nun, es ist ein Weihnachtsbaum. (Es ist eine wirklich beängstigende Waffe ...)
Aber ohne das wird es nicht Weihnachten, also lasst uns vorbereiten.
damit.... Dies ist der Baum, den ich vorbereitet habe.
Es ist ein Baum, egal wie du ihn betrachtest! Es ist ein perfekter Weihnachtsbaum, der schön leuchtet! (Druck)
(Da der Hauptteil eines Weihnachtsbaums ein Baum ist, ist es in Ordnung, einen berühmten rekursiven Funktionsbaum zu verwenden, oder? Ich habe mein Bestes versucht, aber selbst im Baum dieses Bildes ist das 3 ^ 12 = 531.441-fache der Funktion aufgerufen und berechnet. Wenn Sie zeichnen, wird die Verarbeitung sehr schwer sein, daher habe ich vorerst versucht, sie schön aussehen zu lassen, da es sich um einen matschigen Baum handelt ...)
Deshalb habe ich beschlossen, diesen gewöhnlichen Baum einen Weihnachtsbaum (˘ω˘) zu nennen.
・ ・ ・ Hey, zeig mir den Code!
Ich verstehe dieses Gefühl. Ich habe auch die Arbeit einer anderen Person gefunden, als ich Processing studiert habe Eh ... was ist damit los? Ich weiß nicht, es tut mir leid! Ich denke. Wenn das stimmt, ist es besser, selbst zu denken Der rekursive Baum ist diesmal berühmt, also lasse ich die Quelle so wie sie ist.
tree.pde
final int num = 12; //Anzahl der Wiederholungen
final float angle = 120; //Verzweigungswinkel
final float amp = 0.5; //Die Länge des nächsten Zweigs ist halb so groß wie die des vorherigen Zweigs
float startx, starty; //Ausgangsposition (Wurzel)
float start_len = 200; //Erste Astlänge
void setup() {
size(800, 800); //Bildschirmgröße
frameRate(60); //60fps
background(0); //Machen Sie den Hintergrund schwarz
colorMode(HSB, 360, 100, 100, 100); //Verwenden Sie HSB anstelle von RGB
blendMode(ADD); //Wechseln Sie in den Modus, der ausgegeben werden soll, wenn sich die Farben überlappen
stroke(210, 60, 90, 100); //Geben Sie die Linienfarbe an
translate(width/2, height);//Verschieben Sie den Ursprung der Koordinaten in die Mitte des Bildschirms
startx=0; //Ersetzen Sie die Anfangsposition (Baumwurzel)
starty=0; //Ersetzen Sie die Anfangsposition (Baumwurzel)
tree(startx, starty, start_len, 0, 0); //Einen Baum zeichnen (rekursive Funktion)
}
void tree(float x, float y, float len, float stand, float step) {
float next_x, next_y; //Koordinaten des Punktes an der Spitze des nächsten Zweigs
next_x = x + len * sin(radians(stand)); //Berechnen Sie die Spitzenkoordinaten des nächsten Zweigs
next_y = y - len * cos(radians(stand)); //Berechnen Sie die Spitzenkoordinaten des nächsten Zweigs
strokeWeight(num+1-step); //Stellen Sie die Linienstärke ein (wird zur Spitze hin dünner)
if (step<num-1) {
stroke(0, 60, 50, 80); //Stellen Sie die Zweigfarbe ein
} else {
stroke(120, 100, 100, 100); //Stellen Sie die Farbe des Zweigs am tiefsten Punkt jeder Wiederholung als Blatt ein
}
line(x, y, next_x, next_y); //Zeichne einen Zweig
if (step!=num) { //Rufen Sie die nächste Funktion auf, wenn die angegebene Anzahl von Rekursionen nicht erreicht wurde
tree(next_x, next_y, len * amp, stand - angle, step+1); //Aus dem aktuellen Zweig-Berechnen Sie den nächsten um 120 Grad gedrehten Zweig
tree(next_x, next_y, len * amp * 1.5, stand, step+1); //Berechnen Sie den nächsten Zweig in derselben Ausrichtung wie den aktuellen Zweig
tree(next_x, next_y, len * amp, stand + angle, step+1); //Berechnen Sie den nächsten um 120 Grad vom aktuellen Zweig gedrehten Zweig
}
}
Um kurz zu erklären, was dieses Programm tut, Zeichnen Sie zuerst den ersten Zweig. Aus der Spitze dieses Zweigs werden die nächsten drei Zweige generiert. Aus den drei generierten Zweigen werden jeweils drei Zweige generiert. Dies wird die angegebene Anzahl von Malen wiederholt.
Sie können es im Bild unten sehen. So sieht der Baum aus, wenn der obige Vorgang dreimal ausgeführt wird. Der Anfang ist der braune Zweig in der unteren Bildmitte. Sie können sehen, dass der Zweig in drei Zweige unterteilt ist und jeder der drei Zweige weiter in drei grüne Zweige unterteilt ist.
Nun, die Erklärung des Baumes ist einfach Ich will das nächste Mal Schnee!
Wenn es um Weihnachten geht, ist es das! Ich dachte ich würde sagen Schneekristalle haben wenig mit Weihnachten zu tun, oder? Was Ich habe beim Schreiben dieses Artikels bemerkt ... (Aber ich habe den Quellcode bereits geschrieben.)
Es ist nur Winter, also ist es die gleiche Zeit wie Weihnachten. Es ist hübsch, ich bin sicher, es ist Weihnachten Muss ein Weihnachtsmensch sein! !!
Also, wenn es um Weihnachten geht, ist es das!
Wenn Sie eine gute Idee haben, haben Sie vielleicht bemerkt. Ich benutze diesen Schneekristall, Baum. Vielmehr habe ich gerade sechs gedrehte Bäume vorbereitet und die Farben geändert.
Schneekristalle werden aus einem Weihnachtsbaum hergestellt. Du warst ein toller Weihnachtsmensch!
Damit Ich werde diesen Quellcode auch setzen.
snow_crystal.pde
final int num=4; //Anzahl der Wiederholungen
final int corner=6; //Bezeichnung als sechseckiger Kristall
final float angle=360/corner;//Winkel zum Drehen des Baumes
final float amp=0.4;//Stellen Sie die Länge des nächsten Zweigs ein, wenn Sie einen Baum zeichnen
float startx, starty;//Ausgangsposition
float start_len=100;//Frühe Astlänge
void setup() {
size(800, 800);//Bildschirmgröße
frameRate(60);//60fps
background(0);//Schwarzer Hintergrund
colorMode(HSB, 360, 100, 100, 100);//Verwenden Sie HSB anstelle von RGB
blendMode(ADD);//Modus, der Licht emittiert, wenn sich die Farben überlappen
stroke(210, 60, 90, 100);//Kristallfarbe
startx=0;//Ausgangsposition
starty=0;//Ausgangsposition
}
void draw() {
background(0); //Bildschirm zurückgesetzt
translate(width/2,height/2);//Verschieben Sie den Ursprung in die Mitte des Bildschirms
//rotate(radians(frameCount)); //Schneekristalle drehen sich
for(int i=0;i<corner;i++){ //Zeichne 6 Bäume.
tree(startx, starty, start_len, 0, 0);//Zeichne einen Baum.
rotate(2*PI/corner); //Drehen.
}
}
void tree(float x, float y, float len, float stand, float step) {
float next_x, next_y;
next_x=x + len * sin(radians(stand));
next_y=y - len * cos(radians(stand));
strokeWeight(num+1-step);
line(x, y, next_x, next_y);
if (step!=num) {
tree(next_x, next_y, len * amp, stand - angle, step+1);
tree(next_x, next_y, len * amp * 2, stand, step+1);
tree(next_x, next_y, len * amp, stand + angle, step+1);
}
}
Nun, der Weihnachtsbaum und die Schneekristalle sind fertig Weihnachten hat schließlich eine bessere Atmosphäre, wenn es schneit. Also, lass es uns als nächstes schneien.
Gacky "Ich wünschte, der ganze fallende Schnee wäre ein Mel-Kuss." 2018Ver https://www.youtube.com/watch?v=Zq9zf41dh0o
Das denke ich auch In diesem Fall scheint der Bevölkerungsabfluss aus Shizuoka auf der Suche nach Mel (Pee) Kiss fortzusetzen.
Leider gibt es so etwas in der Verarbeitung nicht Lassen Sie stattdessen die "Ellipse" fallen, mit der der Kreis in der Verarbeitung gezeichnet wird.
Damit ↓ ↓ ↓ hier ↓ ↓ ↓ https://www.openprocessing.org/sketch/642846
Dies ist die, die ich tatsächlich gemacht habe. Es schneit, wenn Sie die URL öffnen. Der Wind weht mit den linken und rechten Pfeilen auf der Tastatur.
Vorerst sollte der Schnee im Hintergrund klein sein und sich langsam bewegen, damit er wie 3D aussieht Ich habe versucht, den Schnee im Vordergrund größer auszudrücken. Ich werde den Quellcode auch dafür belassen.
snow_fall.pde
final float max_r=10; //Maximaler Schneeradius
final float min_r=1; //Minimaler Schneeradius
final float max_z=20; //Maximale Tiefe
final float min_z=0; //Minimale Tiefe
final float max_ys=3; //Maximale Fallgeschwindigkeit
final float min_ys=1; //Minimale Fallgeschwindigkeit
final int num=500; //Anzahl der Schnee
float wind=0; //Windstärke
boolean flag=false; //Flag, um die Eingabe von Doppelschlüsseln zu verhindern
Snow[] snows=new Snow[num]; //Schneeobjekt-Array
void setup() {
fullScreen(); //Im Vollbildmodus ausführen
frameRate(60); //60fps
noCursor(); //Löschen Sie den Cursor
background(0); //Der Hintergrund ist schwarz
noSmooth(); //Schalten Sie die Funktion aus, um einen schönen Kreis zu zeichnen (zur Gewichtsreduzierung).
noStroke(); //Verwenden Sie keine Konturlinien
fill(255,100); //Malen Sie den Schnee in Weiß
for (int i=0; i<num; i++) {
snows[i]=new Snow(i); //Schneeerzeugung
}
}
void draw() {
background(0);//Bildschirm zurückgesetzt
for (int i=0; i<num; i++) {
snows[i].fall(wind); //Schneekoordinatenberechnung
snows[i].show(); //Schnee zeichnen
}
}
class Snow{
float x;
float y;
float z;
float r; //Schneeradius
float yspeed; //Schneefallgeschwindigkeit
int my_num; //Welche Anzahl von Schnee wurde erzeugt
Snow(int i){
x=random(-width/2-wind*100,width+width/2-wind*100); //Zufällige Anfangskoordinaten
y=random(-height,0); //Zufällige Anfangskoordinaten
z=random(min_z,max_z); //Zufällige Anfangskoordinaten
r=map(z,min_z,max_z,min_r,max_r); //Der Radius wird durch die Größe von z bestimmt
yspeed=map(z,min_z,max_z,min_ys,max_ys); //Die Fallgeschwindigkeit wird durch die Größe von z bestimmt
my_num = i; //Ersetzen Sie Ihre eigene Generationsnummer
}
void fall(float wind){
y=y+yspeed; //Die folgenden Koordinaten sind die aktuellen Koordinaten plus die Fallgeschwindigkeit
if(y>0){
x+=wind*map(z,min_z,max_z,0.3,1); //Wenn der Wind weht, bewegt sich die nächste Koordinate in Richtung der X-Achse
}
if(frameCount%20==0){
x+=random(-1.5,1.5); //Der Schnee zittert ein wenig
}
if(y>height){
snows[my_num]=new Snow(my_num); //Wenn der Schnee den Boden erreicht, regenerieren Sie ihn
}
}
void show(){
ellipse(x,y,r,r); //Zeichne einen Kreis
}
}
void keyPressed(){ //Wird automatisch aufgerufen, wenn eine Taste gedrückt wird
if(keyCode==RIGHT && flag==false && wind<10){ //Wenn der Rechtspfeil gedrückt wird
wind++; //Windstärke nach rechts+1
flag=true;
}else if(keyCode==LEFT && flag==false && wind>-10){ //Wenn der linke Pfeil gedrückt wird
wind--; //Windstärke nach links+1
flag=true;
}
}
void keyReleased(){
flag=false;
}
Der Mechanismus ist einfach. Generieren Sie 500 Schnee und berechnen Sie die nächsten Koordinaten von 500 Schnee pro Frame Wenn es auf den unteren Bildschirmrand fällt, regenerieren Sie den Schnee und lassen Sie ihn vom oberen Bildschirmrand fallen. Wiederholen Sie dies einfach!
Na wenn du hier bist Kombinieren wir den Weihnachtsbaum, die Schneekristalle und den Schnee zu einem kartenartigen Stil.
Ups, ich habe dir gesagt, du sollst eine Weihnachtskarte machen Bisher ist der Weihnachtsbaum das einzige, was ein Weihnachtsgefühl hat Ich habe bemerkt.
Auch wenn es wie eine Weihnachtskarte aussieht, fühlt es sich nicht wie Weihnachten an Ich meine, ich habe keinen Weihnachtsmann? Ich glaube schon. (Ich stimme mit Ihnen ein)
Aber ich denke, das Wichtigste ist, dass dort Frohe Weihnachten steht Damit muss Weihnachten sein.
Am Ende sieht es also so aus.
So, als ich Frohe Weihnachten schrieb, wurde es wie Weihnachten!
↓ ↓ URL des Programms, das tatsächlich funktioniert ↓ ↓ https://www.openprocessing.org/sketch/643638
Wenn Sie ein Smartphone verwenden, reicht die Bildschirmgröße nicht aus. Öffnen Sie es daher auf Ihrem PC. Wenn Sie mehrmals die Eingabetaste drücken, wird eine Meldung angezeigt. Verwenden Sie die linke und rechte Pfeiltaste, um den Wind zu blasen und den Schnee zu bewegen.
Der Quellcode ist hier.
christmas.pde
final float max_r = 10;
final float min_r = 1;
final float max_z = 20;
final float min_z = 0;
final float max_ys = 3;
final float min_ys = 1;
PImage tree, crystal; //Variablen für den Umgang mit Bildern
int num = 500;
float wind = 0;
boolean flag = false;
//animation
float x_L; //X-Koordinaten der beiden Schneekristalle links
float tree_x, tree_y; //Baumkoordinaten
int enter_count = 0; //Häufigkeit, mit der die Eingabetaste gedrückt wurde
float fade = 0; //Wird für den Effekt verwendet, dass Zeichen allmählich auftauchen
final float amp = 1.5; //Konstante zum Einstellen der Größe von Schneekristallen
Snow[] snows = new Snow[num];
void setup() {
fullScreen(P2D); //Vollbildmodus,Die Verarbeitung wird durch die Verwendung von P2D leichter
frameRate(60);
noCursor();
background(0);
noSmooth();
noStroke();
tree = loadImage("tree.jpeg "); //Baumbild laden
crystal = loadImage("snow.jpeg "); //Laden Sie das Bild von Schneekristallen
textSize(50);
textAlign(CENTER);
for (int i=0; i<num; i++) {
snows[i] = new Snow(i);
}
tree_x = width/2-340; //Die Anfangsposition des Baumes 340 ist die Breite des Bildes
tree_y = height-787; //Die Anfangsposition des Baumes 787 ist die Länge des Bildes
x_L = 100; //Ausgangspositionen der beiden Schneekristalle links
}
void draw() {
background(0);
image(tree, tree_x, tree_y); //Baum anzeigen
pushMatrix();//Aktuelle Achsen speichern//Schneekristall oben links
translate(x_L, 100); //Verschieben Sie den Ursprung
scale(amp*sin(radians(frameCount*0.5))); //Vergrößern Sie die Achsen
rotate(radians(frameCount*0.5)); //Drehen Sie die Achsen
image(crystal, -100, -100, 200, 200); //Schneekristalle anzeigen
popMatrix(); //Kehren Sie zu den gespeicherten Achsen zurück
pushMatrix(); //Schneekristall oben rechts
translate(width-100, 100);
scale(amp*sin(radians(frameCount*0.5)-PI/2));
rotate(radians(frameCount*0.5));
image(crystal, -100, -100, 200, 200);
popMatrix();
pushMatrix(); //Schneekristall unten links
translate(x_L, height-100);
scale(amp*sin(radians(frameCount*0.5)-PI/2*3));
rotate(radians(frameCount*0.5));
image(crystal, -100, -100, 200, 200);
popMatrix();
pushMatrix(); //Schneekristall unten rechts
translate(width-100, height-100);
scale(amp*sin(radians(frameCount*0.5)-PI));
rotate(radians(frameCount/2));
image(crystal, -100, -100, 200, 200);
popMatrix();
fill(230, 200); //Schneefarbe
for (int i=0; i<num; i++) {
snows[i].fall(wind);
snows[i].show();
}
Message(); //Funktion zum Anzeigen einer Nachricht
}
void Message() {
if (enter_count==1) { //Wenn die Eingabetaste einmal gedrückt wird
x_L = width/2; //Ändern Sie die Koordinaten der beiden Schneekristalle links
tree_x = width/10-340; //Baumkoordinaten ändern
} else if (enter_count==2) { //Wenn die Eingabetaste zweimal gedrückt wird
fill(255, 0, 0, fade); //Textfarbe
text("Merry Christmas!!", (width/2+width-100)/2, height*4/10); //Nachricht anzeigen
fade++; //Erhöhen Sie schrittweise die Dichte der Buchstaben
} else if (enter_count==3) {
fill(255, 0, 0);
text("Merry Christmas!!", (width/2+width-100)/2, height*4/10);
fill(255, 0, 0, fade);
text("Enjoy Processing", (width/2+width-100)/2, height*6/10);
fade++;
} else if (enter_count==4) {
fill(255, 0, 0);
text("Merry Christmas!!", (width/2+width-100)/2, height*4/10);
fill(255, 0, 0);
text("Enjoy Processing", (width/2+width-100)/2, height*6/10);
fill(255, 0, 0,fade);
textSize(30);
text("by Akiyoshi", (width/2+width-100)/2, height*8/10);
textSize(50);
fade++;
}else if(enter_count==5){
fill(255, 0, 0);
text("Merry Christmas!!", (width/2+width-100)/2, height*4/10);
fill(255, 0, 0);
text("Enjoy Processing", (width/2+width-100)/2, height*6/10);
fill(255, 0, 0);
textSize(30);
text("by Akiyoshi", (width/2+width-100)/2, height*8/10);
textSize(50);
}else if(enter_count==6){
enter_count=0; //Setzt den Zählerstand auf 0 zurück, wenn die Eingabetaste sechsmal gedrückt wird
x_L = 100; //Bringen Sie die beiden Schneekristalle links wieder in ihre Ausgangsposition
tree_x = width/2-340; //Setzen Sie den Baum in seine Ausgangsposition zurück
}
}
class Snow{
float x;
float y;
float z;
float r;
float yspeed;
int my_num;
Snow(int i){
x=random(-width/2-wind*100,width+width/2-wind*100);
y=random(-height,0);
z=random(min_z,max_z);
r=map(z,min_z,max_z,min_r,max_r);
yspeed=map(z,min_z,max_z,min_ys,max_ys);
my_num = i;
}
void fall(float wind){
y=y+yspeed;
if(y>0){
x+=wind*map(z,min_z,max_z,0.3,1);
}
if(frameCount%20==0){
x+=random(-1.5,1.5);
}
if(y>height){
snows[my_num] = new Snow(my_num);
}
}
void show(){
ellipse(x,y,r,r);
}
}
void keyPressed() {
if (keyCode==RIGHT && flag==false && wind<10) {
wind++;
flag=true;
} else if (keyCode==LEFT && flag==false && wind>-10) {
wind--;
flag=true;
}
if (keyCode==ENTER) { //Wird aufgerufen, wenn die Eingabetaste gedrückt wird
enter_count++; //Erhöhen Sie die Häufigkeit, mit der die Eingabetaste gedrückt wird, um 1.
fade=0; //Setzen Sie die Textdichte auf 0 zurück
}
}
void keyReleased() {
flag=false;
}
Es ist so. Der Mechanismus ist einfach, zeichnen Sie einfach den Weihnachtsbaum. Schneekristalle können nur mit scale () in der Größe geändert werden, während sie Frame für Frame gedreht werden. Verwenden Sie für den fallenden Schnee das Schneeprogramm so wie es ist. Die Zeichen werden allmählich dunkler, und das einzige, was zu erscheinen scheint, ist, dass die Zeichen für jeden Frame von durchscheinend zu nicht transparent geändert werden.
Lesen Sie den Quellcode, das? Verwenden Sie Bilder? ?? Ich denke, einige Leute haben das bemerkt.
Das stimmt, ich habe bisher ein Programm zum Zeichnen von Weihnachtsbäumen und Schneekristallen geschrieben, aber wenn ich mir diesen Quellcode anschaue, sind diese beiden Bilder und diejenigen, die hauptsächlich verwendet werden, sind Programme, die schneien. nur.
Dafür gibt es einen Grund. Kurz zusammengefasst ist der Rechenaufwand für Weihnachtsbäume und Schneekristalle erstaunlich. Wenn Sie sie alle zusammen bewegen, ist die Verarbeitung schwer und der fallende Schnee wird matschig! Erstens bewegen sich die Baum- und Schneekristalle nicht besonders. Ist es also nicht zu verschwenderisch, sie neu zu berechnen, um jeden Rahmen zu zeichnen? ??
Also habe ich diesmal ein Bild von dem Baum und den Schneekristallen gemacht, die ich gemacht habe. Wenn es dir wirklich nicht gefällt, gibt es nichts, was du nicht tun kannst, wenn du einen ziemlich guten Computer hast.
Ich denke jedoch, dass es gut für diejenigen ist, die neu in der Verarbeitung sind, da es eine Praxis sein wird, mit Bildern umzugehen.
Mit diesem Gefühl wurde eine weihnachtskartenähnliche Sache gemacht. Wäre es nicht eine Karte, wenn diese weiter abgebildet und gedruckt würde? Wenn Sie es auf p5.js portieren, es auf Open Processing hochladen und Ihren Freunden die URL geben, können Sie es als funktionierende Weihnachtskarte geben!
Normalerweise schreibe ich den Quellcode angemessen und mache interessante Dinge, die zufällig geboren wurden. Es war schwer, etwas wie Weihnachtsbaum oder Schnee zu machen, während man darüber nachdachte, etwas zu machen (˘ω˘)
Übrigens, wenn Sie mit dem Quellcode spielen, haben Sie diesmal wie gewohnt gemacht Der Weihnachtsbaum sieht so aus.
Schneekristalle sehen so aus
Außerdem wird es so sein.
Schließlich macht es Spaß, mit dem Quellcode zu spielen und etwas zu machen, das interessant aussieht! !! Jeder, bitte versuchen Sie es mit Verarbeitung!
Recommended Posts