2.5: The random() Function - p5.js Tutorial The Coding Train English French

2.5: The random() Function - p5.js TutorialYouTube↗ IA↗(long shot)
Education 103.3K views 1.6K likes 20 dislikes 04 Sep 2015 Show Contributors 1

The Coding Train 1.8M subscribers United States YouTube↗

Contributed subtitles

Arabic Younesmrabti

Click to Play Video

So, here we are. This is the last video in this little section about variables

Donc nous voici, ce sera la dernière vidéo dans cette petite section

in p5 JS and before I go--

Au sujet des variables dans p5js et avant que je ne démarre,

I'm not going anywhere, because all I do is stay in this room

Bien que je n'aille nulle part, parce que je reste ici

make videos. Before I go on to the next topic-- which

et je fais des vidéos, avant que je n'aille sur le prochain sujet,

is conditional logic-- which will really

qui est la logique conditionnelle, qui va vraiment vous permettre

unlock a lot of creative possibilities for you, I want to give you one last tool that will hopefully

plein de possibilités créatives, je veux vous donner un dernier outil

make things a little bit more exciting in your life.

Qui, Espérons, va rendre les choses plus passionnantes, dans votre vie.

And that is the random function.

et c'est la fonction random().

So, the random function.

donc la fonction random() ...

So we, you and me, together have been doing a lot of stuff

Vous et moi, Ensemble, Nous avons fait toute sorte de choses comme:

like this. Var x equals 50.

var x = 50; et tout ça est très bien,

This is well and good, because x is a variable and 50 is a perfectly fine number.

parce que x est une variable et 50 est en nombre correct

And I'm happy with my rectangle at pixel 50.

et je suis content que mon rectangle soit au pixel 50

But the whole point of doing this programming thing

Mais il se pourrait… toute la raison de cette chose, la programmation

is to have systems of logic. Rules to generate behaviors, and graphics, and designs.

est d'avoir des systèmes de logique, des règles pour générer des comportements et de dessins, et du designs

It's not really about, like, let me pick my five favorite numbers and set those variables

Il ne s'agit pas vraiment pour moi de choisir mes nombres préférés

to those numbers.

et d'assigner ses variables à ces nombres.

So, there's a lot more to it, but a first step

Donc il y a bien plus que ça, mais une première étape dans cette direction

in that direction we could least say, here's the rule.

Serai au minimum de dire : Voici la règle,

Whenever my program runs, the circle will appear at a random x location.

Dès que mon programme tourne, le cercle devra apparaître au hasard à une position x.

So instead of saying Var x equals 50,

Donc au lieu de dire var x = 50; Je pourrais dire quelque chose comme

I could say something like var x equals random. And random is a function, just like any other function.

var x = random ... et random() est une fonction comme n'importe quelle autre,

Line, ellipse, fill, stroke, it requires some arguments

line(), ellipse(), fill(), stroke(), Elle demande quelques arguments

to define how that function will behave.

Pour définir, comment la fonction va se comporter, et random(), si vous avez vu

And random, if you watch the previous video, is just like the map function.

la vidéo précédente, est juste comme la fonction map(),

And if you recall-- or if you didn't watch it-- the difference is, when you say line,

Et si vous vous rappelez, aussi vous n'avez pas vue, la différence est si vous dites

a line is drawn on the screen. The line function performs the task.

line(), une ligne est dessinée à l'écran, la fonction ligne exécute une tâche.

When you say, random, a task is performed,

lorsque vous dites random(), une tâche est exécutée (choisir un nombre au hasard)

picking a random number. But that function resolves to it,

mais cette fonction s'évalue vers ce nombre

it evaluates to that number. And you can take that number when it resolves to, and assign it back to something.

Et vous pouvez prendre ce nombre Qui en est le résultat et l'assigner à quelque chose,

A variable value in this case.

La valeur d'une variable dans ce cas.

So if I say 0 comma 50-- I'm kind of at the edge of the semicolon, there--

Donc ce je dis 0, 50 [...]

The parameters, the arguments that random takes,

Les paramètres, les arguments que random() prend

are a minimum and a maximum.

Sont un minimum et un maximum.

And random will give you a number in between 0 and 50.

