Avec Qiita, il est difficile d'imprimer uniquement la partie texte. Par conséquent, le même contenu est publié sur la page suivante. Si vous souhaitez imprimer ou convertir en PDF, veuillez utiliser cette page:

http://gurakura.sakura.ne.jp/hellomondrian/variable/

Cliquez ici pour une liste: http://gurakura.sakura.ne.jp/series/美大生のためのプログラミング入門/

Table des matières complète de la version Qiita: https://qiita.com/iigura/items/37180d127da93d0b8abb

Vertical Composition with Blue and White by Piet Mondrian, 1936. https://www.wikiart.org/en/piet-mondrian/vertical-composition-with-blue-and-white-1936

introduction

Dans ce chapitre, vous découvrirez les variables. Je me demande si les variables sont le premier obstacle (et défi) dans la programmation. C'est une "variable" difficile pour ceux qui commencent tout juste à apprendre la programmation, mais ce n'est pas censé être une fonctionnalité pour vous faire dire.

Si vous n'utilisez pas le concept de «variables», il y a des choses qui ne peuvent pas être réalisées, ou il peut être plus pratique ou plus facile à comprendre en utilisant des variables, donc le concept et la fonction des variables existent.

Cela dit, c'est un peu un concept ésotérique, donc je vais me concentrer sur sa nécessité et sa commodité dans ce chapitre.

Vivez une situation difficile

Afin de se rendre compte de la nécessité et de la «gratitude» des variables, je pense qu'il vaut mieux vivre des situations gênantes sans utiliser de variables. Ici, osons vivre la "situation gênante" en dessinant une image comme celle montrée ci-dessous par un programme.

Le programme pour dessiner cette figure est le suivant:

// vertical comp-position ver.0
background(250,245,230);
size(500,500);

noStroke();
fill(0,80,255); // blue
rect(450,0,50,100);

strokeWeight(10);
stroke(0,0,0);
line(450,0,450,500);   // vertical
line(450,100,500,100); // horizontal

Dans le travail dessiné par le programme ci-dessus, je sens que la position du carré bleu est un peu trop juste (juste mon ressenti). Déplaçons l'emplacement du carré un peu plus vers la gauche. Bien sûr, nous devons augmenter la largeur, pas seulement la déplacer. J'essaierai également de l'augmenter.

Par exemple, voyons comment la fonction rect réduit le premier argument de 450 à 300 et augmente le troisième argument de 50 à 120. Le programme ressemble à ceci:

// vertical comp-position ver.1
background(250,245,230);
size(500,500);

noStroke();
fill(0,80,255);        // blue
rect(350,0,120,100);   // <-- change

strokeWeight(10);
stroke(0,0,0);
line(450,0,450,500);   // vertical
line(450,100,500,100); // horizontal

Lorsque vous exécutez ce programme, vous obtiendrez le travail suivant:

... Malheureusement, l'image est cassée. Si vous y réfléchissez bien, la taille de la toile est spécifiée par la fonction de taille à 500 pixels de large. Ainsi, si vous souhaitez placer le quadrilatère sur le bord droit, la largeur du quadrilatère doit être liée à la valeur x de la coordonnée supérieure gauche du quadrilatère. Si la valeur x de la coordonnée supérieure gauche est de 350, alors la largeur du quadrilatère doit être de 150 (= 500 - 350).

En outre, l'argument de la ligne (450,0,450,500); qui trace une ligne verticale doit être modifié. Cette fois, vous devez changer les valeurs des premier et troisième arguments de cette relation de ligne de 450 à 350 afin de la dessiner de sorte qu'elle chevauche les coordonnées en haut à gauche du carré bleu corrigé.

De même, les coordonnées à l'extrémité gauche de l'horizon doivent être modifiées. Plus précisément, ce qui a été écrit comme ligne (450,100,500,100); doit être réécrit comme ligne (350,100,500,100); en changeant le premier argument de 450 à 350.

Voici une liste des programmes modifiés et leurs résultats d'exécution:

// vertical comp-position ver.2
background(250,245,230);
size(500,500);

noStroke();
fill(0,80,255); // blue
rect(350,0,500-350,100);

strokeWeight(10);
stroke(0,0,0);
line(350,0,350,500);   // vertical
line(350,100,500,100); // horizontal

Ça fait du bien. En corrigeant tous les nombres dans ces endroits liés, l'image brisée était en quelque sorte corrigée. J'étais soulagé, et quand j'ai regardé l'image générée, j'ai voulu décaler un peu plus la position de la ligne verticale vers la droite.

Vous devrez également modifier le programme comme auparavant. De plus, vous devez réparer tout ce qui doit être corrigé et n'oubliez pas de le réparer. Le travail de modification du programme et de vérification à plusieurs reprises sera répété à l'infini. C'est très ennuyeux.

Est-ce quelque chose qui ne peut pas être fait? (Si vous avez envie de ..., cette section a bien fonctionné).

Structure du programme

Pour changer facilement la position de la ligne verticale ou la position du coin supérieur gauche du carré bleu, jetons un œil à la structure du programme ci-dessus. Ce programme a changé la position de la ligne verticale et du coin supérieur gauche du rectangle à l'emplacement de x = 350. Si vous regardez à nouveau la liste des programmes, en vous concentrant sur ce nombre de 350, vous pouvez voir ce qui suit.

Le premier nombre 350 est l'argument de la fonction rect sur la ligne 7:

rect( 350 ,0,500- 350 ,0);
//    ^^^         ^^^

Par souci de clarté, je l'ai marqué d'un commentaire sous la valeur de coordonnée x 350.

De même, la partie liée à la valeur de coordonnée x 350 est illustrée ci-dessous:

line( 350 ,0, 350 ,500); //11ème ligne
//    ^^^     ^^^

line( 350 ,100,500,100); //12ème ligne
//    ^^^

Si vous regardez tous les emplacements pour la valeur de coordonnée x 350, il y a un total de 5 emplacements. En d'autres termes, si vous modifiez la position de la ligne verticale de 350 à 335, par exemple, si vous ne modifiez pas les valeurs aux cinq endroits, l'image sera interrompue.

En d'autres termes, même un programme qui produit une image aussi simple nécessiterait cinq changements pour changer légèrement la position du dessin. Bien sûr, les programmes qui génèrent des images plus complexes sont plus susceptibles d'avoir plus d'endroits à modifier.

N'est-il pas possible de mettre à jour automatiquement ces modifications parce que nous changeons simplement la position du dessin? Il est difficile de corriger manuellement les lieux associés un par un. De plus, si vous effectuez des corrections manuellement à chaque fois, vous risquez d'oublier de faire des corrections, ce qui est un problème.

... Eh bien, si vous vous sentez comme ça, vous avez le potentiel d'écrire un bon programme (peut-être). Je pense que l'idée d'éviter plus de tracas en acceptant un peu de tracas est assez importante dans l'élaboration de programmes.

L'histoire était un peu décalée. Revenons à l'histoire. En premier lieu, pourquoi dois-je changer de 5 places dans le programme à chaque fois que je change la position de la ligne verticale? C'est parce que la liste de programmes que j'ai montrée jusqu'à présent est "trop spécifique".

Le contraire du concret est abstrait, et pour rendre l’information concrète abstraite, il faut réduire la quantité d’informations.

Que signifie réduire la quantité d'informations? Ici, pensons d'abord à l'augmentation de l'information, puis à la diminution de l'information au contraire.

En général, plus vous disposez d'informations, plus elles deviennent spécifiques. Par exemple, si vous ajoutez les informations «chien Akita» ou «chien Shiba» aux informations «chien», vous décrirez une race de chien plus spécifique. D'un autre côté, si nous réduisons les informations spécifiques sur les chiens du concept de «chiens», nous obtenons des concepts plus abstraits tels que «mammifère», «vertébré», «animal» et «organisme vivant».

