[JAVA] Faisons une carte de Noël avec Processing!

Préface

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. window.jpeg Vous voyez, c'est très similaire!

Chapitre 1 L'arbre de Noël est un "arbre ordinaire".

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é. tree.jpeg

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.

Code source de l'arbre de Noël

Code source de l'arborescence ← Cliquez pour ouvrir le code source

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. tree_small.jpeg 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!

Chapitre 2 Les cristaux de neige sont des "arbres ordinaires" x 6.

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! snow.jpeg

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.

Code source du cristal de neige

<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.

Chapitre 3 Si toute la neige qui tombe est une ellipse.

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.

snow_fall.jpeg

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.

Code source de la neige

<détails>

Code source Snow </ summary>

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.

Le dernier chapitre est Joyeux Noël.

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.

christmascard_1.jpeg

christmas_photo.jpeg

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.

Code source de la carte de Noël

Code source du style de carte de Noël

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.

la fin

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. tree_2.jpeg

Les cristaux de neige ressemblent à ça yuki.jpeg

De plus, ce sera comme ça. yuki2.jpeg

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