Et random() vous donnera un nombre entre 0 et 50.

One thing that's important here to realize, which is a small little distinction,

Une chose qu'il est important de comprendre, une petite distinction,

is that here are some numbers you might get. 2, 21, 73-- you won't get 73, but that's above 50--

voici les nombres que vous pourriez obtenir : 2, 21, 73 .. uh, non, pas 73, C'est au dessus de 50!

42. But I will mention, you probably won't ever get these.

42, mais je devrais probablement vous dire, vous n'aurez jamais ces nombres

I mean, you could get these numbers. You're more likely to get numbers like this. It's giving you, actually what is sometimes

Vous aurez plus probablement des nombres comme .. ça vous donne en fait

referred to as floating point numbers, or decimal numbers.

ce qu'on appelle parfois des nombres flottants ou nombres décimaux

So, in this case, it doesn't really matter,

Donc, dans ce cas ça ne compte pas vraiment, p5 peut gérer ça.

p5 can handle that if you get the number 50.34567. It know to just draw something at pixel 50.

Si vous obtenez le nombre 50.34567, il qu'il doit juste dessiner au pixel 50.

But there's other cases where we might

Mais il y a d'autres cas où nous devrions juste de faire un peu

need to do a little something more with that.

plus avec ça. Je n'aurai probablement pas dû mentionner ça...

I probably shouldn't have even mentioned this, because it's, like, a little unnecessary point of confusion.

parce que c'est un peu petit point de confusion inutile

But I've already restarted this video, like, five times so I'm

mais trop tard j'ai déjà refait cette vidéo 5 fois!

Donc je le garde.

OK, so let's actually start messing around with this and see what happens.

OK, jouons un peu avec ça, et regardons ce qui se passe.

OK, so I have a sketch here.

Donc j'ai un dessin ici…

Actually, I'm going to start a new one.

En fait, je vais en démarrer un nouveau…

No, no, no, I'm going to say, File, New Project, and I'm going to call this dots.

And what I would like to do is have some variables.

Et ce que je voudrais faire serait d'avoir quelques variables,

And I'm going to use objects, since I covered

et je veux utiliser des objets, puisque nous avons étudié ça

those in a previous video.

dans une vidéo précédente.

So, I have a point and I'm also going to have a color.

Donc j'ai un point Et je vais aussi avoir une couleur.

Let's see how I'm doing here with my having just learned JavaScript syntax.

Regardons comment je me débrouille ici En venant juste d'apprendre la syntaxe JavaScript!

So, you can see I'm setting up a couple variables.

Donc vous pouvait voir je définis deux variables

I want to have a point that has an x and a-- oh, my finger disappeared-- a point that has an x and y.

Je veux avoir un point qui a x et un y,

I want to have a color with an an r, a g, and a b.

Je veux avoir 'col' qui a un 'r', un 'g' et un 'b' parce que

Because, my plan for all this is first in Setup,

mon but pour tout ceci est, tout d'abord dans setup, bien sûr de créer un canvas,

obviously, to create a canvas. Let's make it a nice small size. And then what I'm going to do, is

faisons en un d'une belle jolie taille, Et ensuite ce que je vais faire

I'm going to set a background. I'm going to set it in Setup because it's just background,

je veux mettre un background dans setup() parce que background()

just going to happen once.

ne doit être fait qu'une fois.

And then an ellipse. I'm going to draw the ellipse at point x comma point y.

Et ensuite une ellipse… je vais dessiner l'ellipse à point.x, point.y

It's going to be a small ellipse, and I'm going to fill it at color dot r, color dot g, color dot b.

ce sera une petite ellipse, et je vais la remplir avec col.r, col.g et col.b

So, I can zoom back out here, and we can see.

Donc je peux dézoomer ici et nous pourrons voir nous devrions pouvoir

We should be able to run this sketch, now.

exécuter ce sketch, Appuyez sur run...

Hit Run, OK, problem with scope.

Ah OK, problème avec scope ...

Que s'est-il passé?

Look at this, interesting.

Regardez ça, intéressant.

Ellipse is receiving an empty variable in spot number 1, 2-- if this is not intentional.

ellipse reçoit une variable vide à l'endroit 1, 2 ... Ce n'est pas intentionnel ...