Pour revenir au programme, que se passerait-il si vous pouviez écrire les cinq parties énumérées ci-dessus, par exemple:

rect(Ligne verticale x valeur de coordonnée,0,   500-Ligne verticale x valeur de coordonnée,0  ); //7ème ligne
line(Ligne verticale x valeur de coordonnée,0,  Ligne verticale x valeur de coordonnée,    500); //11ème ligne
line(Ligne verticale x valeur de coordonnée,100, 500,                 100); //12ème ligne

Si vous l'écrivez ainsi, vous n'avez pas besoin de le modifier même si vous tracez une ligne verticale n'importe où. En d'autres termes, si le programme suivant est autorisé, il semble qu'il puisse gérer partout où des lignes verticales sont dessinées:

// pseudo vertical comp-position ver.3
background(250,245,230);
size(500,500);
noStroke();
fill(0,80,255); // blue
rect(Ligne verticale x valeur de coordonnée,0, 500-Ligne verticale x valeur de coordonnée,0);
strokeWeight(10); stroke(0,0,0);
// draw a vertical line
line(Ligne verticale x valeur de coordonnée,0,Ligne verticale x valeur de coordonnée,500);
// draw a horizontal line
line(Ligne verticale x valeur de coordonnée,100, 500,100);

En fait, le programme ci-dessus ne fonctionnera pas tel quel. Pourquoi ça ne marche pas? Vous pouvez le voir en vous tenant sur le côté de l'ordinateur et en pensant au traitement réel. Par exemple, sur la ligne 7, il y a un morceau de programme appelé "rect (ligne verticale x valeur de coordonnée, 0, 500-ligne verticale x valeur de coordonnée, 100);". rect était une fonction pour dessiner un quadrilatère, mais où dois-je dessiner un quadrilatère sur la toile? Il dit "valeur de la coordonnée x de la ligne verticale", mais où dois-je le dessiner "spécifiquement"?

Non seulement pour le traitement, mais aussi pour l'exécution du programme, des valeurs spécifiques sont requises. Dans la fonction rect du programme ci-dessus, nous pouvons conclure que ce programme ne fonctionne pas car nous ne connaissons pas la "valeur concrète" de la pièce que l'on dit être la "valeur de la coordonnée x de la ligne verticale".

Je peux parfaitement comprendre le sentiment que "c'est pourquoi j'ai écrit la valeur 350". Mais ce sont des informations trop spécifiques comme argument des fonctions rect et line. Que faire si, par exemple, la description "La valeur de la coordonnée x de la ligne verticale est 350" est faite dans le programme au lieu d'écrire une valeur concrète dans l'argument de la fonction? Avec cette méthode, rect ou Il devient également clair où dessiner une ligne droite ou un rectangle sur l'écran sans utiliser une valeur spécifique comme argument de la fonction de ligne.

Si vous l'écrivez par programme, cela ressemblera à ceci:

// pseudo vertical comp-position ver.3
background(250,245,230);
size(500,500);

noStroke();
fill(0,80,255); //ligne verticale bleue

La valeur de la coordonnée x est 350// <---Informations de valeur spécifiques! 
droite ligne verticale(valeur de coordonnée x,0,Ligne verticale 500-valeur de coordonnée x,100); 
strokeWeight(10);
stroke(0,0,0);

// draw a vertical line
ligne ligne verticale(valeur de coordonnée x,0,Ligne verticale x valeur de coordonnée,500);

// draw a horizontal line
ligne ligne verticale(valeur de coordonnée x,100, 500,100);

Le programme reçoit une valeur de coordonnée x spécifique à la ligne 8. Donc, en théorie, cela fonctionne. En fait, nous avons suffisamment d'informations sur le déroulement du programme et les informations requises pour le programme, mais Processing ne comprend pas le langage que nous utilisons quotidiennement (langage naturel), donc "La valeur de coordonnée x de la ligne verticale est de 350. Même s'il dit «Oui», il ne peut pas être traité.

