---
jupytext:
  text_representation:
    extension: .md
    format_name: myst
    format_version: 0.13
kernelspec:
  display_name: C++17
  language: C++17
  name: xcpp17
---

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "a706520256c25b19a9257cc4544a6111", "grade": false, "grade_id": "cell-db040b06c5a92099", "locked": true, "schema_version": 3, "solution": false, "task": false}}

# Premiers graphiques avec Jupyter

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "f43a760bd6125e25df23a9ab2628c3e9", "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.

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "f4cbf5563a6542f5c409f308fdca30a3", "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 640 x 480 :

```{code-cell}
---
deletable: false
editable: false
nbgrader:
  cell_type: code
  checksum: e337cf30f41be5c2c6c788f10b454f9a
  grade: false
  grade_id: cell-51d47887d053f179
  locked: true
  schema_version: 3
  solution: false
  task: false
---
#include "primitives_jupyter.hpp"
```

```{code-cell}
---
deletable: false
editable: false
nbgrader:
  cell_type: code
  checksum: 9d359d2bf83f09dfcd9eb723473a197f
  grade: false
  grade_id: cell-c2afd88f340f46f4
  locked: true
  schema_version: 3
  solution: false
  task: false
tags: []
---
RenderWindow window(VideoMode(640, 480), "Ma super fenêtre");
window.canvas
```

```{code-cell}
window.clear(Color::Green);
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "7df12946868397e5fbe4bc994fb8d19c", "grade": false, "grade_id": "cell-db040b06c5a92102", "locked": true, "schema_version": 3, "solution": false, "task": false}}

puis dessinons un point noir de coordonnées (418, 143). Ce point est
tout petit, vous aurez peut-être un peu de mal à le distinguer :

```{code-cell}
draw_point(window, {418, 143}, Color::Black );
window.display();
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "d8948ac8886182d90df0fb2bce302b52", "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
    respsectives (100,200) et (200,200) :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: ce1d6a0deeef3221d1ea8d9afbd40bce
  grade: true
  grade_id: cell-e77db2d9ed7265ac
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display();
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "2be96f003c2555d67d32213924f40a59", "grade": false, "grade_id": "cell-db040b06c5a92104", "locked": true, "schema_version": 3, "solution": false, "task": false}}

:::{tip} Astuce

Pour éviter de monter et descendre constamment dans cette feuille,
faites un clic droit sur le canvas et cliquez sur «Create new view for
output».  Puis disposez la copie obtenue du canvas sur votre espace de
travail de sorte à voir simultanément votre code et le canvas.

:::

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "fea5730c56d940cd6a18b432d9069629", "grade": false, "grade_id": "cell-db040b06c5a92105", "locked": true, "schema_version": 3, "solution": false, "task": false}}

2.  Dessinez un segment rouge entre les points (200,300) et (200,400) :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 90954d14f326667b7a51643cd5d83bc0
  grade: true
  grade_id: cell-03b3d3f225c29d1d
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display();
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "0791571f18f4df2c2bfecb5a3ba9c0ff", "grade": false, "grade_id": "cell-db040b06c5a92106", "locked": true, "schema_version": 3, "solution": false, "task": false}}

3.  Dessinez un rectangle horizontal vide de sommets diagonaux
    (200,200) et (400,300) et de contour rouge :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 4c65f8e4cec21af229e5a44dd7063a03
  grade: true
  grade_id: cell-3606e0158c83309d
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "4eda0a34767a781e0fd3c186999331e2", "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
    (400,150) et (500,200) :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: f66e8172c61aca3cb946861a95326520
  grade: true
  grade_id: cell-25abe8a7c6c8c617
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "2f11cf73501e6fcc67b66d7ced218656", "grade": false, "grade_id": "cell-db040b06c5a92108", "locked": true, "schema_version": 3, "solution": false, "task": false}}

5.  Dessinez un segment rouge entre les points (400,300) et
    (500,400) :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 49650230393c3fc8d743c211525de50c
  grade: true
  grade_id: cell-c6d75131df2bea6d
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "34955bd551a86d7f66e34edca2617cab", "grade": false, "grade_id": "cell-db040b06c5a92109", "locked": true, "schema_version": 3, "solution": false, "task": false}}

6.  ♣ Dessinez un triangle bleu entre les (0,0), (640,0) et (0,160) :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: de3439e6f2af1c2ebadec5e92840b900
  grade: true
  grade_id: cell-c6d75131df2bea6e
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "16aaa6f47064b571ba75a417797361e4", "grade": false, "grade_id": "cell-db040b06c5a92110", "locked": true, "schema_version": 3, "solution": false, "task": false}}

7.  Dessinez un cercle noir de centre (415,145) et de rayon 10 :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: e56a4a8d478945ff8d1ef1c4497dcf05
  grade: true
  grade_id: cell-63406c09d76b868b
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "92e964b26520043007e0fe1972b38638", "grade": false, "grade_id": "cell-db040b06c5a92111", "locked": true, "schema_version": 3, "solution": false, "task": false}}

8.  Dessinez un disque jaune de centre (550, 75) et de rayon 50 :

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 6419729d5f34a928308cdd11942a3f1a
  grade: true
  grade_id: cell-4f7332edb4646cbf
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

+++ {"deletable": false, "editable": false, "nbgrader": {"cell_type": "markdown", "checksum": "ef878f93df33be50d5262273cefbc00a", "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 canvas 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.

:::