Color dot r, color dot b.

[Essaye de comprendre le problème]

I could put some semicolons here.

J'ai mis des ; ici…

What did I miss? R,G,B. Help, help!

Qu'est-ce que j'ai raté ? À l'aide !

Regardez moi ça…

What am I doing here?

Qu'est-ce que je fais ici?

Oh, ellipse ... non, oh, regardez!

Oh, look, some crazy stuff has happened

Quelque chose de fou se passe ici…

here, some horrible stuff.

Quelque chose d'horrible…

This video is a disaster, I'm going to fix it.

Cette vidéo est un désastre! Je vais corriger ça…

I'm going to cut this out if I remember to.

Je vais supprimer ça si je m'en rappelle…

Point comma x [INAUDIBLE] y is 50, point x, point y.

point, virgule, ... [essaye de comprendre]

Let's do some things. First, when we have these kind of problems.

Essayons quelque chose… Tout d'abord, quand on a ce genre de problème

This is a useful point. Let's just comment out the offending lines of code.

Ça va être utile, commentons juste les lignes de code problématiques,

Hit Save and hit Run.

Sauvons et exécutons...

OK, no errors anymore. Let's comment back in fill.

OK, plus d'erreurs ! Remettons fill()...

We can figure out what's going on.

On peut comprendre ce qui se passe…

Still no errors.

Toujours pas d'erreurs !

Let's draw on ellipse the old fashioned way, and let's see if this works.

Dessinons une ellipse à la façon habituelle Et voyons si ça marche…

OK, that seems good.

OK, ça semble bon !

Now, what's wrong with my point x and point y?

Maintenant qu'est-ce qui ne va pas avec mon point.x et mon point.y?

Let's try this, just point comma x.

Essayons ça… point.x Essayons à nouveau.

Let's run it again. Empty variable in spot one.

Ah, 'variable vide à l'endroit 1' ...

You know, I wonder if point--

Je me demande si 'point' ... Appelons le 'spot' (endroit)

let's call it spot-- I wonder if there's something wrong with using point.

Je me demande s'il y a quelque chose de mauvais avec 'point'

Yeah, that was interesting.

Oui! Ah, c'était intéressant...

I'm going to have to look into that.

Il faut que je regarde ça !

So I don't know if point must be some key word that's

Donc je ne sais pas si 'point' doit être Un mot-clé qui fait ...

doing-- oh, oh, I've done something horrible.

Ooooohhh! Je fais quelque chose d'horrible!

Boy, wow, this is great, this is great.

Dis donc! c'est superbe!

OK, I know what's happened, I know what's happened.

C'est superbe ! OK! J'ai compris ce qui s'est passé.

This, is great.

je sais ce qui s'est passé. C'est superbe.

OK, so here's the thing, what did I just do?

OK, voici ce qui se passe: Qu'est-ce que je viens juste de faire?

Let's think of some functions in p5.

Réfléchissons as quelques fonctions dans p5,

I know I'm off on this horrible tangent,

Je sais que je suis parti sur cette horrible tangente pour encore cinq minutes…

now for another five minutes, but some functions in p dot five are like line. Rectangle, for drawing a rectangle.

Des fonctions dans p5 sont line(), rect() pour dessiner un rectangle,

Ellipse, for drawing an ellipse.

ellipse() pour dessiner une ellipse.

What if you want to draw a point on the screen, huh?

Comment faire pour dessiner un point à l'écran?

Well, what's the name of that function, again?

Quel est le nom de cette fonction encore?

So, point is, like, kind of an important thing in p5

Donc point() et comme cette chose importante dans p5 dans le but

that's meant for something highly specific,

Très spécifiquement : dessiner un point!

drawing a point. So, if I try to make up a variable called point,

donc si j'essaye d'inventer une variable nommée point...

I have completely overridden the existing point function.

J'ai complètement surchargé La fonction existante point()

And you know what? I didn't actually override it, because p5 then,

Et vous savez quoi? Je ne l'ai pas réellement surchargée

overrode my variable.

Parce que p5, a lui-même surchargé ma variable car les choses

Because things are happening in weird orders, in strange ways.

se passent dans un ordre bizarre et d'une façon étrange.