La section suivante décrit comment décrire cela d'une manière que le traitement peut comprendre.

Programme prenant en charge la modification de la position des lignes verticales

Le problème avec la liste de programmes ci-dessus était la partie écrite en japonais qui dit "La valeur de coordonnée x de la ligne verticale est 350". En premier lieu, même si vous entrez le japonais dans l'éditeur de traitement (la partie où vous entrez dans le programme), les caractères seront déformés, vous devez donc écrire ces informations sans utiliser le japonais.

Si "la valeur de la coordonnée x de la ligne verticale" est, par exemple, px, la phrase "la valeur de la coordonnée x de la ligne verticale est de 350" peut être réécrite comme "px est de 350". Pourquoi px? Vous pouvez avoir des doutes. L'essentiel est que j'ai pris la bonne décision. Toute chaîne qui commence par un alphabet ou un symbole appelé trait de soulignement convient, mais je l'ai nommée px comme une signification de la position x.

Le processus "px is 350" s'écrit px = 350. En mathématiques, la description px = 350 signifie également que px est "égal" à 350, mais dans Traitement le signe égal ('=' égal) signifie "affectation".

Si a = 1, alors a est mis à 1 (substitut), et où a est écrit par la suite, il est identique à 1.

Alors

px=350;
rect(px,0, 500-px,100);

Le programme est

rect(350,0, 500-350,100);

Ce sera la même opération que.

Ensuite, si vous devez écrire px = 350; dans le programme, vous devez en écrire un peu plus. Même si vous écrivez simplement px = 350, il sera dans l'état "Qu'est-ce que px en premier lieu?".

Eh bien, il y a certains langages qui ne le font pas, mais dans le langage Java dont nous parlons dans cette série, nous nous retrouvons avec la question "Qu'est-ce que px en premier lieu?"

px doit indiquer que c'est un symbole qui représente la valeur - ici un entier -. Pour ce faire, écrivez int px;. Le mot int vient d'un entier, ce qui signifie entier.

Vous pouvez dire à votre ordinateur que la notation px représente un entier en écrivant int px;. Alors, qui est px? Donner les informations à l'ordinateur s'appelle "déclaration". Une fois que vous le dites à l'ordinateur (le déclarez), vous pouvez attribuer une valeur à px, vous pouvez donc écrire px = 350; et ainsi de suite.

Dans le code actuel,

int px;
px=350;

C'est comme ça.

Bien entendu, la valeur n'est pas limitée à 350, mais peut être de 349.

int px;
px=349;

Il est également possible d'attribuer (attribuer) une valeur au moment de la déclaration. Dans ce cas,

int px=350;

Etc.

Avec les connaissances à ce jour, il est maintenant possible d'écrire un programme de dessin abstrait en utilisant l'expression px. Si vous utilisez px et modifiez le programme comme suit, ce sera un programme de travail:

// vertical comp-position ver.4
background(250,245,230);
size(500,500);

noStroke();
fill(0,80,255); // blue

int px=350; // <---Informations de valeur spécifiques!

rect(px,0, 500-px,100);

strokeWeight(10);
stroke(0,0,0);
line(px,  0, px, 500); // draw a vertical line
line(px,100, 500,100); // draw a horizontal line

Ce programme est un programme qui prend en charge la modification de la position de dessin des lignes verticales. Modifions donc la valeur de px sur la ligne 8 - par exemple, plus extrême - à 100:

// vertical comp-position ver.5
background(250,245,230);
size(500,500);

noStroke();
fill(0,80,255); // blue

int px=100; // <---Changé de 350 à 100

rect(px,0, 500-px,100); 11

strokeWeight(10);
stroke(0,0,0);
line(px,  0, px, 500); // draw a vertical line
line(px,100, 500,100); // draw a horizontal line

Qu'est-ce qu'une variable

