2.4: The map() Function - p5.js Tutorial The Coding Train English French

2.4: The map() Function - p5.js TutorialYouTube↗ IA↗(long shot)
Education 138.5K views 2K likes 24 dislikes 04 Sep 2015 Show Contributors 2

The Coding Train 1.8M subscribers United States YouTube↗

Contributed subtitles

Hindi manaswini das

Spanish (Latin America) Mancu x2

Click to Play Video

Hi. So this video that I'm making is about a function in p5.js called map.

Salut! Cette vidéo est à propos d'une fonction dans p5js appelée map().

So there's a very common scenario that comes up over and over and over again

Donc, il existe un scenario très courant se répète encore et encore

in programming graphics, programming interaction,

dans la programmation graphique, dans la programmation interactive,

working with data.

lorsqu'on travaille avec des données, il y a tellement d'endroits où

There's so many places that this scenario comes up. And so this particular function, map,

ce scénario s'applique. Et donc cette fonction particulière map()

is a nice resolution to this problem.

est une belle solution à ce problème.

And let me give you a simple version of this problem.

Laissez-moi vous donner une version simplifiée de ce problème:

So let's say we have a canvas.

disons que nous avons un canvas (toile),

And the canvas has a background color.

et que le canvas a une couleur de fond

And what you want is for that background color

et que ce que vous voulez est que cette couleur de fond

to sometimes be black and sometimes be white.

soit parfois noire et parfois blanche.

So when it's black, the color that you

Donc quand elle est noire

should put in the background function is 0.

la couleur que vous devriez donner à la fonction background() est 0.

When it is white, the color you should put in the background

Quand c'est blanc, la couleur que vous devriez donner à la fonction background()

function is 255.

So we can say, together, the range for the background

Donc, nous pouvons dire, ensemble, la gamme de valeurs pour la fonction background()

function that I want in this particular program is a number between 0 and 255.

que je veux pour ce programme spécifique est un nombre entre 0 et 255.

So really, a variable might go here.

Donc, en fait une variable pourrait venir ici

We'll call it COL. And COL should

comme... Appelons-là 'col' (couleur)

have a range between 0 and 255.

et 'col' devrait avoir une game de valeurs entre 0 et 255.

Now, how do I want that value to be chosen?

Maintenant, comment vais-je choisir cette valeur?

When should it be black and when should it be white?

Quand devrait-elle être noire et quand devrait-elle être blanche?

What I would like is when the mouse pointer is

Ce que je voudrais est: quand le pointeur de la souris est de ce côté de l'écran

at this side of the screen, I want the background

je voudrais que la couleur de fond soit noire

to be black. And when the mouse pointer is at this side of the screen,

et quand le pointeur de la souris est de ce côté de l'écran

I want the background to be white.

je voudrais que la couleur de fond soit blanche.

So I would like to create a scenario where

Donc, je voudrais crer un scenario où je déplace la souris

I move the mouse left and right, left and right,

de gauche à droite, et je vois la couleur de fond

and I see the background shift from black all the way to white, down to gray, darker gray, down to black,

changer de noir et progressivement vers blanc, en passant par du gris,

et cetera, et cetera.

de retour vers noir, etc.

This is what we want to program.

Donc, c'est ce que nous voulons programmer.

Now, let's say this canvas has dimensions of 600 by 400.

Maintenant, disons que ce canvas a des dimensions de 600x400.

So mouse x is a variable. If you've been watching these videos in sequence, which

Donc, mouseX est une variable, si vous avez regardé mes vidées en séquence

you don't need to have been to watch this particular video, mouse x is a sort of recent new phenomenon that I just talked about in a previous video.

So if these are the dimensions of the canvas,

Donc, si ce sont les dimensions du canvas,

we know that mouse x has a range that goes between 0 and 600.

nous savons que mouseX aura une gamme de valeurs de 0 à 600.

So we now want the background color to have a rate-- oh, sorry. I lost my train of thought there. The mouse has a range between 0 and 600

and the background color we want to have a range between 0 and 255.

et nous voulons que la couleur de fond aie une gamme de 0 à 255.

So we need to take this value with this range

Donc nous devons prendre cette valeur, avec cette gamme, et ce que nous voulons faire

and what do we want to do? Map it to this range.

est de la reporter sur cette gamme.

When mouse x equals 0, background color equals 0.

Lorsque mouseX = 0, la couleur de fond = 0

When mouse x equals 600, background color equals 255.

Lorsque mouseX = 600, la couleur de fond = 255.

Let's kind of like start doing that a little bit

Essayons de faire ça pour un instant

for a moment without the map function at all.

sans la fonction map().

OK, so here's the program. I'm going to actually simplify this for a second.