So that didn't work, it was trying to, like, use the point function as the place to draw the point.

Donc ça n'a pas marché, il essayer d'utiliser la fonction point() comme l'endroit

And everything exploded, and I got a weird error message.

où dessiner le point et tout a explosé et j'ai eu un message d'erreur bizarre.

So that might be something that p5 could handle

Donc ça pourrait être quelque chose que p5 pourrait gérer avec un message sympa,

with a friendly error message. And maybe after this video's over,

Et peut-être que quand cette vidéo est finie, quelqu'un va créer un bug sur Github.

someone will file a GitHub issue.

Peut-être que cette personne sera moi.

Maybe that person will be me. But let's go back. And we solved it, but hopefully you saw the steps of debugging.

Mais revenons, et probablement, vous avez vu les étapes pour debugger

Of, like, everything was, like, exploding and going wrong.

style, tout explosait et se passait mal... Gardez votre calme,

And if you calm, take a deep breath.

respirez profondément, calmez vous, mettez des choses en commentaire,

Calm down, comment some stuff out, start putting it back in slowly, see where things go wrong.

remettez les progressivement, pour voir si les choses tournent mal,

We've gotten a bit further.

nous avons un peu avancé.

But now, we're back, I'm back.

Mais maintenant nous somme de retour! je suis de retour.

This video is still only at 8 minutes,

Cette vidéo n'en est qu'à huit minutes, ce qui est tout à fait raisonnable,

which is totally reasonable. And I'm going to go back and change this spot.

Et nous allons revenir et changer ceci en 'spot'

I'm going to say, spot x, spot comma y,

je vais me dire : spot.x, spot.y

and I'm going to Run it.

et je vais exécuter...

And we can see, there we go, I have the circle.

Et nous pouvons voir : et voilà !

And I'm going to move this over here, being drawn.

J'ai le cercle… et je vais déplacer ceci ici… qui est dessiné

Excuse me, I want this to give me a little more space.

Excusez-moi je suis comme… Je veux que ça me donne un petit peu plus d'espace.

I have the circle being drawn at 100 comma 50, where the spot is

J'ai le cercle qui est dessinée ça 100,50 où est le 'spot'

with this particular color.

avec cette couleur spécifique.

So what happens if we start to add some randomness, here?

Donc que va-t-il se passer si nous ajoutons un petit peu de hasard ici?

So, first, remember, draw looping over, and over,

Donc je pourrais faire une chose… d'abord, rappelez-vous: draw()

and over again.

boucle sans arrêt...

So what if I just say, spot x equals random between 0 and 600?

Et si je disais juste : spot.x = random(0,600); ?

This is another thing that's worth mentioning.

Ça vaut aussi la peine de mentionner :

I have a random spot anywhere between 0

J'ai un endroit au hasard n'importe où entre zéro et la taille de ce canvas,

and the width of that canvas. The width of that canvas is 600, so I could

La taille de ce canvas est 600 donc je pourrais écrire 600 ici.

write the number of 600 there. There does happen to be a built in variable in p5 that knows, just dynamically, what the width of the window is.

Il se fait qu'il existe une variable interne dans p5, qui sait dynamiquement

And this is useful to use, because if I use that variable width here--

ce qu'est la taille de la fenêtre Et c'est bien pratique parce que si j'utilise le variable 'width' ici

instead of typing 600-- if I later change the size in create canvas,

Au lieu de taper 600, si, plus tard, je change de la taille dans createCanvas()

I don't have to change it elsewhere in my code.

Je ne dois pas le changer ailleurs dans mon code.

So I'm going to do that, and I'm also

Donc c'est ce que je vais faire.

going to say spot dot y is random zero to height.

Et je vais dire aussi : spot.y = random(0, height);

So, now, let's run this program.

Donc maintenant exécutons ce programme…

And look, I just get spots all over the place, spots, spots,

Et regardez ! je obtiens des points un peu partout : points, points, points.

spots. All with a nice red color.

Et avec une belle couleur rouge.

But perhaps, what I want is to say, color dot r equals random between like, 100 and 255.

Mais peut-être que ce que je veux serait de dire: col.r = random(100,255);

Color dot g is always zero, color dot b is random between 100 and 190.

