--- jupytext: text_representation: extension: .md format_name: myst format_version: 0.13 kernelspec: display_name: C++17 language: C++17 name: xcpp17 --- +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92099", "locked": true, "schema_version": 3, "solution": false, "task": false}} # Premiers graphiques avec Jupyter +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92100", "locked": true, "schema_version": 3, "solution": false, "task": false}} Dans cette feuille, nous allons reprendre l'exercice 2 du TD et effectuer un premier dessin. +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92101", "locked": true, "schema_version": 3, "solution": false, "task": false}} Commençons par créer un canvas vert de taille 320 x 240 : ```{code-cell} --- nbgrader: grade: false grade_id: cell-51d47887d053f179 locked: true schema_version: 3 solution: false task: false --- #include "primitives_jupyter.hpp" ``` ```{code-cell} --- nbgrader: grade: false grade_id: cell-c2afd88f340f46f4 locked: true schema_version: 3 solution: false task: false tags: [] --- RenderWindow window(VideoMode(320, 240), "Ma super fenêtre"); window.canvas ``` ```{code-cell} window.clear(Color::Green); ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92102", "locked": true, "schema_version": 3, "solution": false, "task": false}} puis dessinons un point noir de coordonnées (209, 71). Ce point est tout petit, vous aurez peut-être un peu de mal à le distinguer : ```{code-cell} draw_point(window, {209, 71}, Color::Black ); window.display(); ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92103", "locked": true, "schema_version": 3, "solution": false, "task": false}} 1. Dessinez un segment blanc entre les points de coordonnées respectives (50,100) et (100,100) : ```{code-cell} --- nbgrader: grade: true grade_id: cell-e77db2d9ed7265ac locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION for(int x = 50; x <= 100; x++) draw_point(window, {x, 100}, Color::White ); /// END SOLUTION window.display(); ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92104", "locked": true, "schema_version": 3, "solution": false, "task": false}} :::{admonition} Astuce :class: tip Pour éviter de monter et descendre constamment dans cette feuille, faites un clic droit sur le canevas et cliquez sur « Créer une nouvelle vue pour la sortie » (ou « Create new view for output »). Puis disposez la copie obtenue du canevas sur votre espace de travail de sorte à voir simultanément votre code et le canevas. ::: +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92105", "locked": true, "schema_version": 3, "solution": false, "task": false}} 2. Dessinez un segment rouge entre les points (100,150) et (100,200) : ```{code-cell} --- nbgrader: grade: true grade_id: cell-03b3d3f225c29d1d locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION for(int y = 150; y <= 200; y++) draw_point(window, {100, y}, Color::Red ); /// END SOLUTION window.display(); ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92106", "locked": true, "schema_version": 3, "solution": false, "task": false}} 3. Dessinez un rectangle horizontal vide de sommets diagonaux (100,100) et (200,150) et de contour rouge : ```{code-cell} --- nbgrader: grade: true grade_id: cell-3606e0158c83309d locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION for ( int x = 100; x <= 200; x++ ) { draw_point(window, {x, 100}, Color::Red); draw_point(window, {x, 150}, Color::Red); } for ( int y = 100; y <= 150; y++ ) { draw_point(window, {100, y}, Color::Red); draw_point(window, {200, y}, Color::Red); } /// END SOLUTION window.display() ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92107", "locked": true, "schema_version": 3, "solution": false, "task": false}} 4. Dessinez un rectangle horizontal plein noir de sommets diagonaux (200,75) et (250,100) : ```{code-cell} --- nbgrader: grade: true grade_id: cell-25abe8a7c6c8c617 locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION for ( int x = 200; x <= 250; x++ ) for ( int y = 75; y <= 100; y++ ) draw_point(window, {x, y}, Color::Black); /// END SOLUTION window.display() ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92108", "locked": true, "schema_version": 3, "solution": false, "task": false}} 5. Dessinez un segment rouge entre les points (200,150) et (250,200) : ```{code-cell} --- nbgrader: grade: true grade_id: cell-c6d75131df2bea6d locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION for ( int t = 0; t <= 50; t++ ) draw_point(window, {200 + t, 150 + t}, Color::Red); /// END SOLUTION window.display() ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92109", "locked": true, "schema_version": 3, "solution": false, "task": false}} 6. ♣ Dessinez un triangle bleu entre les points (0,0), (320,0) et (320,80) : ```{code-cell} --- nbgrader: grade: true grade_id: cell-c6d75131df2bea6e locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION for ( int x = 0; x <= 320; x++ ) for ( int y = 0; y < x / 4; y++ ) draw_point(window, {x, y}, Color::Blue); /// END SOLUTION window.display() ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92110", "locked": true, "schema_version": 3, "solution": false, "task": false}} 7. Dessinez un cercle noir de centre (207,72) et de rayon 5 : ```{code-cell} --- nbgrader: grade: true grade_id: cell-63406c09d76b868b locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION double pi = 3.14159; int rayon = 5; double dt = .5 / rayon; for ( double t = 0; t <= 2*pi; t += dt ) draw_point(window, {207 + rayon * cos(t), 72 + rayon * sin(t)}, Color::Black); /// END SOLUTION window.display() ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92111", "locked": true, "schema_version": 3, "solution": false, "task": false}} 8. Dessinez un disque jaune de centre (275, 37) et de rayon 25 : ```{code-cell} --- nbgrader: grade: true grade_id: cell-4f7332edb4646cbf locked: false points: 1 schema_version: 3 solution: true task: false --- /// BEGIN SOLUTION int rayon = 25; for ( int x = -rayon; x <= rayon; x++ ) for ( int y = -rayon; y <= rayon; y++ ) if ( x*x + y*y <= rayon * rayon ) draw_point(window, {275 + x, 37 + y}, Color::Yellow); /// END SOLUTION window.display() ``` +++ {"nbgrader": {"grade": false, "grade_id": "cell-db040b06c5a92112", "locked": true, "schema_version": 3, "solution": false, "task": false}} :::{attention} Comme vous l'avez constaté, les performances sont lamentables. C'est parce que nous avons abusé des canevas de HTML : alors que ceux-ci sont conçus pour du dessin vectoriel, nous approximons les figures vectorielles (lignes, triangles, ...) par des accumulations d'un très grand nombre de pixels (combien pour le triangle bleu ?), sachant que chacun de ces pixels est en fait représenté en interne par un petit rectangle. En dehors de ce premier dessin -- dont l'objectif pédagogique était de faire un peu d'algorithmique -- il faut au contraire utiliser les primitives vectorielles fournies. :::