Ok, voici le programme ... Je vais en fait le simplifier pour un instant

Var color equals 0.

I'm going to say background color.

Je vais dire: couleur de fond contient 'col'.

And you can see this.

et vous pouvez voir ça!

So we can see here, here I'm running this program.

Donc, vous pouvez voir, je fais tourner ce programme, et cette ellipse

This ellipse is being drawn where the mouse is,

est dessinée où la souris se trouve, et la couleur de fond

so we can see. And the background is being colored

est dessinée suivant la valeur de la variable 'col'.

according to that variable. But the background color is not changing

La couleur de fond ne change pas parce qu'elle est mise à 0.

because I set it equal to 0 and I never changed it.

et je ne la change jamais.

So now I could try to do some math.

Donc, je pourrais essayer de faire un peu de math,

Like I could just say color equals mouse x.

donc, je pourrais dire: col = mouseX;

pourquoi pas? c'est plutôt pas mal.

That's pretty good. Whatever the value of mouse x is,

Mettons la valeur de background à mouseX peu importe sa valeur

set the background color to that.

Donc, voyons ce qu'il se passe.

So let's see what happens.

Je vais faire tourner ça.

I'm going to run this. Look, it's working, it's changing.

Regardez, ça marche ... Ca change mais c'est déjà blanc!

But it's already white. Why? Because as soon as I get to pixel

Pourquoi? Parce ce dès que j'arrive au pixel 255

255, that's the full whiteness.

C'est tout à fait blanc!

So I'm not getting this perfect mapping.

Donc, je n'obtiens pas ce report parfait.

It's kind of working, but it's not exactly right.

Ca marche presque mais pas tout à fait correct.

So I can be approximate and I can say,

Donc, je pourrais être approximatif, je peux dire:

OK, the canvas is 600 pixels wide.

ok, le canvas est 600 pixels de large, pourquoi ne pas diviser par 2?

Why don't I divide by 2? That's pretty good.

C'est plutôt pas mal ... 600, ou quoique mouseX soit,

Whatever the mouse x is divided by 2.

diviser par 2, ça serait plus ou moins proche

That's getting me pretty close. It actually kind of looks like it's working

ça semble marcher pas mal

and, you know, we kind of solved the problem.

et nous avons plus ou moins résolu le problème, mais néanmoins:

But here's the thing. This problem that we have just sort of barely solved

ce problème que nous avons juste à peine résolu ici

over there, this is a very simplistic view of it.

c'en est une vue très simpliste.

But there's lots of times where you have a sensor, like data

Mais il y a un nombre de fois où vous avez un senseur, des données arrivent

coming in from some sensor and the range is between 321 and 1057.

d'une sorte de senseur et les valeurs vont de 321 à 1057,

And then you want to map that range to some other set of values.

et si vous voulez reporter ces valeurs sur une autre ensemble de valeurs

And actually, that other set of values has a range between 20 and 35.

et que cet autre ensemble de valeurs va de 20 à 35

And the math is a little bit trickier.

le calcul est un peu plus complexe.

Or perhaps you want to take a value that

Ou peut-être vous voulez prendre une valeur qui va de 0 à 200

goes between 0 and 200 and invert that and map that between 200 down to 0.

et inverser ces valeurs et les reporter vers 200 à 0.

So there's lots of more complex scenarios.

Donc, il y a plein d'autres scénarios plus complexes.

The map function is a general function that will take any range and map a value inside that range to a new value in any other range.

La fonction map() est une fonction générale qui prend un gamme de valeurs et reporte une valeur dans cette gamme vers une autre valeur dans une autre gamme.

So let's take a look at how that works in this context.

Donc, voyons ça... ... comment ceci fonctionne dans ce contexte.

So first of all, what do I mean by function?

Donc, en premier, qu'est-ce que je veux dire par fonction?

So already, hopefully you know about calling functions in p5.

Donc, vous savez déjà, espérons, appeler des fonctions dans p5, d'accord?

Right? You might have done this. Line is a function that takes four arguments.

Vous avez pu faire ceci: line() est une fonction qui prend 4 arguments.

One, two, three, four.

1, 2, 3, 4 ... et qu'est-ce qu'elle fait?

And what does it do? It draws a line from point 100, 100 to 50, 50.

Elle dessine une ligne depuis un point 100, 100 vers un point 50,50. Fini.

Done. So map is the same thing. It's a function that takes some amount of arguments. It's actually going to be five arguments.

Donc, map() c'est la même chose: c'est une fonction qui prend une quantité d'arguments. En fait, 5 arguments.

I better give myself more room here. I can see that you're not going to be able to see this.

Je ferais mieux de me donner un peu plus de place ici

