---
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

```{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: bca96fdfc7023d461b707c8ae74b0caa
  grade: false
  grade_id: cell-c2afd88f340f46f4
  locked: true
  schema_version: 3
  solution: false
  task: false
---
RenderWindow window(VideoMode(900, 480), "Ma super fenêtre");
```

<canvas id='primitives_canvas'></canvas>

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

```{code-cell}
// Dessine un point noir de coordonnées (418, 143)
draw_point(window, {418, 143}, Color::Black );
window.display();
```

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: b956b1c98520d602fab742ceb67096ed
  grade: true
  grade_id: cell-e77db2d9ed7265ac
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// Dessine un segment blanc entre les points (100,200) et (200,200)
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display();
```

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 85bdbd533e19a61d9a8a460522c51477
  grade: true
  grade_id: cell-03b3d3f225c29d1d
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// Dessine un segment rouge entre les points (200,300) et (200,400)
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display();
```

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: dea1bd15783375ceace4d093b9200ec4
  grade: true
  grade_id: cell-3606e0158c83309d
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// Dessine un rectangle horizontal vide de sommets diagonaux (200,200) et (400,300) et de contour rouge
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 8d1e034e1cda25ee20a1c154f6f26185
  grade: true
  grade_id: cell-25abe8a7c6c8c617
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// Dessine un rectangle horizontal plein noir de sommets diagonaux (400,150) et (500,200)
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 196d46fbc53bc7393b523ace887864ab
  grade: true
  grade_id: cell-c6d75131df2bea6d
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// Dessine un segment rouge entre les points (400,300) et (500,400)
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: 783c0f2dd02e54533dd5243b34fe2ccd
  grade: true
  grade_id: cell-63406c09d76b868b
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// Dessine un cercle noir de centre (415,145) et de rayon 10
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```

```{code-cell}
---
deletable: false
nbgrader:
  cell_type: code
  checksum: cfc9ac790998bab53ad2de41b30f2f6d
  grade: true
  grade_id: cell-4f7332edb4646cbf
  locked: false
  points: 1
  schema_version: 3
  solution: true
  task: false
---
// Dessine un disque jaune de centre (700, 100) et de rayon 50
// REMPLACEZ CETTE LIGNE PAR VOTRE RÉPONSE
window.display()
```