col.g = 0; col.b = random(100,190);

I'm just picking, like, random arbitrary ranges, here.

Je choisis des nombres au hasard ici.

And now, look, I've got a nice variation of random purplish,

Et nous pourrions voir… Regardez: j'ai une jolie variation

De points pourpres, roses...

And I could even say, add a little bit of alpha, here.

Je pourrai même dire : Ajouter un petit peu d'alpha ici,

And Run this again.

Et exécuter ça a nouveau…

And you can see, I have a nice little, like, point to list.

J'ai vous pouvez le voir, J'ai un joli petit pointillé, et vous pouvez en fait,

And actually, one thing you're noticing

Une chose que vous remarquez ici, si vous regardez vraiment de très près,

here, if you look really close, is there's little black outlines.

Il y a un peu petit contour noir Parce que je n'ai pas éteint le tracé.

Because I didn't turn off the stroke. So, what I'm going to do now is say, no stroke,

Donc maintenant ce que je vais faire est de dire : noStroke();

and Stop and Start.

Et stopper et démarrer…

And look at all these nice, little dots, layering,

Et regardez juste ce beau, tous ces beaux petits.

this nice little pointless thing.

Cette belle petite chose pointilliste…

So you can take this much farther.

Donc, vous pouvez encore aller beaucoup plus loin,

You could make random sizes, you could map the random ranges

Vous pouvez faire des tailles aléatoires, Vous pouvez reporter de valeurs aléatoires

based on, like, where. Like, if the dots appear on the left, they're more greenish.

basées sur où... Comme : si les points apparaissent sur la gauche.

If they're on the right, they're more bluish.

Ils seront plus vert, s'ils sont sur la gauche, plus bleu,

So, there's so much you could do.

Donc, il y a tant de choses que vous pouvez faire!

Maybe try to create a random painting, here.

Peut-être pour essayer de crier une peinture aléatoire ici, vous pourriez utiliser

You could use other shapes besides just circles, that sort of thing. That's sort of saves an exercise you could try.

d'autres formes en plus de cercle, ce genre de chose, comme exercice,

I also might return to this particular program.

vous pourriez aussi revenir ce programme spécifique si vous vous rappelez,

If you remember this, we worked on just a little bit

nous avons travaillé juste sur un petit morceau d'un programme

of a painting program, where you move the mouse around

de peinture où vous déplacez la souris

and as you move the mouse around, you paint something.

et comme vous déplacez la souris vous peignez quelque chose,

And so, right now, every time you click the mouse,

et donc, et si vous pouviez, à chaque click de souris, il efface le fond,

it erases the background. What if every time you click the mouse,

et si à chaque fois que vous cliquez la souris vous obtenez une couleur de fond aléatoire?

you get a random background color? Or as you move the mouse, the color changes randomly.

Ou lorsque vous déplacez la souris les couleurs changent au hasard?

So, there's lots of things interesting possibilities,

Donc, il y a plein de possibilités intéressantes ici,

there. You can make this painting program

vous pouvez faire ce programme de peinture quelque peu plus sophistiqué.

a bit more sophisticated. OK, so that is the end of this video.

Ok, c'est la fin de cette vidéo!

And I think this wraps up my section of videos on variables.

Et, je crois que ceci termine ma section de vidéos sur les variables

And I'm going to keep that weird, little thing that

et je vais garder cette petite chose bizarre qui s'est passée,

happened, that I think was a good moment for today.

dont je pense que c'était un bon moment pour aujourd'hui.

OK, see you later.

Ok, à plus tard! Sous-titres réalisés par la communauté d’Amara.org

Similar videos:

1.1: Introduction - p5.js Tutorial
The Coding Train
706.1K views 11.2K likes 163 dislikes 01 Sep 201530% match

Subtraction 2 | Addition and subtraction | Arithmetic | Khan Academy
Khan Academy
708.6K views 887 likes 142 dislikes 19 Jan 201030% match

Coding Challenge #1: Starfield in Processing
The Coding Train
1.1M views 23.8K likes 321 dislikes 12 Apr 201629% match

Problems with Zero - Numberphile
Numberphile
5.2M views 72.9K likes 1.5K dislikes 25 Oct 201229% match

