A2 · Episode 2 · 5:53
Understanding Coordinates in Scratch: X and Y Axes
This episode explains how Scratch positions sprites on screen using pixels and the Cartesian coordinate system. It covers the X (horizontal) and Y (vertical) axes, the origin (0,0), and how sprite positions are determined by their center point's coordinates.
Source：ericgrisperez / tube-numerique-educatif.apps.education.fr · License：CC BY 4.0
Transcript
Bonjour à tous, aujourd'hui nous allons découvrir comment Scratch sait où placer les
Hello everyone! Today we’ll learn how Scratch knows where to place sprites on the screen.
lutins sur l'écran.
where sprites are located on the screen.
Pour ça, nous allons parler de deux choses très importantes:
To do this, we’ll talk about two very important things:
les pixels et le repère orthonormé,
pixels and the Cartesian coordinate system,
c'est- à- dire un système de coordonnées en x et y.
that is, a coordinate system using x and y axes.
Commençons par les pixels.
Let’s start with pixels.
Les pixels, ce sont des petits points qui forment une image.
Pixels are tiny dots that make up an image.
Si vous regardez bien votre écran,
If you look closely at your screen,
vous verrez qu'il est composé de plusieurs milliers de pixels.
you’ll see it’s made up of several thousand pixels.
Un pixel, c'est un tout petit carré de couleur.
A pixel is a tiny square of color.
Quand on met plein de pixels côte à côte, on obtient une image,
When many pixels are placed side by side, they form an image,
comme un puzzle composé de minuscules pièces.
just like a puzzle made of tiny pieces.
Scratch utilise ces pixels pour savoir où se trouvent les lutins.
Scratch uses these pixels to know where sprites are located.
il y a trois cent soixante pixels qui vont du haut vers le bas et quatre cent quatre
On the screen, there are 360 pixels from top to bottom,
vingts pixels qui vont de droite vers la gauche
and 440 pixels from right to left,
ce qui nous fait en tout cent soixante douze huit cents pixels à l'écran
giving us a total of 162,800 pixels on screen.
Pour se repérer, Scratch a besoin d'un système de coordonnées pour être efficace,
To navigate accurately, Scratch needs an efficient coordinate system,
comme sur une carte ou un plan.
just like a map or floor plan.
C'est ce qu'on appelle le repère orthonormé.
This is called the Cartesian coordinate system.
Sur Scratch, l'espace où les lutins bougent s'appelle la scène.
In Scratch, the area where sprites move is called the stage.
Et cette scène est organisée comme un grand quadrillage invisible.
This stage is organized like a large invisible grid.
Voyons cela de plus près.
Let’s take a closer look.
Je vais me mettre en plein écran et je vais afficher ici la grille qu'utilise
I’ll switch to full-screen mode and display the grid Scratch uses.
Scratch. Voici maintenant les deux axes que Scratch utilise pour se repérer.
Here are the two axes Scratch uses for positioning.
Vous retrouvez ici en orange un axe horizontal qui s'appelle abscisse.
The orange horizontal axis here is called the x-axis.
Il sera symbolisé par la lettre x.
It will be represented by the letter x.
Et nous retrouvons un axe vertical appelé ordonnée qui sera symbolisé par la lettre
And we have a vertical axis called the y-axis,
y. Au centre de la scène, là où les deux axes se croisent,
which will be represented by the letter y.
il y a un point très important.
At the center of the stage—where the two axes intersect—
C'est le point de coordonnées x zéro et y zéro.
there is a very important point:
C'est ce qu'on appelle l'origine.
the origin, where x equals zero and y equals zero.
L'axe X va servir à dire si le lutin va à gauche ou à droite.
The x-axis tells us whether the sprite moves left or right.
L'axe Y va permettre de dire si le lutin va en haut de l'écran ou en bas de l'écran.
The y-axis tells us whether the sprite moves up or down on the screen.
Voyons comment lire des coordonnées dans Scratch.
Let’s see how to read coordinates in Scratch.
Je vais afficher un pixel.
I’ll display a single pixel.
Voici le pixel qui est affiché.
Here is the pixel that appears.
Pour savoir où il est situé sur l'écran,
To find out where it is located on the screen,
Scratch va regarder sur son repère orthonormé.
Scratch looks at its Cartesian coordinate system.
Il va commencer par son axe x, l'axe des abscisses, il va avancer.
It starts with the x-axis (the horizontal axis) and moves along it;
puis va remonter vers le pixel,
then it goes upward to reach the pixel,
ce qui va lui donner la coordonnée x égale cent.
giving it an x-coordinate of 100.
Puis il va faire la même chose sur l'axe y.
Then it does the same thing for the y-axis.
Il va monter jusqu'à rencontrer le point,
It moves upward until it reaches the point,
va tracer un repère et va lire la coordonnée y égale 100.
draws a reference line, and reads the y-coordinate as 100.
Ce pixel est donc situé aux coordonnées x cent y cent.
So this pixel is located at coordinates (x = 100, y = 100).
Dans notre exemple ici, c'est très simple, il s'agit d'un pixel tout seul.
In this example, it’s very simple: just one single pixel.
Comment cela se passe t il lorsqu'il s'agit d'un lutin complet,
But what happens when the object is a full sprite,
comme par exemple le chat Scratch?
such as the Scratch cat?
ici comment lire les coordonnées de ce chat
How do we read the coordinates of this cat?
beaucoup plus compliqué
It becomes much more complex,
car ce chat est composé de plusieurs pixels
because this cat consists of many pixels.
Ce qu'il faut comprendre ici, c'est que Scratch ne va focaliser son attention que
What you need to understand is that Scratch focuses only on one pixel:
sur un seul pixel, celui qui est au centre du chat.
the one right at the center of the cat.
Voyons comment il est composé.
Let's see how it is composed.
Voici notre chat Scratch, composé de plusieurs pixels.
Here is our sprite 'Scratch', made up of several pixels.
Si je sélectionne mon image, je vois apparaître autour un rectangle,
If I select my image,
et au centre de ce rectangle, je vois apparaître une croix.
a rectangle appears around it, and a cross appears at the center of that rectangle.
Cette croix symbolise le pixel sur lequel le logiciel va concentrer son attention.
This cross symbolizes the pixel on which the software will focus its attention.
C'est cette croix là qui sera identifiée par les coordonnées.
It is this cross that will be identified by coordinates.
Ici, c'est plus compliqué pour trouver exactement où se situe le pixel au centre de
Here, it’s more complicated to find exactly where the pixel at the center of
ce lutin. Pas de panique.
this sprite is located. Don’t panic.
Si j'enlève le mode plein écran,
If I exit full-screen mode,
on peut s'apercevoir que Scratch a déjà fait le travail pour moi.
we can see that Scratch has already done the work for me.
Je sais que le pixel au centre de ce lutin se situe à moins 69 en X et à moins 84 en
I know the pixel at the center of this sprite is at X = -69 and Y = -84.
Y. Quand tu placeras tes lutins à l'écran,
When you place your sprites on screen,
ça sera très utile de te référer directement à ça.
it’ll be very helpful to refer directly to these values.
Effectivement ici, si je déplace mon lutin,
Indeed, here—if I move my sprite,
on peut voir ses coordonnées se mettre directement à jour là où je l'emmène.
we can see its coordinates update instantly as I drag it around.
Par exemple, je viens le poser ici, je sais qu'il est en X- 100 et Y 105.
For example, I place it here—I know it’s at X = -100 and Y = 105.
Je l'emmène plus bas,
I move it lower,
je vois qu'ici il est en X 99 et Y- 97.
and I see it’s now at X = 99 and Y = -97.
Avec cette lecture, c'est beaucoup plus simple de retrouver les coordonnées de notre
With this reading method, it’s much easier
lutin. Tu pourras garder en mémoire que la grille est composée de cette manière.
to find our sprite’s coordinates. You can remember that the grid is set up this way.
Ici nous avons des points X positifs et Y positifs.
Here, we have positive X and positive Y values.
Dans la partie bleue, nous avons des X positifs et des Y négatifs.
In the blue area, X is positive and Y is negative.
Dans la partie jaune, des X négatifs, des Y positifs.
In the yellow area, X is negative and Y is positive.
Et enfin des X négatifs et Y négatifs pour la zone en bas à gauche.
And finally, in the bottom-left zone, both X and Y are negative.
Voici les points importants que tu dois retenir.
Here are the key points you need to remember.
Un pixel, c'est un petit point de couleur de l'écran.
A pixel is a tiny colored dot on the screen.
Dans Scratch, on utilise des coordonnées pour placer les lutins.
In Scratch, we use coordinates to position sprites.
L'axe des abscisses, symbolisé par la lettre x, sert à placer notre état,
The horizontal axis is labeled x,
de la gauche vers la droite.
and it determines sprite position from left to right.
L'axe des ordonnées, symbolisé par la lettre y,
The vertical axis is labeled y,
permet de placer notre lutin sur le haut ou sur le bas de l'écran.
and it determines sprite position on the top or bottom of the screen.
Le point x zéro et y zéro est le
The point where x equals zero and y equals zero is
centre de l'écran.
the center of the screen.
Dans notre prochaine vidéo, nous verrons comment nous servir de ces axes pour faire
In our next video, we’ll learn how to use these axes
bouger notre lutin.
to make our sprite move.