2.3: JavaScript Objects - p5.js Tutorial The Coding Train English (auto-generated) French

2.3: JavaScript Objects - p5.js TutorialYouTube↗ IA↗(long shot)
Education 123.9K views 2K likes 16 dislikes 04 Sep 2015 Show Contributors 2

The Coding Train 1.8M subscribers United States YouTube↗

Contributed subtitles

Hindi manaswini das

French Bernard Niset

Click to Play Video

so hopefully by now you've played a little bit with variables in p5 may be

Donc, avec un peu de chance maintenant, vous avez pu jouer un peu avec les variables dans p5.

used mouse X bounce y-you made up some

Peut-être avez vous utilisé mouseX, mouseY,

of your own variables and I want to look

vous avez inventé quelque unes de vos propres variables.

actually at an example it doesn't really

Et je voudrais en fait regarder un exemple,

have a lot more to it this example is

il n'y a pas vraiment grand chose en plus,

just like the one I made previously

cet exemple est just comme celui que j'avais fait précédemment,

where I have a circle that's just moving

où j'avais un cercle qui se déplaçait à travers l'écran.

across the screen and but and you can see here how did I do that there's an

Et vous pouvez voir ici: comment j'ai fait ça?

incrementation operation right down here

Il se trouve une opération d'incrémentation juste ici:

that every time through draw X goes up

qui fait que chaque fois que l'exécution passe dans draw(), x augmente de 1.

by one so first the circles here then it

Donc d'abord, le cercle est ici, ensuite il s'éloigne de un,

goes up by one then it's here at then

ensuite il est ici, puis ici, etc.

it's here that it's here so that's how you move something on the screen now one

C'est de cette façon que vous déplacez quelque chose à l'écran.

thing I did here is I added a whole lot

Maintenant, une chose que j'ai faite ici, est que j'ai ajouté toute une série

of other variables let's have a Y and a

d'autres variables.

diameter for the size of that circle an

Un 'y' et un 'diamètre' pour la taille du cercle.

RGB variables for the background so

Et des variables R, G, B pour la couleur de fond.

maybe I could do some things like

Donc, peut-être que je pourrais faire quelque chose comme incrémenter

increment the red amount decrement the

la quantité de rouge, décrémenter la valeur de vert.

green amount so and hopefully these are the kinds of things that you've been playing with and what I want to do in

Et, avec un peu de chance, ce sont des sortes de choses avec lesquelles vous avez jouez déjà.

this video is show you a way to organize your variables and while it seems a little bit silly and premature perhaps

Et ce que je voudrais faire dans cette vidéo c'est vous montrer une façon d'organiser vos variables. Et malgré le fait que ça puisse sembler un peu idiot et prématuré peut-être,

you're like this is fine I'm actually not going to change anything

c'est pas mal! Je ne vais en fait rien changer

about this program but I'm just going to

à propos de ce programme, mais je vais juste changer

change the way it's organized and this

la façon dont il est organisé.

is going to set a foundation for later

Et ceci définira une fondation pour plus tard,

as well as like help you to kind of just keep your code in a neat and tidy way

de même que vous aider à garder votre code propre et net,

which is something that I'm a little too

ce qui est quelque chose qui m'obsède juste un petit peu

obsessed about and that's I'm really working on it really am I swear okay so

mais j'y travaille, vraiment, je le jure.

let's think about how that could work so

Ok, réfléchissons à comment cela pourrait marcher.

let's just say for the moment that I have a variable X and it has an initial

Disons juste pour le moment que j'ai une variable x,

value of 0 and I have a variable Y and it has an initial value of 100 and I

et qu'elle a une valeur initiale de 0. Et j'ai une variable y qui a une valeur initial de 100.

have a variable diameter which has an initial value of 50 so these three

Et j'ai une variable 'diameter' qui a une valeur initial de 50.

variables they go together

Donc, ces 3 variables vont ensemble, non?

right I'm kind of using them for that

Je les utilise pour ce cercle:

circle X I'm using for the exposition of

x pour la position x du cercle sur l'écran,

that circle on the screen the Y position using from the circle on the screen and

y pour la position y du cercle sur l'écran,

the diameter for that circle in the

et le diametre du cercle sur l'écran.

screen and while this relationship of

Et malgré le fait que cette relation entre ces variables existe seulement

these variables is only something in my mind JavaScript doesn't care the

dans mon esprit, Javascript s'en moque!

computer doesn't carat you can use the

L'ordinateur s'en moque. Vous pourriez utiliser ces variables pour n'importe quoi.

variables for anything I could plug this x value into the color for something it

Je pourrais mettre cette valeur x dans la couleur de quelque chose.

would work it might be helpful if I could put all of these together and

Et ça marcherait. Ca pourrait être utile si je pouvais mettre toutes ces variables ensemble.

there is a way I could do that I can say

Et il y a une façon dont je peux faire ça.

var and I could say circle so I have

Je peux dire 'var' et je peux dire 'circle' (cercle)

this circle on the screen and I'm going to call it a circle and then what I'm

Donc, j'ai un cercle à l'écran et je vais l'appeler 'circle'.

going to do is say equals and I'm going

Et alors, ce que je vais faire est dire 'equals'

to have an open curly bracket and a close curly bracket so circle is now

et accolade ouvrante et accolade fermante. Donc circle est... Maintenant, ce qui se passe maintenant

what's happening a circle you can think

vous pourriez considérer 'circle' comme un conteneur.

of it as a container what I would like to do is instead of having three

Ce que je voudrais faire est au lieu d'avoir 3 variables

variables floating on their own I would

existant indépendamment, je voudrais

like to not have these three variables

que ces variables n'existent pas indépendamment,

floating on their own but I would like to put those three variables inside of this variable called circle in order to

mais je voudrais mettre ces 3 variables à l'intérieur de cette variable appelée 'circle'.

do that I'm going to say x colon 0 comma

Pour faire ça, je vais dire: x: 0,

boy I really hope I'm getting the syntax

(j'espère ne pas me tromper de syntaxe, car

to this right because this is new for me

c'est nouveau pour moi)

and if I get it wrong I can always make

Et si je me trompe, je pourrais toujours le refaire. Je suis sur que quelqu'un

it again and I'm sure somebody on the internet will tell me if anybody

sur Internet me le dira, si quelqu'un réellement regarde ceci.

actually watches this why : 100 comma diameter : 50 now where the line breaks are don't actually matter the curly

y: 100, diameter: 50 Maintenant, là où on passe à la ligne, n'a pas vraiment d'importance.

brackets matter the colons matter in the

Les accolades comptent. Les deux points comptent, les virgules comptent.

commas matter so you can see that just like set up function set up was a block

Donc, vous pouvez voir que, exactement comme setup(), la fonction setup() était un bloc de code,

of code with a beginning and an end function draw is a block of code with

avec un début et une fin, la fonction draw() est

the beginning and this variable circle

un bloc de code avec un début et une fin,

now has a block of code with the

cette variable 'circle' maintenant a bloc de code avec un début et une fin,

beginning and an end and circle is a container for these three variables now

et 'circle' est un conteneur pour ces trois variables.

container is actually not the technical

Maintenant, conteneur n'est pas vraiment le terme technique pour ça,

term for this and what is interesting about what you have just seen here is

et ce qui est intéressant au sujet de ce que vous avez vu ici,

you have now learned about JavaScript objects JavaScript objects the syntax

vous avez maintenant appris les objets Javascript. Les objets Javascripts.

for this is JavaScript object notation

La syntaxe pour ceci s'appelle la notation objet Javascript (Javascript object notation).

the way that you create an object this

La façon dont vous créez un objet, ce 'circle' est un objet,

circle is an object that object has data inside of it it has

et cet objet contient des données:

an X a Y in a diameter and boy are we

il a un x, un y et un diametre.

going to someday get to some really

Et, nous allons obtenir des choses passionnantes

exciting stuff where we see that an object can also have behaviors and so

où nous allons voir cet objet que cet objet peut aussi avoir des comportements

much more to it but right now you could

et tellement plus de choses.

Mais maintenant, vous pouvez penser 'voici mon object circle

there's my circle object and I'm visualizing the circle object on the

et je visualise mon objet circle sur l'écran,

screen I'm visualizing its data its X is

je visualise ces données.

0 it's wise hundred into diameters fifty

Son x est 0, son y est 100, son diamètre est 50.

by the way I'm using these terms by

A propos, je n'utilise pas ces termes par accident, ce qui est super excitant

accident what's super exciting about this is learning this we're not going to

à ce propos est, regardez ça, [...]

get to this for many many videos this is

beaucoup, beaucoup de vidéos, c'est exactement la façon dont vous obtiendrez des données

exactly how you get data from lots of

à partir de plein de choses.

things so if you want to get the today's weather into your p5.js sketch you might

Donc, si vous voulez obtenir la météo d'aujourd'hui pour votre sketch p5.js

connect to some weather service that's

vous pourriez vous connecter à un service de météo qui vous enverra

going to send you data it's going to

send you data exactly like this weather

Il vous enverra les données exactement comme ça.

: temp you know weather equals bracket temperature : high temperature : so

temps = { temperature: , high temperature:

learning this syntax is that is going to

donc apprendre cette syntaxe sera la fondation

lay the foundation for just about everything you do in JavaScript here is

de tout ce que vous allez faire en Javascript.

a JavaScript object so let's now look at

Voici un objet Javascript.

how we implement this in the code so I'm

Donc, regardons maintenant comment nous pouvons l'implémenter dans le code.

coming back over here and instead of these three variables and we're going to

Donc, je reviens ici, et au lieu de ces 3 variables, et on va se rendre compte

find out if I did this correctly syntax

si j'ai fait tout ça correctement au niveau syntaxique

wise X : 0 Y : 200 oops I put a semicolon there comma is actually correct and then diameter :

x:0, y:200, Oops, j'ai mis un point virgule là, une virgule est en fait correct,

50 and I can put a semicolon there so

et enfin diameter:50 et je peux mettre un point virgule là.

this is really one line of code it ends

Donc, c'est en réalité une seule ligne de code.

with a semicolon but I'm breaking it

Elle termine avec un point virgule, mais je le sépare en plusieurs lignes,

into separate lines I'm going to use p5

et je peux utiliser la fonction auto-format du p5 editor,

editors Auto format whoops which you can

see it sort of auto formatted for me and

qui comme vous pouvez le voir, a en quelque sort auto-formaté le code pour moi

this is sort of like a standard way of

et c'est en quelque sorte la façon standard de le faire.

doing it so sorry that was a bit of a digression

Donc, c'était juste une petite digression.

when I did just notice a little bug in the editor which I'm going to file

Mais je viens de remarquer un petit bug dans l'éditeur que je vais reporter.

Susan's over so x is 0 Y is 200 diameter

Donc x est 0, y est 200 et le diameter est 50.

is 50 so I can remove these variables from the top and I'm going to hit save

Donc je peux enlever ces variables tout au dessus

and now I'm going to run this AHA now

et je vais appuyer sur 'sauvegarder' et maintenant je vais exécuter ça. Aha! Maintenant regardez ça.

look at this we this is also key moment

C'est aussi un moment clé parce que vous allez obtenir

because boy are you going to have a lot of errors happening when you run your

énormément d'erreurs lorsque vous allez exécuter votre code.

code so I'm going to zoom in to the

Donc, je vais faire un zoom sur le bas

bottom here and we can see what is this

et nous pouvons voir: quelle est cette erreur?

error uncaught reference error is not defined on line 20 so I'm going

'Uncaught ReferenceError: x is not defined' on line 20

to zoom back out when you go down to

Donc, je vais dézoomer et aller à la ligne 20,

line 20 X is not defined well X is no

ah, x n'est pas défini, ou plutôt, x n'est plus défini,

longer defined I didn't declare a

je n'ai pas déclaré de variable nommée 'x'.

variable named X what I did is I declared a variable named circle which

Ce que j'ai fait est déclaré une variable nommée 'circle', qui est en fait un objet,

is an object and one of the fields one of the pieces of data in that object is

et un de ses champs, un des morceaux de données de cette objet est 'x'.

X so how do I get then that X which is inside of the circle and the way that

Donc, comment puis-je obtenir le x qui se trouve à l'intérieur du cercle?

you do that is with something known as

La façon dont vous faites ça est avec quelque chose connue sous le nom de

dot syntax right when I just had this

syntaxe point, d'accord?

variable variable X I just said ellipse

Lorsque j'avais juste cette variable, cette variable x, j'avais juste dis:

at X so now what do I want to do I want

ellipse(x, Donc maintenant, je fais quoi?

to draw the ellipse at what I want to

Je veux dessiner l'ellipse à quoi?

draw the ellipse at the circles X right

Je veux dessiner l'ellipse au x de circle, d'accord?

the X inside circle and the way that I

Le x à l'intérieur de circle. Et de cette façon, j'obtiens ça

get there is I refer to the variable name circle and I get to that x-value

est en référençant la variable 'circle' et j'accède à cette

inside with a dot dot X circle dot X

valeur x à l'intérieur en utilisant un point. point x. circle.x

okay let's go back now over here and come

OK, revenons ici maintenant.

down to here and I'm going to say circle

Et aller ici en bas, et je vais dire:

dot X circle dot Y circle diameter and circle dot diameter okay oh and look at

circle.x, circle.y, circle.diameter, circle.diameter Ok, oh, regardez ça! J'ai déjà oublié,

this I've already forgotten was going to

J'allais presque exécuter à nouveau

almost ran this again I'm just going to say uncaught error because on line 22 X

et il aurait donné une erreur parce qu'à la ligne 22, cet x est non défini

is not defined because I need to change this to circle dot X and circle dot X so

parce que je dois changé ceci pour: circle.x et circle.x

I run this and we've got the same exact

Donc, si j'exécute et j'obtiens exactement le même programme à présent.

program now again nothing new has

Encore, rien de neuf ne se passe ici.

happened here so the same exact program as before but I did do something

Exactement le même programme qu'avant, mais j'ai fait quelque chose d'intéressant

interesting which I organized a bunch of variables into something which leads to

qui est: j'ai organisé un ensemble de variables en quelque chose.

me to like a point where it's like maybe

Ce qui m'amène à un point où je me dis

this might be useful if I were to make two of them right circle one and circle

que ça pourrait être utile si j'en faisais deux, d'accord?

two this way I don't have all these x1 x2 y1 y2 everything floating around so

circle1 et circle2 De cette façon, je n'ai pas tous ces x1, x2, y1, y2...

this way of organizing your collections

toutes ces choses qui se baladent Donc cette façon d'organiser votre ensemble de variables

of variables that are being used together conceptually into an object can

qui sont utilisées ensemble conceptuelement en un objet

really help you organize and keep track

peut vraiment vous aider à organiser et garder trace des choses

of things and lays a good foundation for a lot of

et poser les bases pour une quantité de choses.

things there's a lot more we're going to do with object-oriented programming

Il y a bien plus que nous pourrons faire avec la programmation orientée object plus tard

later and it also sets the foundation

et ça nous permettra de jeter les bases du travail avec des données

for working with data that comes from other sources because it will have

qui viennent d'autres sources parce ça aura exactement

exactly the same syntax so as an

la même syntaxe.

exercise that you might try for yourself

Don un exercice que vous pourriez essayer par vous même est:

is see if you can take something you're

voir si vous pouvez prendre quelque chose sur lequel vous travaillez,

working on reorganize your variables

et réorganiser vos variables en objets,

into these objects and you know if you're looking at this one trying to

et si vous regardez celui-ci, essayez de faire 2 objets

make two objects try to maybe take make

essayez de, peut-être, faire votre propre object couleur qui a

your own color object that has an RGB

un R, G, B et un alpha éventuellement,

and alpha perhaps in it those are things

il s'agit là des choses que vous pourriez essayer de faire!

that you could try to do and hopefully this video was useful and interesting to

Et espérons que cette vidéo était utile et intéressante pour vous!

you and I finished recording it excellent okay good bye Oh

Et j'ai fini de l'enregistré. Parfait, au revoir!

Similar videos:

JavaScript Tutorial - Understanding OBJECTS
LinkedIn Learning
1.7K views 15 likes 1 dislikes 14 Dec 202075% match

JavaScript Tutorial
Derek Banas
1.3M views 14.2K likes 421 dislikes 20 Sep 201567% match

PEOPLE ACTUALLY BELIEVE THE EARTH IS FLAT.
PewDiePie
15.9M views 586.6K likes 9.6K dislikes 05 Apr 201866% match

Voice Teacher Reacts to Maria Rita - Como Nossos Pais
Master of Voice
243.4K views 23K likes 89 dislikes 19 Jun 202066% match

Making a DIY GIMBAL in 2 HOURS! | CineBattle
Cinecom.net
130.6K views 4.8K likes 158 dislikes 10 Nov 201966% match

MEXICAN FOOD TASTE TEST #1
Vivian Tries
199.3K views 4K likes 475 dislikes 29 Oct 201465% 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 201965% match

Is Chick-fil-A's Mac and Cheese better than Grandma's?
TheReportOfTheWeek
340.5K views 13.1K likes 310 dislikes 06 Sep 201965% match

PLANTED TANK LEGENDS - 7x WORLD CHAMPION JOSH SIM WORKSHOP
Green Aqua
2.8M views 36.5K likes -1 dislikes 16 Oct 201965% 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 201765% match

Little Caesars Thin Crust Pepperoni Pizza Review
TheReportOfTheWeek
315.9K views 11K likes 408 dislikes 05 Nov 201864% match

PLANTING OUR PALUDARIUM - THE RAINFOREST IS READY WITH THE WATERFALL
Green Aqua
222.9K views 6.6K likes 69 dislikes 25 Dec 201964% match

What is Tik Tok and is it Safe? TikTok - Part 8
PewDiePie
8.7M views 540.1K likes -1 dislikes 23 Dec 201864% match

The SUPREME Custom PC!
Dave2D
723.6K views 22.9K likes 1.2K dislikes 30 Dec 201764% 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

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

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

Coding Challenge #14: Fractal Trees - Recursive
The Coding Train
793.5K views 14.7K likes 205 dislikes 30 May 201624% match

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

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

8.1: What is Object-Oriented Programming (OOP)? - Processing Tutorial
The Coding Train
464.8K views 5.4K likes 254 dislikes 24 Jul 201523% match

10.5: Working with APIs in Javascript - p5.js Tutorial
The Coding Train
375.1K views 7.4K likes 134 dislikes 30 Oct 201520% match

Settings Privacy About Contact Donate