Je suis accro au traitement récemment. C'est [Akiyoshi] de S5 (https://twitter.com/pooh3akiyo3).
Aujourd'hui est le 14/12 ... C'est vrai K </ font> Li </ font> S </ font> Ma </ font> font> Su </ font> (pour la veille du festival)
Il reste 10 jours. Alors, j'aimerais bientôt préparer une carte de Noël!
Cette fois, je vais vous expliquer comment utiliser Processing, mais je vais aussi vous montrer ce que j'ai fait avec p5.js, qui était mon premier défi! Est-il bon d'essayer de nouvelles choses (˘ω˘)
Qu'est-ce que le traitement? ?? (En termes simples, un langage de programmation basé sur Java pour l'art et la conception électroniques) ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Traitement (officiel) https://processing.org/ Processing(Wiki) https://ja.wikipedia.org/wiki/Processing
En fait, l'environnement de développement Arduino que vous avez utilisé dans le cours du collège technique est basé sur le traitement. Similaire à l'environnement de développement Processing. Vous voyez, c'est très similaire!
Tout d'abord, quand il s'agit de Noël, n'est-ce pas?
Il a proliféré rapidement à partir de la fin novembre et est soudainement apparu à l'intérieur là où les arbres n'auraient pas dû pousser. Une arme stationnaire qui soutient la charge arrière et endommage le non-arrière.
Eh bien, c'est un arbre de Noël. (C'est une arme vraiment effrayante ...)
Mais sans cela, ce ne sera pas Noël, alors préparons-nous.
alors.... C'est l'arbre que j'ai préparé.
C'est un arbre, peu importe comment vous le regardez! C'est un sapin de Noël parfait qui brille bien! (pression)
(En fait, puisque le corps principal d'un arbre de Noël est un arbre, il est normal d'utiliser un célèbre arbre de fonctions récursives, non? J'ai fait de mon mieux, mais même dans l'arborescence de cette image, 3 ^ 12 = 531 441 fois la fonction est appelée et calculée. Si vous faites le dessin, le traitement sera très lourd, donc pour le moment, j'ai essayé de le rendre beau car c'est un arbre squishy ...)
C'est pourquoi j'ai décidé d'appeler cet arbre ordinaire un arbre de Noël (˘ω˘).
・ ・ ・ Hé, montre-moi le code!
Je comprends, ce sentiment. J'ai également trouvé le travail d'une autre personne en étudiant le traitement Eh ... qu'est-ce qui se passe avec ça? Je ne sais pas, je suis désolé! Je pense. Si c'est vrai, il vaudrait mieux penser par vous-même L'arbre récursif cette fois-ci est célèbre, je vais donc laisser la source telle quelle.
tree.pde
final int num = 12; //Nombre de récidives
final float angle = 120; //Angle de branche
final float amp = 0.5; //La longueur de la branche suivante est la moitié de celle de la branche précédente
float startx, starty; //Position initiale (racine)
float start_len = 200; //Longueur de la première branche
void setup() {
size(800, 800); //Taille de l'écran
frameRate(60); //60fps
background(0); //Rendre le fond noir
colorMode(HSB, 360, 100, 100, 100); //Utilisez HSB au lieu de RVB
blendMode(ADD); //Passez au mode à émettre lorsque les couleurs se chevauchent
stroke(210, 60, 90, 100); //Spécifiez la couleur de la ligne
translate(width/2, height);//Déplacer l'origine des coordonnées au centre de l'écran
startx=0; //Remplacez la position initiale (racine de l'arbre)
starty=0; //Remplacez la position initiale (racine de l'arbre)
tree(startx, starty, start_len, 0, 0); //Dessiner un arbre (fonction récursive)
}
void tree(float x, float y, float len, float stand, float step) {
float next_x, next_y; //Coordonnées du point à la pointe de la branche suivante
next_x = x + len * sin(radians(stand)); //Calculez les coordonnées de la pointe de la branche suivante
next_y = y - len * cos(radians(stand)); //Calculez les coordonnées de la pointe de la branche suivante
strokeWeight(num+1-step); //Réglez l'épaisseur de la ligne (devient plus mince vers la pointe)
if (step<num-1) {
stroke(0, 60, 50, 80); //Définir la couleur de la branche
} else {
stroke(120, 100, 100, 100); //Définissez la couleur de la branche au point le plus profond de chaque récurrence comme une feuille
}
line(x, y, next_x, next_y); //Dessinez une branche
if (step!=num) { //Appelez la fonction suivante si le nombre de récurrences spécifié n'a pas été atteint
tree(next_x, next_y, len * amp, stand - angle, step+1); //De la succursale actuelle-Calculez la branche suivante tournée de 120 degrés
tree(next_x, next_y, len * amp * 1.5, stand, step+1); //Calculez la branche suivante dans la même orientation que la branche actuelle
tree(next_x, next_y, len * amp, stand + angle, step+1); //Calculez la branche suivante tournée à 120 degrés de la branche actuelle
}
}
Pour expliquer brièvement ce que fait ce programme, Commencez par dessiner la première branche. À partir de la pointe de cette branche, les trois branches suivantes sont générées. A partir des trois branches générées, trois branches sont générées pour chacune. Ceci est répété le nombre de fois spécifié.
Vous pouvez le voir dans l'image ci-dessous. Voici à quoi ressemble l'arbre lorsque le processus ci-dessus est effectué trois fois. Le début est la branche brune en bas au centre de l'image. Vous pouvez voir que la branche est divisée en trois et que chacune des trois branches est divisée en trois branches vertes.
Eh bien, l'explication de l'arbre est facile Je veux de la neige la prochaine fois!
Quand il s'agit de Noël, c'est tout! Je pensais que je dirais Les cristaux de neige ont peu à voir avec Noël, non? Quoi J'ai remarqué en écrivant cet article ... (Mais j'ai déjà écrit le code source.)
C'est juste l'hiver, donc c'est la même heure que Noël. C'est joli, je suis sûr que c'est Noël Doit être une personne de Noël! !!
Alors, quand il s'agit de Noël, ça y est!
Si vous avez une bonne idée, vous l'avez peut-être remarqué. J'utilise ce cristal de neige, arbre. Au contraire, je viens de préparer six arbres en rotation et j'ai changé les couleurs.
Les cristaux de neige sont fabriqués à partir d'un arbre de Noël. Vous étiez une grande personne de Noël!
Alors Je vais aussi mettre ce code source.
<détails> <résumé> Code source du cristal de neige </ résumé>
snow_crystal.pde
final int num=4; //Nombre de récidives
final int corner=6; //Désignation comme cristal hexagonal
final float angle=360/corner;//Angle pour faire pivoter l'arbre
final float amp=0.4;//Définissez la longueur de la branche suivante lors du dessin d'un arbre
float startx, starty;//Position initiale
float start_len=100;//Première longueur de branche
void setup() {
size(800, 800);//Taille de l'écran
frameRate(60);//60fps
background(0);//Fond noir
colorMode(HSB, 360, 100, 100, 100);//Utilisez HSB au lieu de RVB
blendMode(ADD);//Mode qui émet de la lumière lorsque les couleurs se chevauchent
stroke(210, 60, 90, 100);//Couleur cristal
startx=0;//Position initiale
starty=0;//Position initiale
}
void draw() {
background(0); //Réinitialisation de l'écran
translate(width/2,height/2);//Déplacer l'origine au centre de l'écran
//rotate(radians(frameCount)); //Les cristaux de neige tournent
for(int i=0;i<corner;i++){ //Dessinez 6 arbres.
tree(startx, starty, start_len, 0, 0);//Dessinez un arbre.
rotate(2*PI/corner); //Tourner.
}
}
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);
}
}
Eh bien, le sapin de Noël et les cristaux de neige sont prêts Après tout, Noël a une meilleure ambiance quand il neige. Alors, faisons la neige ensuite.
Gacky "Je souhaite que toute la neige qui tombe soit un baiser mélancolique." 2018Ver https://www.youtube.com/watch?v=Zq9zf41dh0o
Je le pense aussi Si cela se produit, il semble que la sortie de population de Shizuoka se poursuivra à la recherche de Mel (Pee) Kiss.
Malheureusement, il n'y a rien de tel dans le traitement Au lieu de cela, supprimons l '«ellipse» utilisée pour dessiner le cercle dans Traitement.
Alors ↓ ↓ ↓ ici ↓ ↓ ↓ https://www.openprocessing.org/sketch/642846
C'est celui que j'ai fait. Il neige lorsque vous ouvrez l'URL. Le vent souffle avec les flèches gauche et droite du clavier.
Pour le moment, la neige à l'arrière doit être petite et se déplacer lentement pour qu'elle ressemble à de la 3D J'ai essayé d'exprimer la neige au premier plan plus large. Je laisse également le code source pour cela.
<détails>
snow_fall.pde
final float max_r=10; //Rayon maximum de neige
final float min_r=1; //Rayon minimum de neige
final float max_z=20; //Profondeur maximale
final float min_z=0; //Profondeur minimale
final float max_ys=3; //Vitesse de chute maximale
final float min_ys=1; //Vitesse de chute minimale
final int num=500; //Nombre de neige
float wind=0; //Force du vent
boolean flag=false; //Indicateur pour empêcher la saisie par double clé
Snow[] snows=new Snow[num]; //Tableau d'objets Snow
void setup() {
fullScreen(); //Exécuter en plein écran
frameRate(60); //60fps
noCursor(); //Effacez le curseur
background(0); //Le fond est noir
noSmooth(); //Désactivez la fonction pour dessiner un beau cercle (pour réduire le poids)
noStroke(); //N'utilisez pas de courbes de niveau
fill(255,100); //Peindre la neige en blanc
for (int i=0; i<num; i++) {
snows[i]=new Snow(i); //Génération de neige
}
}
void draw() {
background(0);//Réinitialisation de l'écran
for (int i=0; i<num; i++) {
snows[i].fall(wind); //Calcul des coordonnées de la neige
snows[i].show(); //Dessiner de la neige
}
}
class Snow{
float x;
float y;
float z;
float r; //Rayon de neige
float yspeed; //Vitesse de chute de neige
int my_num; //Quel nombre de neige a été généré
Snow(int i){
x=random(-width/2-wind*100,width+width/2-wind*100); //Coordonnées initiales aléatoires
y=random(-height,0); //Coordonnées initiales aléatoires
z=random(min_z,max_z); //Coordonnées initiales aléatoires
r=map(z,min_z,max_z,min_r,max_r); //Le rayon est déterminé par la taille de z
yspeed=map(z,min_z,max_z,min_ys,max_ys); //La vitesse de chute est déterminée par la taille de z
my_num = i; //Remplacez votre propre numéro de génération
}
void fall(float wind){
y=y+yspeed; //Les coordonnées suivantes sont les coordonnées actuelles plus la vitesse de chute
if(y>0){
x+=wind*map(z,min_z,max_z,0.3,1); //Si le vent souffle, la coordonnée suivante se déplacera dans la direction de l'axe X
}
if(frameCount%20==0){
x+=random(-1.5,1.5); //La neige tremble un peu
}
if(y>height){
snows[my_num]=new Snow(my_num); //Lorsque la neige atteint le sol, régénérez-la
}
}
void show(){
ellipse(x,y,r,r); //Tracez un cercle
}
}
void keyPressed(){ //Appelé automatiquement lorsqu'une touche est enfoncée
if(keyCode==RIGHT && flag==false && wind<10){ //Lorsque la flèche droite est enfoncée
wind++; //Force du vent vers la droite+1
flag=true;
}else if(keyCode==LEFT && flag==false && wind>-10){ //Lorsque la flèche gauche est enfoncée
wind--; //Force du vent vers la gauche+1
flag=true;
}
}
void keyReleased(){
flag=false;
}
Le mécanisme est simple. Générez 500 neige et calculez les coordonnées suivantes de 500 neige par image Lorsqu'elle tombe au bas de l'écran, régénérez la neige et laissez-la tomber du haut de l'écran. Répétez simplement ceci!
Eh bien, si tu arrives ici Combinons le sapin de Noël, les cristaux de neige et la neige dans un style de carte.
Oups, je t'ai dit de faire une carte de Noël Jusqu'à présent, la seule chose qui a un sentiment de Noël est le sapin de Noël J'ai remarqué.
Même si ça ressemble à une carte de Noël tel quel, ça ne ressemble pas à Noël Je veux dire, je n'ai pas le Père Noël? Je le pense. (Je pense aussi)
Mais je pense que l'important est qu'il dit Joyeux Noël Avec ça, ça doit être Noël.
Donc, au final, ça ressemble à ça.
Comme ça, quand j'ai écrit Joyeux Noël, c'est devenu comme Noël!
↓ ↓ URL du programme qui fonctionne réellement ↓ ↓ https://www.openprocessing.org/sketch/643638
Si vous utilisez un smartphone, la taille de l'écran n'est pas suffisante, alors ouvrez-le sur votre PC. Si vous appuyez plusieurs fois sur Entrée, un message apparaît. Utilisez les touches fléchées gauche et droite pour souffler le vent et déplacer la neige.
Le code source est ici.
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; //Variables de gestion des images
int num = 500;
float wind = 0;
boolean flag = false;
//animation
float x_L; //Coordonnées X des deux cristaux de neige à gauche
float tree_x, tree_y; //Coordonnées de l'arbre
int enter_count = 0; //Nombre de fois que la touche Entrée a été enfoncée
float fade = 0; //Utilisé pour l'effet que les personnages émergent progressivement
final float amp = 1.5; //Constante d'ajustement de la taille des cristaux de neige
Snow[] snows = new Snow[num];
void setup() {
fullScreen(P2D); //Mode plein écran,Le traitement devient plus léger en utilisant le P2D
frameRate(60);
noCursor();
background(0);
noSmooth();
noStroke();
tree = loadImage("tree.jpeg "); //Charger l'image de l'arborescence
crystal = loadImage("snow.jpeg "); //Chargez l'image des cristaux de neige
textSize(50);
textAlign(CENTER);
for (int i=0; i<num; i++) {
snows[i] = new Snow(i);
}
tree_x = width/2-340; //La position initiale de l'arbre 340 est la largeur de l'image
tree_y = height-787; //La position initiale de l'arbre 787 est la longueur de l'image
x_L = 100; //Positions initiales des deux cristaux de neige à gauche
}
void draw() {
background(0);
image(tree, tree_x, tree_y); //Afficher l'arbre
pushMatrix();//Enregistrer les axes actuels//Cristal de neige en haut à gauche
translate(x_L, 100); //Déplacer l'origine
scale(amp*sin(radians(frameCount*0.5))); //Agrandir les axes
rotate(radians(frameCount*0.5)); //Faire pivoter les axes
image(crystal, -100, -100, 200, 200); //Afficher les cristaux de neige
popMatrix(); //Revenir aux axes enregistrés
pushMatrix(); //Cristal de neige en haut à droite
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(); //Cristal de neige en bas à gauche
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(); //Cristal de neige en bas à droite
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); //Couleur de la neige
for (int i=0; i<num; i++) {
snows[i].fall(wind);
snows[i].show();
}
Message(); //Fonction pour afficher un message
}
void Message() {
if (enter_count==1) { //Lorsque la touche Entrée est enfoncée une fois
x_L = width/2; //Changez les coordonnées des deux cristaux de neige sur la gauche
tree_x = width/10-340; //Modifier les coordonnées de l'arborescence
} else if (enter_count==2) { //Lorsque la touche Entrée est enfoncée deux fois
fill(255, 0, 0, fade); //Couleur du texte
text("Merry Christmas!!", (width/2+width-100)/2, height*4/10); //Afficher le message
fade++; //Augmenter progressivement la densité des lettres
} 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; //Ramène le compte à 0 lorsque la touche Entrée est enfoncée 6 fois
x_L = 100; //Remettez les deux cristaux de neige sur la gauche à leur position initiale
tree_x = width/2-340; //Remettre l'arborescence à sa position initiale
}
}
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) { //Appelé lorsque vous appuyez sur Entrée
enter_count++; //Augmentez le nombre de fois où Enter est pressé de 1.
fade=0; //Remettre la densité du texte à 0
}
}
void keyReleased() {
flag=false;
}
C'est comme ça. Le mécanisme est simple, il suffit de dessiner le sapin de Noël. Les cristaux de neige ne peuvent être redimensionnés qu'à l'aide de l'échelle () lors de la rotation image par image. Pour la neige qui tombe, utilisez le programme neige tel quel. Les caractères deviennent progressivement plus sombres, et la seule chose qui semble apparaître est que les caractères sont passés de translucides à non transparents pour chaque image.
Lisez le code source, ça? Utilisez-vous des images? ?? Je pense que certaines personnes l'ont remarqué.
C'est vrai, j'ai écrit un programme pour dessiner à la fois des arbres de Noël et des cristaux de neige jusqu'à présent, mais quand je regarde ce code source, ces deux sont des images et celles qui sont principalement utilisées sont des programmes qui neige. seulement.
Il y a une raison pour cela. Pour résumer brièvement, la quantité de calcul pour les arbres de Noël et les cristaux de neige est incroyable. Si vous les déplacez tous ensemble, le traitement sera lourd et la neige qui tombe deviendra molle! En premier lieu, l'arbre et les cristaux de neige ne bougent pas en particulier, alors n'est-il pas trop inutile de recalculer pour dessiner chaque image? ??
Donc, cette fois, j'ai fait une image de l'arbre et des cristaux de neige que j'ai faits. Si vous ne l'aimez vraiment pas, je pense que vous ne pouvez rien faire si vous avez un très bon ordinateur.
Cependant, je pense que c'est bon pour ceux qui sont nouveaux dans le traitement car ce sera une pratique de gérer les images.
Avec ce genre de sentiment, une chose semblable à une carte de Noël a été créée. Ne serait-ce pas une carte si elle était davantage imagée et imprimée? Si vous le portez vers p5.js, téléchargez-le sur Open Processing, et donnez l'URL à vos amis, vous pouvez le donner comme une carte de Noël fonctionnelle!
J'écris généralement le code source de manière appropriée et je crée des choses intéressantes qui sont nées par hasard. C'était difficile de faire quelque chose comme un arbre de Noël ou de la neige en pensant à faire quelque chose (˘ω˘)
Au fait, si vous jouez avec le code source que vous avez créé cette fois comme d'habitude L'arbre de Noël ressemble à ceci.
Les cristaux de neige ressemblent à ça
De plus, ce sera comme ça.
Après tout, c'est amusant de jouer avec le code source et de créer quelque chose d'intéressant! !! Tout le monde, veuillez essayer Traitement!
Recommended Posts