Map, it takes five arguments. One, two, three, four, five.

map() prend 5 arguments: 1, 2, 3, 4, 5.

Can you see all those?

Pouvez-vous les voir tous? Oui.

Yes. OK, so this seems like, oh, boy, five arguments.

Ok, ça ressemble à... dis donc! 5 arguments! ça fait peur!

That's terrifying.

Mais, en réalité, c'est pas si mal.

But actually, it's not so bad. So remember, I have a range that goes between 0 and 600.

Donc, rappelez-vous: j'ai une gamme de valeurs de 0 à 600,

This is the range we know that mouse x is.

il s'agit de la gamme de valeurs de mouseX, et je voudrais reporter

And I want to map this range to a range between 0 and 255,

ces valeurs vers un ensemble de valeurs de 0 à 255,

which is what I want to assign to my variable color.

que je voudrais assigner à ma variable 'col'.

So the arguments that map requires are the following.

Donc, les arguments que map() demande sont les suivants:

What is the minimum and maximum of my current range? 0 to 600.

Quel sont les minimum et le maximum de valeurs courantes? 0 à 600.

What is the minimum and maximum of my new range? 0 to 255.

Quel sont les minimum et maximum des nouvelles valeurs? 0 à 255.

And what is the value that has this range which

Et quel est la valeur qui a cette étendue,

I want to map to the new range? Well, in this case, it's mouse x.

qui ce que je veux reporter vers ce nouvel ensemble de valeur? Dans ce cas, mouseX.

So I want to map mouse x, which I know has this range, that's the x values.

Donc, je veux reporter mouseX, dont je sais qu'il a cette gamme, les valeurs de x,

And I want to map it to this range between 0 and 255

et je veux le reporter vers cet ensemble de valeurs de 0 à 255

for the purpose of color.

pour l'utiliser comme couleur.

And then when I map it, what do I do with it?

Et lorsque je fais le report, qu'est-ce que je voudrais en faire?

I want to take the result of that mapping and set it equal. Assign the result to my variable color.

Je veux prendre le résultat de ce report et l'assigner à ma variable 'col'.

So this is actually something quite new about this map function.

Donc, ce qui est en fait relativement nouveau à propos de cette fonction map().

The line function doesn't do-- it performs a task.

Cette fonction line() réalise une tâche:

Line. It draws a line in the canvas. Well, whatever. The computer draws a line on the canvas.

Elle dessine une ligne sur le canvas.

The map function actually performs a calculation

Cette fonction map() réalise en fait un calcul et répond à une question,

and answers a question. It resolves to a single number.

elle se résout vers un simple nombre, de telle sort que je puisse utiliser ce nombre

So I can use that number and assign it back to this variable.

et l'assigner à cette variable, ok?

OK? So this is kind of a new concept. Let's go try to do it in this program.

Donc, c'est une sorte de nouveau concept. Essayons de faire ça dans ce programme.

So instead of my goofy math here,

Donc, au lieu de mes calculs maladroits, mouseX/2,

mouse x divided by 2, what I want to do now

Ce que je faire maintenant Est utiliser la fonction map()

is use that map function. So I'm going to go over here, I'm going to say map,

Je vais venir ici Et je vais dire :

mouse x, which has a range between 0 and 600. Oops, I guess I better zoom back out.

map(mouseX, 0, 600, ...) (oops, je vais dézoomer)

And give me a new value within a new range between 0 and 255.

Et me donner une nouvelle valeur dans Dans une nouvelle gamme de 0 à 255.

So here, mouse x between 0 and 600

Donc ici: mouseX va de 0 à 600

give me a range from 0 and 255 and assign that

Donne-moi une gamme de valeur de 0 à 255

to this variable color, which I'm then

Et assigne cette valeur à la variable 'col'.

going to use in background.

Que je vais utiliser pour background().

And watch this.

Regarder ça…

You can see all the way perfectly white at pixel 600,

Nous pouvons voir tout le long, Parfaitement blanc au pixel 600,

perfectly black at pixel 0.

Parfaitement noir au pixel zéro.

Let's have a little more fun with this.

Amusons-nous petit peu ça !

Fun is all relative, of course.

L'amusement est tout relatif, bien sûr.

Let's give ourselves two more variables.

Donnons-nous deux variables supplémentaires,

So I'm going to make a variable r and b, r for red, b for blue.

Donc je vais créer les variables 'r' et 'b', r pour rouge (red), b pour bleu (blue),

And what I'm going to do is I'm going to set the red value equal to that mapping. So you can see now blue is at 255, red is at 0. And red, r, is getting that mapping with mouse x.

