Si vous n'écrivez généralement que des programmes de manipulation de données et d'interface utilisateur, vous souhaitez parfois écrire des programmes qui n'ont rien à voir avec votre travail. C'est pourquoi cette fois, dessinons une petite image de Noël avec Processing.

Qu'est-ce que le traitement

Processing est un langage de programmation et un environnement de développement intégré pour l'art électronique et la conception visuelle. Cela peut sembler un peu difficile à écrire comme ça, mais je pense que ce n'est pas grave si vous y réfléchissez suffisamment pour dessiner une image en écrivant un programme. Puisque les changements provoqués par le programme écrit peuvent être vus immédiatement, la différence dans les résultats d'exécution est plus facile à comprendre que le programme qui manipule les données.

Le traitement se fait en Java, et le programme est essentiellement écrit en Java, mais il peut également être écrit en Python ou JavaScript en ajoutant un mode. Essayez Processing dans le langage de programmation qui vous intéresse.

Installons

Pour installer Processing, téléchargez simplement le fichier ZIP à partir de la page ci-dessous, décompressez-le, puis double-cliquez sur Processing.exe sur Windows ou Processing.app sur Mac.

https://processing.org/download/

Lorsque vous démarrez le traitement, l'IDE suivant s'affiche.

Dessinons quelque chose à la fois. Copiez le programme ci-dessous, collez-le dans l'EDI et exécutez-le. Exécuter est le bouton avec le triangle en haut à gauche.

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

Si vous voyez quelque chose comme ça, vous réussissez. Le programme dessine simplement des cercles sur chaque pièce pour remplir ou dessiner des lignes. L'image change en changeant la valeur numérique de chaque partie, essayons donc diverses choses.

Exemple de programme

Cette fois, je ne mentionnerai pas comment écrire un programme de traitement. Vous pouvez trouver de nombreuses façons d'écrire des programmes de traitement et des exemples en effectuant une recherche sur le Web. En copiant ou en réécrivant le programme exemple et en le déplaçant, vous comprendrez bientôt comment écrire le programme, il est donc recommandé d'essayer de déplacer beaucoup le programme exemple. Voici quelques exemples de programmes.

éclairage

Si c'est Noël et que vous sentez que la pièce est sombre, transformez l'écran de votre PC en illuminations de Noël. Essayez d'ajuster la zone de dessin du programme d'exemple et la taille du cercle pour rendre l'affichage magnifique. Tout ce que je fais, c'est dessiner en changeant les coordonnées, la taille du cercle, la couleur et la transparence avec des nombres aléatoires. setup () est exécuté une seule fois au début, et draw () est exécuté à plusieurs reprises sur une base régulière.

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);
}

Dessinez un arbre avec des figures fractales

Une figure fractale est "une partie de la figure qui est auto-similaire (rétrospective)". Il existe de nombreux types de figures fractales, mais dessinons ici quelque chose comme un arbre après l'arbre de Noël.

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);
}

Il peut être difficile à lire si vous n'êtes pas familiarisé avec le traitement récursif, mais la même forme est réduite et dessinée à plusieurs reprises un certain nombre de fois. Si vous modifiez la valeur de l'angle, la forme de l'arbre changera, alors essayons-le. Voici le résultat du dessin lorsque size = 80.

Dessinez des cristaux de neige avec des figures fractales

Il existe une courbe de Koch comme une sorte de figure fractale. La figure suivante peut être créée en divisant la ligne en trois parties égales et en répétant indéfiniment le dessin d'un triangle régulier avec les deux points divisés comme sommets.

Si vous placez cette courbe de Koch dans un triangle régulier, une figure comme un cristal de neige apparaîtra. Cette figurine s'appelle Koch Snowflake.

L'exemple ci-dessous est un programme pour créer des flocons de neige Koch étape par étape. Déplaçons-le et voyons comment les flocons de neige de Koch sont fabriqués.

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 Comment était-ce si loin? J'espère que vous serez intéressé par le traitement autant que possible. Enfin, permettez-moi de vous présenter «La nature du code». "The Nature of Code" est un livre sur la façon d'utiliser le traitement pour décrire les règles du monde naturel telles que les lois et les formules de la physique et des mathématiques. Les figures fractales présentées cette fois sont également décrites en détail, veuillez donc les lire si vous êtes intéressé.

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

La version anglaise peut être consultée gratuitement sur le site suivant.

https://natureofcode.com

Passez un bon Noël à tous.