Skip to content
Snippets Groups Projects
Commit cd73c7c4 authored by Nicolas M. Thiéry's avatar Nicolas M. Thiéry
Browse files

Préparation

parent 7c6b6070
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.gradebook.db
+ 0
− 0
View file @ cd73c7c4
No preview for this file type
premier-dessin.md
+ 108
− 19
View file @ cd73c7c4
......@@ -14,6 +14,15 @@ kernelspec:
# 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
......@@ -37,35 +46,44 @@ deletable: false
editable: false
nbgrader:
cell_type: code
checksum: bca96fdfc7023d461b707c8ae74b0caa
checksum: 9d359d2bf83f09dfcd9eb723473a197f
grade: false
grade_id: cell-c2afd88f340f46f4
locked: true
schema_version: 3
solution: false
task: false
tags: []
---
RenderWindow window(VideoMode(900, 480), "Ma super fenêtre");
RenderWindow window(VideoMode(640, 480), "Ma super fenêtre");
window.canvas
```
<canvas id='primitives_canvas'></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}
// Dessine un point noir de coordonnées (418, 143)
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: b956b1c98520d602fab742ceb67096ed
checksum: ce1d6a0deeef3221d1ea8d9afbd40bce
grade: true
grade_id: cell-e77db2d9ed7265ac
locked: false
......@@ -74,17 +92,31 @@ nbgrader:
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();
```
+++ {"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: 85bdbd533e19a61d9a8a460522c51477
checksum: 90954d14f326667b7a51643cd5d83bc0
grade: true
grade_id: cell-03b3d3f225c29d1d
locked: false
......@@ -93,17 +125,21 @@ nbgrader:
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();
```
+++ {"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: dea1bd15783375ceace4d093b9200ec4
checksum: 4c65f8e4cec21af229e5a44dd7063a03
grade: true
grade_id: cell-3606e0158c83309d
locked: false
......@@ -112,17 +148,21 @@ nbgrader:
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()
```
+++ {"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: 8d1e034e1cda25ee20a1c154f6f26185
checksum: f66e8172c61aca3cb946861a95326520
grade: true
grade_id: cell-25abe8a7c6c8c617
locked: false
......@@ -131,17 +171,21 @@ nbgrader:
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()
```
+++ {"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: 196d46fbc53bc7393b523ace887864ab
checksum: 49650230393c3fc8d743c211525de50c
grade: true
grade_id: cell-c6d75131df2bea6d
locked: false
......@@ -150,17 +194,42 @@ nbgrader:
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()
```
+++ {"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: 783c0f2dd02e54533dd5243b34fe2ccd
checksum: e56a4a8d478945ff8d1ef1c4497dcf05
grade: true
grade_id: cell-63406c09d76b868b
locked: false
......@@ -169,17 +238,20 @@ nbgrader:
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()
```
+++ {"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: cfc9ac790998bab53ad2de41b30f2f6d
checksum: 6419729d5f34a928308cdd11942a3f1a
grade: true
grade_id: cell-4f7332edb4646cbf
locked: false
......@@ -188,8 +260,25 @@ nbgrader:
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()
```
+++ {"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.
:::
primitives_jupyter.hpp
+ 34
− 69
View file @ cd73c7c4
#ifndef PRIMITIVES_JUPYTER_H
#define PRIMITIVES_JUPYTER_H
/**
Variante de primitives.h pour dessiner dans Jupyter, sans la SFML
......@@ -11,48 +14,16 @@
NE PRENNEZ PAS EXEMPLE DESSUS!
**/
#include <iostream>
#include <sstream>
#include <xwidgets/xhtml.hpp>
/** Execute javascript code in the Jupyter window
**/
void execute_javascript(std::string js) {
nl::json mime_bundle;
mime_bundle["application/javascript"] = js;
::xeus::get_interpreter().display_data(mime_bundle,
nl::json::object(),
nl::json::object());
}
void load_javascript_library() {
execute_javascript(R"js(
document.primitives_get_context = function() {
return document.primitives_canvas.getContext('2d');
}
document.primitives_draw_rectangle = function(x, y, width, height, color) {
var ctx = document.primitives_get_context();
ctx.strokeStyle = color;
ctx.strokeRect(x, y, width, height);
}
document.primitives_draw_filled_rectangle = function(x, y, width, height, color) {
var ctx = document.primitives_get_context();
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
document.primitives_draw_point = function(x, y, color) {
document.primitives_draw_rectangle(x, y, 1, 1, color);
}
)js");
}
#include <xcanvas/xcanvas.hpp>
namespace Color {
using Color = std::string;
Color White = "white";
Color Red = "red";
Color Yellow = "yellow";
Color Green = "#00FF00";
Color Black = "black";
Color White = "White";
Color Blue = "Blue";
Color Red = "Red";
Color Yellow = "Yellow";
Color Green = "#00CC00";
Color Black = "Black";
}
class Point {
......@@ -70,49 +41,43 @@ class VideoMode {
VideoMode(int w, int h): width(w), height(h) {}
};
using Canvas = xw::xmaterialize<xc::xcanvas>;
class RenderWindow {
xw::html html;
VideoMode vm;
public:
// A buffer of javascript commands to execute
std::ostringstream buffer;
Canvas canvas;
RenderWindow(VideoMode _vm, std::string s) : vm(_vm) {
std::ostringstream canvas;
// canvas << "<canvas id='primitives_canvas'"
// << " width=" << vm.width << " height=" << vm.height
// << " style='border:1px solid #000000;'></canvas>";
load_javascript_library();
buffer << "document.primitives_canvas = document.getElementById('primitives_canvas');";
buffer << "document.primitives_canvas.height = " << vm.height << ";";
buffer << "document.primitives_canvas.width = " << vm.width << ";";
buffer << "document.primitives_canvas.style = 'border:1px solid #000000';";
display();
// Disabled until xwidgets is functional again
// For now, the canvas needs to be created in a markdown cell of the notebook
// html.value = canvas.str();
// html.display();
vm = _vm;
canvas = xc::canvas().initialize()
.width(vm.width)
.height(vm.height)
.finalize();
canvas.cache();
}
// Update the canvas by executing all javascript commands in the buffer
void display() {
execute_javascript(buffer.str());
buffer = std::ostringstream();
Canvas& get_canvas() {
return canvas;
}
// Clear the canvas with the given color
void clear(Color::Color color) {
buffer << "document.primitives_draw_filled_rectangle(0, 0, "
<< vm.width << ", "
<< vm.height << ", '"
<< color << "');";
display();
canvas.fill_style = color;
canvas.fill_rect(0, 0, vm.width, vm.height);
display();
}
void display() {
canvas.flush();
canvas.cache();
}
};
void draw_point(RenderWindow &window, Point p, Color::Color color) {
window.buffer << "document.primitives_draw_point("
<< p.x << ", "
<< p.y << ", '"
<< color << "');";
window.canvas.fill_style = color;
window.canvas.fill_rect(p.x, p.y, 1, 1);
}
#endif
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment