28:I[76545,["72190","static/chunks/d012089c-332b2cdf12058945.js","80988","static/chunks/80988-80efa22e33155f97.js","85529","static/chunks/85529-ed204f0f47b12f03.js","87915","static/chunks/87915-c5391cf8a52b0f5e.js","49539","static/chunks/49539-75205cda1cc75638.js","16535","static/chunks/16535-0e435d803516ee88.js","89524","static/chunks/89524-6867e4b7442f382b.js","46856","static/chunks/46856-929232a975a49956.js","33411","static/chunks/33411-a0cc21d624eda950.js","54199","static/chunks/54199-7fb349f2066a0b0c.js","39474","static/chunks/39474-0d41af63d3c84160.js","1562","static/chunks/1562-939c16808d007de0.js","22472","static/chunks/22472-94b900c4edb9c804.js","32069","static/chunks/32069-0a6a6d2ba2ed1dbc.js","14559","static/chunks/14559-179c8f9dd2f76a9a.js","32605","static/chunks/32605-c70e0f366e8d12d1.js","44439","static/chunks/44439-63cd5e6b626be9a7.js","53021","static/chunks/53021-41030f422bc54423.js","22664","static/chunks/22664-aed199b730be2d49.js","50850","static/chunks/50850-106f424f3a954607.js","25055","static/chunks/25055-035cabec0472f52b.js","95074","static/chunks/95074-a3046c89dc538678.js","10161","static/chunks/10161-86f5ed37161541eb.js","43989","static/chunks/43989-348fcb0d2accabfd.js","867","static/chunks/app/(app)/cours/%5Bslug%5D/%5BpageSlug%5D/page-48177ead14712d3c.js"],"CourseLessonLayoutRegistrar"] 25:["$","div",null,{"className":"course-page-header__rule","aria-hidden":true}] 29:T617,\begin{tikzpicture}[x={(-0.5cm,-0.25cm)}, y={(0.9cm,-0.1cm)}, z={(0cm,1cm)}, scale=3.5, line join=round, line cap=round] % --- 1. SOMMETS (Coordonnées) --- \coordinate (A) at (0,0,0); \coordinate (B) at (1,0,0); \coordinate (C) at (1,1,0); \coordinate (D) at (0,1,0); \coordinate (E) at (0,0,1); \coordinate (F) at (1,0,1); \coordinate (G) at (1,1,1); \coordinate (H) at (0,1,1); % --- 2. FACES (Colorées individuellement avec opacité) --- \fill[fill=svgaccentsix, opacity=0.3] (A) -- (B) -- (C) -- (D) -- cycle; % Bas \fill[fill=svgaccent, opacity=0.3] (E) -- (F) -- (G) -- (H) -- cycle; % Haut \fill[fill=svgaccentfive, opacity=0.3] (A) -- (B) -- (F) -- (E) -- cycle; % Avant-gauche \fill[fill=svgaccenttwo, opacity=0.3] (B) -- (C) -- (G) -- (F) -- cycle; % Avant-droit \fill[fill=svgaccentthree, opacity=0.3] (C) -- (D) -- (H) -- (G) -- cycle; % Arrière-droit \fill[fill=svgaccentfour, opacity=0.3] (D) -- (A) -- (E) -- (H) -- cycle; % Arrière-gauche % --- 3. ARÊTES CACHÉES --- \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (B); \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (D); \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (E); % --- 4. ARÊTES VISIBLES --- \draw[color=svgink, thick] (E) -- (F) -- (G) -- (H) -- cycle; \draw[color=svgink, thick] (B) -- (F); \draw[color=svgink, thick] (C) -- (G); \draw[color=svgink, thick] (D) -- (H); \draw[color=svgink, thick] (B) -- (C) -- (D); \end{tikzpicture}2a:T8b4,

Pour représenter notre cube en trois dimensions, nous allons utiliser un repère composé de trois axes : , et . Contrairement au repère utilisé en 2D, qui ne possède que les axes et , ce nouveau repère permet de représenter la profondeur grâce à l'axe .

Axe : il représente la dimension horizontale. Une valeur positive de déplace un point vers la droite, tandis qu'une valeur négative le déplace vers la gauche.
Axe : il représente la dimension verticale. Dans le repère utilisé ici, les valeurs positives de correspondent à un déplacement vers le bas de l'écran, comme c'est généralement le cas dans Processing.
Axe : il représente la profondeur. Il permet de déplacer un point vers l'avant ou vers l'arrière de la scène afin de représenter la troisième dimension.

On peut ainsi représenter la position d'un point dans l'espace par trois coordonnées :

2b:T696,\begin{tikzpicture}[x={(-0.5cm,-0.25cm)}, y={(0.9cm,-0.1cm)}, z={(0cm,1cm)}, scale=5.5, line join=round, line cap=round] % --- 1. SOMMETS (Coordonnées) --- \coordinate (A) at (0,0,0); \coordinate (B) at (1,0,0); \coordinate (C) at (1,1,0); \coordinate (D) at (0,1,0); \coordinate (E) at (0,0,1); \coordinate (F) at (1,0,1); \coordinate (G) at (1,1,1); \coordinate (H) at (0,1,1); % --- 2. FACES (Colorées individuellement avec opacité) --- \fill[fill=svgaccentsix, opacity=0.3] (A) -- (B) -- (C) -- (D) -- cycle; % Bas % --- 3. ARÊTES CACHÉES (Tracées en premier pour être à l'arrière-plan) --- \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (B); \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (D); \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (E); % Ajouté pour la cohérence du cube si vous tracez le reste plus tard % --- 4. ARÊTES VISIBLES --- \draw[color=svgink, thick] (B) -- (C) -- (D); % --- 5. NOMS DES SOMMETS (Ajustés précisément au repère 3D) --- % label={[label distance=espace]angle:texte} \node[circle, fill=svgink, inner sep=0.8pt, label={[label distance=-1pt]160:\color{svgink}$A$}] at (A) {}; \node[circle, fill=svgink, inner sep=0.8pt, label={[label distance=-2pt]-100:\color{svgink}$B$}] at (B) {}; \node[circle, fill=svgink, inner sep=0.8pt, label={[label distance=-1pt]-20:\color{svgink}$C$}] at (C) {}; \node[circle, fill=svgink, inner sep=0.8pt, label={[label distance=-1pt]45:\color{svgink}$D$}] at (D) {}; % --- 6. COORDONNÉES DE L'ORIGINE --- \node at (1.4, 0.2, 0) {$(0,0,0)$}; \end{tikzpicture}2c:T700,

Si l’on considère désormais comme l’origine du repère, alors on a :

Pour déterminer les coordonnées des autres sommets, il suffit d’observer les déplacements nécessaires depuis $B$.

Pour atteindre depuis , on se déplace en profondeur.
On obtient donc :
Pour atteindre depuis , on se déplace en largeur vers la droite.
On obtient donc :
Pour atteindre depuis , on se déplace en profondeur vers l'avant.
On obtient donc :

Ainsi, les quatre sommets de la face sont donnés par :

Les coordonnées correspondent donc directement aux déplacements effectués depuis l’origine selon les trois axes du repère.

2d:Tb71,\begin{tikzpicture}[ x={(-0.5cm,-0.25cm)}, y={(0.9cm,-0.1cm)}, z={(0cm,1cm)}, scale=5.5, line join=round, line cap=round ] % --- 1. SOMMETS --- \coordinate (A) at (0,0,0); \coordinate (B) at (1,0,0); \coordinate (C) at (1,1,0); \coordinate (D) at (0,1,0); \coordinate (E) at (0,0,1); \coordinate (F) at (1,0,1); \coordinate (G) at (1,1,1); \coordinate (H) at (0,1,1); % --- 2. FACE --- \fill[fill=svgaccentsix, opacity=0.3] (A) -- (B) -- (C) -- (D) -- cycle; % --- 3. ARÊTES CACHÉES --- \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (B); \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (D); \draw[color=svgink, dashed, thin, opacity=0.6] (A) -- (E); % --- 4. ARÊTES VISIBLES --- \draw[color=svgink, thick] (B) -- (C) -- (D); % --- 5. SOMMETS + COORDONNÉES --- % A = (0,0,1) \node[circle, fill=svgink, inner sep=0.8pt] at (A) {}; \node[ anchor=east, text=svgink, font=\small ] at (-0.05,0,0) {$A\;(0,0,1)$}; % B = (0,0,0) \node[circle, fill=svgink, inner sep=0.8pt] at (B) {}; \node[ anchor=north west, text=svgink, font=\small ] at (1.02,-0.08,0) {$B\;(0,0,0)$}; % C = (1,0,0) \node[circle, fill=svgink, inner sep=0.8pt] at (C) {}; \node[ anchor=north west, text=svgink, font=\small ] at (1.02,0.92,0) {$C\;(1,0,0)$}; % D = (1,0,1) \node[circle, fill=svgink, inner sep=0.8pt] at (D) {}; \node[ anchor=south, text=svgink, font=\small ] at (0,1.05,0) {$D\;(1,0,1)$}; % ========================================================= % REPÈRE % ========================================================= \begin{scope}[ shift={(-0.65cm,1.25cm)}, scale=0.18, x={(1cm,0cm)}, y={(0cm,1cm)} ] % Origine \coordinate (O) at (0,0); % Axe X \draw[ ->, line width=1.5pt, svgaccent ] (O) -- (4,0) node[above right, text=svgink, font=\large] {$x$}; % Axe Y \draw[ ->, line width=1.5pt, svgaccenttwo ] (O) -- (0,-4) node[below left, text=svgink, font=\large] {$y$}; % Axe Z \draw[ ->, line width=1.5pt, svgaccentthree ] (O) -- (2,1.5) node[below right, text=svgink, font=\large] {$z$}; % Origine \filldraw[ fill=svgink, draw=svgink ] (O) circle (3pt); \node[ above left, text=svgink, font=\large ] at (O) {$B$}; \end{scope} \end{tikzpicture}2e:T1de4,\begin{tikzpicture}[ x={(-0.5cm,-0.25cm)}, y={(0.9cm,-0.1cm)}, z={(0cm,1cm)}, scale=6, line join=round, line cap=round ] % ============================================================ % 1. SOMMETS DU CUBE % ============================================================ \coordinate (A) at (0,0,0); \coordinate (B) at (1,0,0); \coordinate (C) at (1,1,0); \coordinate (D) at (0,1,0); \coordinate (E) at (0,0,1); \coordinate (F) at (1,0,1); \coordinate (G) at (1,1,1); \coordinate (H) at (0,1,1); % ============================================================ % 2. FACES % ============================================================ % Face inférieure ABCD \fill[ fill=svgaccentsix, opacity=0.18 ] (A) -- (B) -- (C) -- (D) -- cycle; % Face avant ABEF \fill[ fill=svgaccentsix, opacity=0.22 ] (A) -- (B) -- (F) -- (E) -- cycle; % Face droite BCGF \fill[ fill=svgaccentsix, opacity=0.26 ] (B) -- (C) -- (G) -- (F) -- cycle; % Face arrière CDHG \fill[ fill=svgaccentsix, opacity=0.18 ] (C) -- (D) -- (H) -- (G) -- cycle; % Face gauche ADHE \fill[ fill=svgaccentsix, opacity=0.14 ] (A) -- (D) -- (H) -- (E) -- cycle; % Face supérieure EFGH \fill[ fill=svgaccentsix, opacity=0.30 ] (E) -- (F) -- (G) -- (H) -- cycle; % ============================================================ % 3. ARÊTES CACHÉES % ============================================================ \draw[ color=svgink, dashed, thin, opacity=0.55 ] (A) -- (B) (A) -- (D) (A) -- (E); \draw[ color=svgink, dashed, thin, opacity=0.55 ] (D) -- (H); % ============================================================ % 4. ARÊTES VISIBLES % ============================================================ \draw[ color=svgink, thick ] (B) -- (C) (B) -- (F) (E) -- (F) (F) -- (G) (G) -- (H) (E) -- (H) (H) -- (D) (C) -- (D) (C) -- (G); % ============================================================ % 5. SOMMETS % ============================================================ \foreach \point in {A,B,C,D,E,F,G,H}{ \node[ circle, fill=svgink, inner sep=0.8pt ] at (\point) {}; } % ============================================================ % 6. NOMS DES SOMMETS % ============================================================ % A \node[ text=svgink, font=\small, anchor=east ] at (-0.10,-0.05,0) {$A$}; % B \node[ text=svgink, font=\small, anchor=west ] at (1.10,-0.05,0) {$B$}; % C \node[ text=svgink, font=\small, anchor=west ] at (1.10,1.04,0) {$C$}; % D \node[ text=svgink, font=\small, anchor=east ] at (-0.10,1.04,0) {$D$}; % E \node[ text=svgink, font=\small, anchor=east ] at (-0.10,-0.05,1) {$E$}; % F \node[ text=svgink, font=\small, anchor=west ] at (1.10,-0.05,1) {$F$}; % G \node[ text=svgink, font=\small, anchor=west ] at (1.10,1.04,1) {$G$}; % H \node[ text=svgink, font=\small, anchor=east ] at (-0.10,1.04,1) {$H$}; % ============================================================ % 7. COORDONNÉES % ============================================================ % ------------------------------------------------------------ % A = (0,0,1) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=east ] at (-0.52,-0.18,-0.19) {$(0,0,1)$}; % ------------------------------------------------------------ % B = (0,0,0) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=west ] at (1.28,-0.18,0) {$(0,0,0)$}; % ------------------------------------------------------------ % C = (1,0,0) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=west ] at (1.28,1.16,0) {$(1,0,0)$}; % ------------------------------------------------------------ % D = (1,0,1) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=east ] at (-0.32,1.16,0) {$(1,0,1)$}; % ------------------------------------------------------------ % E = (0,1,1) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=east ] at (-0.32,-0.18,1) {$(0,1,1)$}; % ------------------------------------------------------------ % F = (0,1,0) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=west ] at (1,-0.18,1.05) {$(0,1,0)$}; % ------------------------------------------------------------ % G = (1,1,0) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=west ] at (1.28,1.16,1) {$(1,1,0)$}; % ------------------------------------------------------------ % H = (1,1,1) % ------------------------------------------------------------ \node[ text=svgmuted, font=\scriptsize, anchor=east ] at (-0.32,1.16,1) {$(1,1,1)$}; % ============================================================ % 8. REPÈRE % ============================================================ \begin{scope}[ shift={(-1cm,1.25cm)}, scale=0.18, x={(1cm,0cm)}, y={(0cm,1cm)} ] % Origine \coordinate (O) at (0,0); % Axe X \draw[ ->, line width=1.5pt, svgaccent ] (O) -- (4,0) node[above right, text=svgink, font=\large] {$x$}; % Axe Y \draw[ ->, line width=1.5pt, svgaccenttwo ] (O) -- (0,-4) node[below left, text=svgink, font=\large] {$y$}; % Axe Z \draw[ ->, line width=1.5pt, svgaccentthree ] (O) -- (2,1.5) node[below right, text=svgink, font=\large] {$z$}; % Origine \filldraw[ fill=svgink, draw=svgink ] (O) circle (3pt); \node[ above left, text=svgink, font=\large ] at (O) {$B$}; \end{scope} \end{tikzpicture}2f:T1c0c,

30:T57b,PShape draw_cube(int c){ PShape cube = createShape(GROUP); // FACE ABCD PShape face1 = createShape(); face1.beginShape(QUADS); face1.vertex(0,0,c); face1.vertex(0,0,0); face1.vertex(c,0,0); face1.vertex(c,0,c); face1.endShape(CLOSE); // FACE AEFB PShape face2 = createShape(); face2.beginShape(QUADS); face2.vertex(0,0,c); face2.vertex(0,c,c); face2.vertex(0,c,0); face2.vertex(0,0,0); face2.endShape(CLOSE); // FACE AEHD PShape face3 = createShape(); face3.beginShape(QUADS); face3.vertex(0,0,c); face3.vertex(0,c,c); face3.vertex(c,c,c); face3.vertex(c,0,c); face3.endShape(CLOSE); // FACE CDHG PShape face4 = createShape(); face4.beginShape(QUADS); face4.vertex(c,0,0); face4.vertex(c,0,c); face4.vertex(c,c,c); face4.vertex(c,c,0); face4.endShape(CLOSE); // FACE BCGF PShape face5 = createShape(); face5.beginShape(QUADS); face5.vertex(0,0,0); face5.vertex(c,0,0); face5.vertex(c,c,0); face5.vertex(0,c,0); face5.endShape(CLOSE); // FACE EFGH PShape face6 = createShape(); face6.beginShape(QUADS); face6.vertex(0,c,c); face6.vertex(0,c,0); face6.vertex(c,c,0); face6.vertex(c,c,c); face5.endShape(CLOSE); cube.addChild(face1); cube.addChild(face2); cube.addChild(face3); cube.addChild(face4); cube.addChild(face5); cube.addChild(face6); return cube; }31:T57b,PShape draw_cube(int c){ PShape cube = createShape(GROUP); // FACE ABCD PShape face1 = createShape(); face1.beginShape(QUADS); face1.vertex(0,0,c); face1.vertex(0,0,0); face1.vertex(c,0,0); face1.vertex(c,0,c); face1.endShape(CLOSE); // FACE AEFB PShape face2 = createShape(); face2.beginShape(QUADS); face2.vertex(0,0,c); face2.vertex(0,c,c); face2.vertex(0,c,0); face2.vertex(0,0,0); face2.endShape(CLOSE); // FACE AEHD PShape face3 = createShape(); face3.beginShape(QUADS); face3.vertex(0,0,c); face3.vertex(0,c,c); face3.vertex(c,c,c); face3.vertex(c,0,c); face3.endShape(CLOSE); // FACE CDHG PShape face4 = createShape(); face4.beginShape(QUADS); face4.vertex(c,0,0); face4.vertex(c,0,c); face4.vertex(c,c,c); face4.vertex(c,c,0); face4.endShape(CLOSE); // FACE BCGF PShape face5 = createShape(); face5.beginShape(QUADS); face5.vertex(0,0,0); face5.vertex(c,0,0); face5.vertex(c,c,0); face5.vertex(0,c,0); face5.endShape(CLOSE); // FACE EFGH PShape face6 = createShape(); face6.beginShape(QUADS); face6.vertex(0,c,c); face6.vertex(0,c,0); face6.vertex(c,c,0); face6.vertex(c,c,c); face5.endShape(CLOSE); cube.addChild(face1); cube.addChild(face2); cube.addChild(face3); cube.addChild(face4); cube.addChild(face5); cube.addChild(face6); return cube; }32:T4f2,

Le programme crée un cube 3D avec PShape.

my_cube contient le cube et angle contrôle sa rotation.
v contient les 8 sommets du cube sous forme de coordonnées (x, y, z).
f indique quelles combinaisons de 4 sommets forment chacune des 6 faces.
Pour chaque face, un PShape de type QUADS est créé, puis ajouté au PShape principal du cube avec addChild().

Ainsi, le cube final est simplement un groupe de 6 faces, elles-mêmes définies à partir de 8 sommets.

33:T673,

Pour un cube de côté c, défini avec des coordonnées allant de 0 à c sur les trois axes, son centre est situé au point (c/2, c/2, c/2). Or, lorsque l'on utilise rotateX() ou rotateY(), Processing effectue la rotation autour de l'origine du repère (0,0,0). Le cube tourne donc autour d'un de ses sommets et non autour de son centre.

Pour corriger cela, on déplace d'abord le repère de (c/2, c/2, c/2) afin que le centre du cube se retrouve temporairement à l'origine. Ainsi, pour chaque point du cube, si on déplace du repère d'origine vers il nous suffit de :

remplacer les par
remplacer les par

Pour se faciliter la tâche, on va considérer que ainsi les coordonnées ne comporteront que et .

26:["$","$L28",null,{"layout":[{"id":"6ab29c09b4dbd73d8b6d1097","blockType":"contentGithubCard","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"url":"https://github.com/killianreine/m1-iwocs-infographie"},{"id":"6ab29c3fb4dbd73d8b6d1098","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h2","text":"Rappel des consignes"},{"id":"6ab29c55b4dbd73d8b6d1099","blockType":"contentColumns","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"variant":"plain","sizingMode":"percent","layout":"2-equal","gap":"1rem","alignItems":"center","columns":[{"widthPercent":20,"blocks":[{"id":"6ab29c61b4dbd73d8b6d109c","blockType":"contentTikz","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"source":"$29","caption":null,"fullWidth":false,"bare":true}],"contentHtml":null},{"widthPercent":80,"blocks":[{"id":"6ab29d10b4dbd73d8b6d109f","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h3","text":"La fonction `draw_cube`"},{"id":"6ab29c8ab4dbd73d8b6d109d","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"

Codez une fonction nommée draw_cube permettant de représenter un cube en trois dimensions. Pour réaliser cette représentation, vous n’utiliserez pas la fonction native box(). Le cube devra être construit manuellement, en assemblant ses différentes faces.

Pour cela, vous devrez représenter chacune des six faces du cube à l’aide d’un quadrilatère (QUAD). Ces six quadrilatères devront être regroupés et imbriqués dans un même objet PShape, de manière à constituer une représentation complète du cube en 3D. La fonction draw_cube devra ainsi créer et organiser les différentes faces du cube au sein de cet objet PShape, puis permettre d’afficher le cube obtenu dans la scène 3D.

"}],"contentHtml":null}]},{"id":"6ab29ce2b4dbd73d8b6d109e","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h2","text":"Correction détaillée"},{"id":"6ab29d31b4dbd73d8b6d10a0","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h3","text":"Quelques précisions sur le repère utilisé"},{"id":"6ab29fecb4dbd73d8b6d10a2","blockType":"contentColumns","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"variant":"plain","sizingMode":"percent","layout":"2-equal","gap":"1rem","alignItems":"center","columns":[{"widthPercent":20,"blocks":[{"id":"6ab29fecb4dbd73d8b6d10a5","blockType":"contentTikz","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"source":"\\begin{tikzpicture}[>=stealth, scale=1.2]\r\n\r\n % Origine\r\n \\coordinate (O) at (0,0);\r\n\r\n % Axe X : vers la droite\r\n \\draw[\r\n ->,\r\n line width=1.5pt,\r\n svgaccent\r\n ] (O) -- (4,0)\r\n node[above right, text=svgink, font=\\large] {$x$};\r\n\r\n % Axe Y : vers le bas\r\n \\draw[\r\n ->,\r\n line width=1.5pt,\r\n svgaccenttwo\r\n ] (O) -- (0,-4)\r\n node[below left, text=svgink, font=\\large] {$y$};\r\n\r\n % Axe Z : profondeur\r\n \\draw[\r\n ->,\r\n line width=1.5pt,\r\n svgaccentthree\r\n ] (O) -- (-2,-1.5)\r\n node[below left, text=svgink, font=\\large] {$z$};\r\n\r\n % Origine\r\n \\filldraw[fill=svgink,draw=svgink] (O) circle (3pt);\r\n \\node[above right, text=svgink, font=\\large] at (O) {$O$};\r\n\r\n\\end{tikzpicture}","caption":null,"fullWidth":false,"bare":true}],"contentHtml":null},{"widthPercent":80,"blocks":[{"id":"6ab29fecb4dbd73d8b6d10a7","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"$2a"}],"contentHtml":null}]},{"id":"6ab2a06fb4dbd73d8b6d10a8","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"

Le repère constitue donc la base de notre représentation : chaque sommet du cube sera défini par des coordonnées , permettant de positionner précisément les différentes faces dans l'espace.

"},{"id":"6ab2a1e4b4dbd73d8b6d10a9","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h3","text":"Déterminer les coordonnées de chaque face"},{"id":"6ab2a27db4dbd73d8b6d10aa","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h4","text":"La base du cube"},{"id":"6ab2acc1b4dbd73d8b6d10b1","blockType":"contentCallout","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"variant":"info","title":null,"bodyHtml":"

Pour simplifier les données affichées sur les schémas, on va considérer que les côtés du carré sont égaux à :

Pour un carré côté il suffira simplement de remplace par .

"},{"id":"6ab2a293b4dbd73d8b6d10ab","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"

On commence généralement par dessiner la base du cube, en considérant que le point initial du cube est en bas à gauche, ainsi on considère la face suivante :

"},{"id":"6ab2a2d6b4dbd73d8b6d10ac","blockType":"contentTikz","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"source":"$2b","caption":null,"fullWidth":false,"bare":true},{"id":"6ab2a67ab4dbd73d8b6d10ad","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"$2c"},{"id":"6ab2a7c0b4dbd73d8b6d10ae","blockType":"contentTikz","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"source":"$2d","caption":null,"fullWidth":false,"bare":true},{"id":"6ab2a96fb4dbd73d8b6d10af","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h4","text":"Les autres faces du cube par déduction"},{"id":"6ab2a98ab4dbd73d8b6d10b0","blockType":"contentTikz","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"source":"$2e","caption":null,"fullWidth":false,"bare":true},{"id":"6ab2ad57b4dbd73d8b6d10b2","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h4","text":"Récapitulatif des coordonnées de chaque faces"},{"id":"6ab2ad76b4dbd73d8b6d10b3","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"

Ci-dessous on énumère chaque face dans un tableau dans l'ordre pour permettre de les tracer facilement par la suite sur Processing. Ainsi, par la suite pour tracer une des faces, il suffira d'écrire :

"},{"id":"6ab2ae0eb4dbd73d8b6d10b4","blockType":"contentCode","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"files":[{"code":"face.beginShape(QUADS);\r\n\tvertex(p_1);\r\n\tvertex(p_2);\r\n\tvertex(p_3);\r\n\tvertex(p_4);\r\nface.endShape(CLOSE);","language":"processing","filename":"modelisation_cube.pde","meta":{"highlightLines":[],"focusedLineNumbers":[],"addedLineNumbers":[],"removedLineNumbers":[],"showLineNumbers":true,"wordWrap":false,"maxLines":10,"notes":[],"folds":[],"backgrounds":[],"inline":[]}}],"code":"face.beginShape(QUADS);\r\n\tvertex(p_1);\r\n\tvertex(p_2);\r\n\tvertex(p_3);\r\n\tvertex(p_4);\r\nface.endShape(CLOSE);","language":"processing","filename":"modelisation_cube.pde"},{"id":"6ab2ae5eb4dbd73d8b6d10b6","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"$2f"},{"id":"6ab2afff24178e281ce8df2e","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h3","text":"Codage de la fonction `draw_cube`"},{"id":"6ab2b02b24178e281ce8df2f","blockType":"contentCallout","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"variant":"info","title":null,"bodyHtml":"

Cette fois on considère que les côtés du cube mesurent donné en paramètres de la fonction draw_cube.

"},{"id":"6ab2b0af24178e281ce8df32","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"

Dans l'objectif d'améliorer l'organisation du code nous dessinerons chaque face dans un sous-PShape, ainsi, le cube final représente la composition des faces.

"},{"id":"6ab2b39924178e281ce8df33","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h4","text":"Version 1 - Dessiner chaque face une à une"},{"id":"6ab2b08224178e281ce8df30","blockType":"contentCode","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"files":[{"code":"$30","language":"processing","filename":"modelisation_cube.pde","meta":{"highlightLines":[],"focusedLineNumbers":[],"addedLineNumbers":[],"removedLineNumbers":[],"showLineNumbers":true,"wordWrap":false,"maxLines":150,"notes":[],"folds":[],"backgrounds":[],"inline":[]}}],"code":"$31","language":"processing","filename":"modelisation_cube.pde"},{"id":"6ab2b3b424178e281ce8df34","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h4","text":"Version 2 - Optimiser et réduire le code"},{"id":"6ab2b8e324178e281ce8df35","blockType":"contentCode","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"files":[{"code":"PShape draw_cube(int c) {\r\n int[][] v = {\r\n {0,0,c}, {0,0,0}, {c,0,0}, {c,0,c},\r\n {0,c,c}, {0,c,0}, {c,c,0}, {c,c,c}\r\n };\r\n\r\n int[][] f = {\r\n {0,1,2,3},\r\n {0,4,5,1},\r\n {0,4,7,3},\r\n {2,3,7,6},\r\n {1,2,6,5},\r\n {4,5,6,7}\r\n };\r\n\r\n PShape cube = createShape(GROUP);\r\n\r\n for (int[] face : f) {\r\n PShape p = createShape();\r\n p.beginShape(QUADS);\r\n for (int i : face) p.vertex(v[i][0], v[i][1], v[i][2]);\r\n p.endShape(CLOSE);\r\n cube.addChild(p);\r\n }\r\n\r\n return cube;\r\n}","language":"processing","filename":"modelisation_cube_opti.pde","meta":{"highlightLines":[],"focusedLineNumbers":[],"addedLineNumbers":[],"removedLineNumbers":[],"showLineNumbers":true,"wordWrap":false,"maxLines":100,"notes":[],"folds":[],"backgrounds":[],"inline":[]}}],"code":"PShape draw_cube(int c) {\r\n int[][] v = {\r\n {0,0,c}, {0,0,0}, {c,0,0}, {c,0,c},\r\n {0,c,c}, {0,c,0}, {c,c,0}, {c,c,c}\r\n };\r\n\r\n int[][] f = {\r\n {0,1,2,3},\r\n {0,4,5,1},\r\n {0,4,7,3},\r\n {2,3,7,6},\r\n {1,2,6,5},\r\n {4,5,6,7}\r\n };\r\n\r\n PShape cube = createShape(GROUP);\r\n\r\n for (int[] face : f) {\r\n PShape p = createShape();\r\n p.beginShape(QUADS);\r\n for (int i : face) p.vertex(v[i][0], v[i][1], v[i][2]);\r\n p.endShape(CLOSE);\r\n cube.addChild(p);\r\n }\r\n\r\n return cube;\r\n}","language":"processing","filename":"modelisation_cube_opti.pde"},{"id":"6ab2b90224178e281ce8df37","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"$32"},{"id":"6ab2b9d524178e281ce8df38","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h2","text":"Faire tourner son cube"},{"id":"6ab2b9f324178e281ce8df39","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h3","text":"Tourner par rapport au point initial"},{"id":"6ab2bb2024178e281ce8df3d","blockType":"contentColumns","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"variant":"plain","sizingMode":"percent","layout":"2-equal","gap":"1rem","alignItems":"center","columns":[{"widthPercent":30,"blocks":[{"id":"6ab2bb3424178e281ce8df42","blockType":"contentCode","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"files":[{"code":"PShape my_cube;\r\nfloat angle = 30;\r\n\r\nvoid setup() {\r\n size(900, 900, P3D);\r\n my_cube = draw_cube(200);\r\n my_cube.disableStyle();\r\n}\r\n\r\nvoid draw() {\r\n background(0);\r\n stroke(150);\r\n fill(255);\r\n\r\n pushMatrix();\r\n translate(width/2, height/2, 0);\r\n rotateY(angle);\r\n rotateX(angle);\r\n shape(my_cube);\r\n popMatrix();\r\n\r\n angle += 0.05;\r\n}","language":"processing","filename":"modelisation_cube.pde","meta":{"highlightLines":[],"focusedLineNumbers":[15,16,17,18,19,20],"addedLineNumbers":[],"removedLineNumbers":[],"showLineNumbers":true,"wordWrap":false,"maxLines":100,"notes":[],"folds":[],"backgrounds":[],"inline":[]}}],"code":"PShape my_cube;\r\nfloat angle = 30;\r\n\r\nvoid setup() {\r\n size(900, 900, P3D);\r\n my_cube = draw_cube(200);\r\n my_cube.disableStyle();\r\n}\r\n\r\nvoid draw() {\r\n background(0);\r\n stroke(150);\r\n fill(255);\r\n\r\n pushMatrix();\r\n translate(width/2, height/2, 0);\r\n rotateY(angle);\r\n rotateX(angle);\r\n shape(my_cube);\r\n popMatrix();\r\n\r\n angle += 0.05;\r\n}","language":"processing","filename":"modelisation_cube.pde"}],"contentHtml":null},{"widthPercent":70,"blocks":[{"id":"6ab2bb2c24178e281ce8df40","blockType":"courseVideo","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"url":"https://youtube.com/shorts/tZ_b9z3AUeQ","caption":null,"aspect":"16/9","blockName":null}],"contentHtml":null}]},{"id":"6ab2bbb924178e281ce8df44","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"

Lorsqu'on applique rotateX() ou rotateY(), Processing effectue la rotation autour de l'origine du repère, c'est-à-dire du point (0, 0, 0). Ici, le cube est défini entre 0 et c sur chaque axe. Son centre se trouve donc en (c/2, c/2, c/2), mais ce point n'est pas l'origine de la rotation.

Pour faire tourner le cube autour de son centre, il faut donc déplacer temporairement le repère afin de placer le centre du cube sur l'origine, effectuer les rotations, puis replacer le cube à sa position initiale.

"},{"id":"6ab2bc0f24178e281ce8df45","blockType":"contentHeading","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"eyebrow":null,"level":"h3","text":"Tourner par rapport à son point central"},{"id":"6ab2bc1f24178e281ce8df46","blockType":"contentRichText","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"contentHtml":"$33"},{"id":"6ab2bcb624178e281ce8df47","blockType":"contentColumns","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"variant":"plain","sizingMode":"percent","layout":"2-equal","gap":"1rem","alignItems":"center","columns":[{"widthPercent":30,"blocks":[{"id":"6ab2bcb624178e281ce8df4b","blockType":"contentCode","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"files":[{"code":"PShape draw_cube(int c) {\r\n float h = c/2;\r\n float[][] v = {\r\n {-h,-h,h}, {-h,-h,-h}, {h,-h,-h}, {h,-h,h},\r\n {-h,h,h}, {-h,h,-h}, {h,h,-h}, {h,h,h}\r\n };\r\n\r\n int[][] f = {\r\n {0,1,2,3},\r\n {0,4,5,1},\r\n {0,4,7,3},\r\n {2,3,7,6},\r\n {1,2,6,5},\r\n {4,5,6,7}\r\n };\r\n\r\n PShape cube = createShape(GROUP);\r\n\r\n for (int[] face : f) {\r\n PShape p = createShape();\r\n p.beginShape(QUADS);\r\n for (int i : face) p.vertex(v[i][0], v[i][1], v[i][2]);\r\n p.endShape(CLOSE);\r\n cube.addChild(p);\r\n }\r\n\r\n return cube;\r\n}","language":"processing","filename":"modelisation_cube_center.pde","meta":{"highlightLines":[],"focusedLineNumbers":[2,3,4,5,6],"addedLineNumbers":[],"removedLineNumbers":[],"showLineNumbers":true,"wordWrap":false,"maxLines":100,"notes":[],"folds":[],"backgrounds":[],"inline":[]}}],"code":"PShape draw_cube(int c) {\r\n float h = c/2;\r\n float[][] v = {\r\n {-h,-h,h}, {-h,-h,-h}, {h,-h,-h}, {h,-h,h},\r\n {-h,h,h}, {-h,h,-h}, {h,h,-h}, {h,h,h}\r\n };\r\n\r\n int[][] f = {\r\n {0,1,2,3},\r\n {0,4,5,1},\r\n {0,4,7,3},\r\n {2,3,7,6},\r\n {1,2,6,5},\r\n {4,5,6,7}\r\n };\r\n\r\n PShape cube = createShape(GROUP);\r\n\r\n for (int[] face : f) {\r\n PShape p = createShape();\r\n p.beginShape(QUADS);\r\n for (int i : face) p.vertex(v[i][0], v[i][1], v[i][2]);\r\n p.endShape(CLOSE);\r\n cube.addChild(p);\r\n }\r\n\r\n return cube;\r\n}","language":"processing","filename":"modelisation_cube_center.pde"}],"contentHtml":null},{"widthPercent":70,"blocks":[{"id":"6ab2bcb624178e281ce8df4a","blockType":"courseVideo","presentation":{"largeur":"normale","alignement":"gauche","margeHaut":"defaut","margeBas":"defaut","theme":"auto","animation":"aucune"},"url":"https://youtube.com/shorts/NISogAkeXCA?feature=share","caption":null,"aspect":"16/9","blockName":null}],"contentHtml":null}]}],"children":"$L34"}]

Information