Et ce que je vais faire est Je vais mettre la valeur rouge Égale à ce report, Donc vous pouvez voir maintenant... Bleu état de 255, rouge est à 0, Et air devient ce rapport avec mouseX,

So as I move to the right, I get more pink and purple,

Donc comme je me déplace vers la droite, J'obtiens plus de rose et pourpre

all the way back more blue.

Et tout de l'autre côté, plus de bleu

And here's something interesting I could do with map.

Et voici une chose intéressante Que je pourrais faire avec map()

Let's also map the blue value.

Qui serait aussi reporter la valeur de bleu

But instead of saying when the mouse is at 0,

Mais au lieu de dire: lorsque la souris est à zéro, bleu est à 0,

the blue is at 0. When the mouse is at 600, the blue is at 255.

Lorsque la souris est à 600, bleu est à 255, faisons l'inverse!

Let's do the reverse. Let's say when the mouse is at 0, we have 255 blue,

Disons que quand la souris est à 0, On a bleu à 255,

and when the mouse is all the way on the other side,

Et lorsque la souris et toute de l'autre côté, on a 0 de bleu.

we have 0 blue. So we can also invert that range, which is great

Donc, avec map(), nous pouvons aussi inverser ses valeurs

that map will do that for us. And all the way, we can see I get all the way red,

Et tout le long nous pouvons voir j'obtiens du rouge

all the way blue, and in the middle, I've got red and blue together.

Et tout du long du bleu, au milieu, J'ai du rouge et du bleu mélangés.

And also, by the way, if you're thinking of-- so you might take this exercise,

Donc, aussi, à propos, vous pourriez reprendre cet exercice

maybe add mouse y to it, try to map mouse y.

Y ajouter mouseY éventuellement, essayer de reporter mouseY,

There's all sorts of possible things you can do with this.

Il y a plein de choses que que vous pourriez faire avec ça.

So hopefully that gives you a bit of a sense of the map function and that you found that useful, possibly.

Donc espérons, que ceci vous donne une bonne impression de ce que la fonction map() peut faire. Et que votre vieux ça utile.

OK, I'm going to stop this.

Ok, je vais arrêter ici

Sous-titres réalisés par la communauté d’Amara.org

Similar videos:

2.3: JavaScript Objects - p5.js Tutorial
The Coding Train
123.9K views 2K likes 16 dislikes 04 Sep 201564% match

3 Ways to Expand Your Speed Picking Patterns Across the Fretboard | Steve Stine Guitar Lesson
Steve Stine Guitar Lessons
131.3K views 4.6K likes 60 dislikes 02 Aug 201964% match

Burger King Mac n' Cheetos - Food Review
TheReportOfTheWeek
1.7M views 44.1K likes 2.1K dislikes 18 May 201764% match

👣Sore Ingrown Toenail Salon Pedicure Transformation How To DIY👣
The Meticulous Manicurist Nail Tutorials
200.9K views 3.8K likes 181 dislikes 24 Jan 202064% match

WHAT HAPPENS AT A SLEEPOVER? | We Are The Davises
We Are The Davises
376.5K views 2.1K likes 90 dislikes 10 May 201664% match

DEMI BAGBY & CHRIS HERIA IN MIAMI | VLOG 5 S 2
CHRIS HERIA
407.6K views 11K likes 120 dislikes 25 Jan 201864% match

We lost (not happy) LWIAY - #0072
PewDiePie
15M views 1M likes -1 dislikes 30 Mar 201963% match

McDonald's NEW Spicy BBQ Chicken Sandwich Review!
TheReportOfTheWeek
216.5K views 8.6K likes 166 dislikes 17 Sep 201963% match

We're having a BABY
Paolo fromTOKYO
612.5K views 26.2K likes -1 dislikes 10 Jan 202063% match

Unmixing Color Machine (Ultra Laminar Reversible Flow) - Smarter Every Day 217
SmarterEveryDay
5.2M views 170.8K likes -1 dislikes 22 May 201963% match

DESPACITO 2 CONFIRMED BY MARKIPLIER [MEME REVIEW] 👏 👏 #22
PewDiePie
6.4M views 375.9K likes 7.2K dislikes 26 May 201863% match

MY LEAKED ANALYTICS LWIAY #0042
PewDiePie
5.6M views 348.1K likes 0 dislikes 13 Jul 201863% match

RED COPPER PAN vs ORGREENIC CERAMIC COOKWARE REVIEW | TESTING AS SEEN ON TV PRODUCTS
Vivian Tries
296.9K views 3.8K likes 1.6K dislikes 21 Jan 201763% match

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

The Coding Train!
The Coding Train
362.9K views 3.8K likes 194 dislikes 22 Sep 201725% match

Settings Privacy About Contact Donate