Avec la liste de programmes ci-dessus, vous pouvez maintenant (dans une certaine mesure) changer librement le travail généré sans trop de tracas, c'est-à-dire simplement en changeant la valeur attribuée à px. Même si vous modifiez la valeur attribuée à px, vous n'avez pas besoin de la modifier après la 10e ligne du programme.

Qu'est-ce que cela signifie exactement? Les programmes à partir de la 10e ligne ont un certain degré d'abstraction, par exemple, la ligne verticale est abstraite ligne (px, 0, px, 500) de manière à dessiner une ligne verticale dont la valeur de coordonnée de x est px. Il est programmé.

Il est écrit comme un processus abstrait, donc même si px reçoit une valeur entière telle que 350 ou 100, le processus sera exécuté sans échec.

Alors, qu'est-ce que px exactement pour un programme écrit de manière abstraite? Parfois, c'est une valeur de 350 (une valeur entière), et parfois c'est une valeur de 100.

Pour les programmes de la ligne 10 et au-delà, px n'est rien de plus qu'un nombre changeant, un nombre changeant. Ce nombre changeant px est appelé une "variable".

Des déclarations telles que int px; sont parfois appelées "déclarer la variable px" (il en va de même pour l'élément de programme int px = 300;).

Il peut y avoir plusieurs variables

Jusqu'à présent, nous avons décrit la variable px. S'il y a plusieurs quantités / valeurs à traiter de manière abstraite, plusieurs variables seront utilisées.

Plusieurs variables sont disponibles dans les langages de programmation courants. Bien sûr, il en va de même pour le traitement.

Ci-dessous, nous terminerons ce chapitre en ajoutant une variable qui représente la position de la largeur et en montrant un programme qui vous permet de créer des images plus librement.

Pour la coordonnée y de la ligne horizontale, nous utiliserons une variable appelée py. C'est parce que la variable pour la coordonnée x de la ligne verticale était px, donc je l'ai juste nommée py car c'est un nom similaire. La coordonnée y de la ligne horizontale est également la hauteur du quadrilatère, le nom de variable h peut donc être acceptable.

Bien sûr, d'autres noms de variables tels que zzz fonctionneront également. Cependant, les noms de variables ne sont pas pour l'ordinateur, mais pour nous, les humains qui lisons la liste des programmes. Par conséquent, il doit être aussi tangible que possible (la liste des programmes sera plus facile à lire).

Vous trouverez ci-dessous une liste de programmes qui abstrait les positions des lignes verticales et horizontales en utilisant les variables px et px:

// a study for vertical comp-position blue and white
background(250,245,230);
size(500,500);

noStroke();
fill(0,80,255); // blue

// position cofiguration
int px=380;
int py=300;

rect(px,0, 500-px,py); // draw a rectangle.

strokeWeight(10);
stroke(0,0,0);
line(px, 0, px, 500); // draw a vertical line.
line(px,py, 500, py); // draw a horizontal line.

Et l'image générée par ce programme est Ce sera comme suit:

Colonne: Les noms de variables sont importants (pour les humains)

Il est très difficile de lire (décrypter / comprendre) le programme d'une autre personne. Par conséquent, essayez de rendre le programme convivial pour les autres, par exemple en donnant des noms de variables aussi descriptifs que possible. Votre gentillesse vous sauvera sûrement.

Dans la communauté de la programmation, il y a l'expression «j'étais une autre personne il y a trois mois». Lors de la création d'un programme, vous pouvez utiliser ou faire référence à du code créé par vous-même. À ce moment-là, même s'il s'agit d'un programme fait par moi-même, après 3 mois, la mémoire quand je l'ai fait s'estompe et on a l'impression d'être un programme créé par une autre personne, même s'il s'agit d'un code fait par moi-même, pour le lire Est un mot qui signifie qu'il coûte autant que le code de quelqu'un d'autre.

Par conséquent, essayez de donner un nom de variable descriptif qui représente autant que possible la fonction et la substance de la variable. «La pitié n'est pas bonne pour les gens» existe également dans le monde de la programmation.

[JAVA] Introduction à la programmation pour les étudiants du collégial: variables