Deepfake Audio Tutorial [Wav2Lip]
CODE MENTAL
1.6K views 59 likes 0 dislikes 10 Dec 202028% match

1.1 What is a Vector? - The Nature of Code
The Coding Train
85.2K views 2.7K likes 14 dislikes 07 Mar 202028% match

DIY LIQUID MIRROR EXPERIMENT!! This Metal Melts In Your Hand!
Collins Key
27.4M views 644.2K likes 36.7K dislikes 11 Feb 201728% match

Indeterminate: the hidden power of 0 divided by 0
Mathologer
1.3M views 27.1K likes 845 dislikes 02 Dec 201628% match

Position vector valued functions | Multivariable Calculus | Khan Academy
Khan Academy
188.5K views 466 likes 18 dislikes 26 Feb 201028% match

Trying out Little Caesars NEW Quattro Pizza!
TheReportOfTheWeek
331.7K views 13.4K likes 274 dislikes 29 Aug 201928% match

Samsung Galaxy S10 Plus - Unboxing, Setup and First Look
zollotech
1.6M views 14.4K likes -1 dislikes 07 Mar 201927% match

I Found a WEIRDER Keyboard...
TechSmartt
541.6K views 14K likes 2.4K dislikes 17 Jul 201727% match

Basic addition | Addition and subtraction | Arithmetic | Khan Academy
Khan Academy
3.4M views 4.7K likes 482 dislikes 10 Mar 200727% match

2.5 Gravitational Attraction - The Nature of Code
The Coding Train
70K views 2K likes 16 dislikes 23 Apr 202027% match

Why Papa John's Jack-O'-Lantern Pizza Scares Me
TheReportOfTheWeek
280.3K views 13K likes 264 dislikes 16 Oct 201927% match

Neewer Ring Light unboxing (18 Inch) - Pete
PeteTV
198 views 17 likes 1 dislikes 28 Nov 201827% match

How to Clean Your Xbox One Fan
Tinker Man Mick
18.2K views 662 likes 22 dislikes 08 Nov 202027% match

3 MARKER DAD HAT CHALLENGE | We Are The Davises
We Are The Davises
793K views 5K likes 158 dislikes 01 Aug 201827% match

The Bluetooth Speaker Fidget Spinner
TechSmartt
829.9K views 15.1K likes 2K dislikes 08 Jun 201727% match

Regarding Me Quitting YouTube | Tyler Oakley
Tyler Oakley
1.8M views 105.5K likes 603 dislikes 05 Sep 201427% match

THE YEAR OF THE WEIRD
Markiplier
778.1K views 53.9K likes 300 dislikes 29 Jan 201826% match

Torch holder upgrade - with Paul Brodie
paul brodie
14.5K views 766 likes 8 dislikes 13 Feb 202126% match

CA Geometry: Compass construction | Worked examples | Geometry | Khan Academy
Khan Academy
48.6K views 23 likes 2 dislikes 04 Jan 200926% match

Custom U Brakes Part 1 - Framebuilding 101 with Paul Brodie
paul brodie
4.5K views 234 likes 3 dislikes 14 Nov 202026% match

TESTING VIRAL TIKTOK FOOD RECIPES!
Trinity Jae
327.7K views 28.2K likes 113 dislikes 14 May 202026% match

LIFE IN KOREA | Vlog: Cooking, errands and Korean practice (books, apps & progress)
LiveOutLoud
2.9K views 169 likes 0 dislikes 20 Jan 202126% match

Google Hangouts for Ipad Tutorial 2020
Mr. Campbell Rocks
6.2K views 66 likes 10 dislikes 29 Mar 202026% match

Papercraft Star Wars - On construit le casque du Mandalorian ! (FREE)
DT WORKSHOP
4.1K views 210 likes 1 dislikes 09 Nov 202026% match

Tek Transmitter & Teleporter | Ark:Crystal Isles #43
Bemo Guinness
3.7K views 57 likes 5 dislikes 18 Sep 202026% match

Trash Metal Scrap Metal Cash Metal - Make Money with Garbage!
VidVulture
9.9K views 694 likes 15 dislikes 04 Nov 202026% match

Settings Privacy About Contact Donate