diff --git a/lab4/README.md b/lab4/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..5e6665d48454a453bad85d6dc2418519b0d3f63a
--- /dev/null
+++ b/lab4/README.md
@@ -0,0 +1,32 @@
+# Lab3 IHM
+
+This folder contains a template for the **lab4** of IHM course.
+
+---
+
+* Execute this command line : `git pull base master` under your local repository where you did the **lab1**, **lab2** and **lab3**.
+
+ > Before doing so, check that you have defined this repository as a second remote repo by executing this command line:
+ >
+ > ```shell
+ > git remote -v
+ > ```
+ >
+ > You should see this line in the output:
+ >
+ > ```
+ > base ssh://git@ssh.hesge.ch:10572/cours-ihm/labs_ihm_2019_preparation.git
+ > ```
+ >
+ > Otherwise, execute this command line:
+ >
+ > ```bash
+ > git remote add base ssh://git@ssh.hesge.ch:10572/cours-ihm/labs_ihm_2019.git
+ > ```
+
+* Under `lab4/src/models` folder, you will find 3 JavaScript files `K.js`, `N.js` and `V.js`. Each file represent an alphabetic letter model (K, N and V). You should to use these files for this lab.
+
+* Put your code in the `lab4/src` folder, by modifying content of `lab4.html` and `lab4.js` files, and adding your additional files.
+
+***Your main `html` file must be `lab4.html`***
+
diff --git a/lab4/doc/enonce.pdf b/lab4/doc/enonce.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..ac6720449ffa88b544fcf48f1d6fc2c9c3d4a446
Binary files /dev/null and b/lab4/doc/enonce.pdf differ
diff --git a/lab4/src/lab4.html b/lab4/src/lab4.html
new file mode 100644
index 0000000000000000000000000000000000000000..025912edd89308c152c714ec7e4bf410a8b1737e
--- /dev/null
+++ b/lab4/src/lab4.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+
+</html>
diff --git a/lab4/src/lab4.js b/lab4/src/lab4.js
new file mode 100644
index 0000000000000000000000000000000000000000..ac563915ce1bd919bb27a7d35c107070caf0c146
--- /dev/null
+++ b/lab4/src/lab4.js
@@ -0,0 +1,9 @@
+// TODO: Shaders definition
+
+/**
+ * This is the main entry point of your JavaScript program
+ * called in the "onload" event of the body tag in HTML
+ */
+function main() {
+ // TODO: put your implementation here
+}
diff --git a/lab4/src/models/K.js b/lab4/src/models/K.js
new file mode 100644
index 0000000000000000000000000000000000000000..0b830af4eed61cd462feb72f2dde20386b9cd8f2
--- /dev/null
+++ b/lab4/src/models/K.js
@@ -0,0 +1,117 @@
+/**
+ * Model 3D letter K
+ * @constructor
+ * - Define vertices
+ * - Define indices
+ * - Define colors
+ */
+function K() {
+ // Define vertices
+ const v0 = [-1,-1,0.5],
+ v1 = [-0.25,-1,0.5],
+ v2 = [-1,1,0.5],
+ v3 = [-0.25,1,0.5],
+ v4 = [-0.25,0,0.5],
+ v5 = [0.5,1,0.5],
+ v6 = [1,1,0.5],
+ v7 = [0.5,0,0.5],
+ v8 = [1,-1,0.5],
+ v9 = [0.5,-1,0.5],
+
+ v10 = [-1,-1,-0.5],
+ v11 = [-0.25,-1,-0.5],
+ v12 = [-1,1,-0.5],
+ v13 = [-0.25,1,-0.5],
+ v14 = [-0.25,0,-0.5],
+ v15 = [0.5,1,-0.5],
+ v16 = [1,1,-0.5],
+ v17 = [0.5,0,-0.5],
+ v18 = [1,-1,-0.5],
+ v19 = [0.5,-1,-0.5];
+
+ this.vertices = new Float32Array([
+ v0,v0,v0, v1,v1,v1, v2,v2,v2, v3,v3,v3, v4,v4,v4, v5,v5,v5, v6,v6,v6, v7,v7,v7, v8,v8,v8, v9,v9,v9,
+ v10,v10,v10, v11,v11,v11, v12,v12,v12, v13,v13,v13, v14,v14,v14, v15,v15,v15, v16,v16,v16, v17,v17,v17,
+ v18,v18,v18, v19,v19,v19
+ ].flat(2));
+
+ this.indices = new Uint8Array([
+ 0,3,9,
+ 0,9,6,
+ 12,27,15,
+ 15,21,18,
+ 21,27,24,
+
+ 30,33,39,
+ 30,39,36,
+ 42,57,45,
+ 45,51,48,
+ 51,57,54,
+
+ 2,8,32,
+ 8,38,32,
+
+ 1,4,34,
+ 1,34,31,
+
+ 7,10,37,
+ 10,40,37,
+
+ 5,11,41,
+ 5,41,35,
+
+ 13,16,43,
+ 16,46,43,
+
+ 17,19,47,
+ 19,49,47,
+
+ 20,22,50,
+ 22,52,50,
+
+ 23,26,53,
+ 26,56,53,
+
+ 25,28,55,
+ 28,58,55,
+
+ 14,29,44,
+ 29,59,44
+ ]);
+
+ this.normals = new Float32Array([
+ 0.0,0.0,1.0, 0.0,-1.0,0.0, -1.0,0.0,0.0,
+ 0.0,0.0,1.0, 0.0,-1.0,0.0, 1.0,0.0,0.0,
+ 0.0,0.0,1.0, 0.0,1.0,0.0, -1.0,0.0,0.0,
+ 0.0,0.0,1.0, 0.0,1.0,0.0, 1.0,0.0,0.0,
+ 0.0,0.0,1.0, -1.0,0.75,0.0, -0.75,-1.0,0.0,
+ 0.0,0.0,1.0, -1.0,0.75,0.0, 0.0,1.0,0.0,
+ 0.0,0.0,1.0, 0.0,1.0,0.0, 1.0,-0.25,0.0,
+
+ 0.0,0.0,1.0, 1.0,-0.25,0.0, 1.0,0.25,0.0,
+ 0.0,0.0,1.0, 0.0,-1.0,0.0, 1.0,0.25,0.0,
+ 0.0,0.0,1.0, 0.0,-1.0,0.0, -0.75,-1.0,0.0,
+
+
+
+ 0.0,0.0,-1.0, 0.0,-1.0,0.0, -1.0,0.0,0.0,
+ 0.0,0.0,-1.0, 0.0,-1.0,0.0, 1.0,0.0,0.0,
+ 0.0,0.0,-1.0, 0.0,1.0,0.0, -1.0,0.0,0.0,
+ 0.0,0.0,-1.0, 0.0,1.0,0.0, 1.0,0.0,0.0,
+ 0.0,0.0,-1.0, -1.0,0.75,0.0, -0.75,-1.0,0.0,
+ 0.0,0.0,-1.0, -1.0,0.75,-0.75, 0.0,1.0,0.0,
+ 0.0,0.0,-1.0, 0.0,1.0,0.0, 1.0,0.5,0.0,
+
+ 0.0,0.0,-1.0, 1.0,-0.25,0.0, 1.0,-0.25,0.0,
+ 0.0,0.0,-1.0, 0.0,-1.0,0.0, 1.0,-0.25,0.0,
+ 0.0,0.0,-1.0, 0.0,-1.0,0.0, -0.75,-1.0,0.0,
+
+ ]);
+
+
+ const color = [1.0,1.0,1.0];
+ // Define colors
+ let values = [...Array(this.vertices.length)];
+ values = values.map(() => [...color]);
+ this.colors = new Float32Array(values.flat(2));
+}
\ No newline at end of file
diff --git a/lab4/src/models/N.js b/lab4/src/models/N.js
new file mode 100644
index 0000000000000000000000000000000000000000..22260b71e266b3aec5a475c85604d47026325b6d
--- /dev/null
+++ b/lab4/src/models/N.js
@@ -0,0 +1,62 @@
+/**
+ * Model 3D letter N
+ * @constructor
+ * - Define vertices
+ * - Define indices
+ * - Define colors
+ */
+function N() {
+ // Define vertices
+ const v0 = [-1, -1, .5],v1 = [-1, 1, .5], v2 = [-.5, 1, .5], v3 = [.5, -.25, .5],
+ v4 = [.5, 1, .5], v5 = [1, 1, .5], v6 = [1, -1, .5], v7 = [.5, -1, .5],
+ v8 = [-.5, .25, .5], v9 = [-.5, -1, .5], v10 = [-1, -1, -.5],v11 = [-1, 1, -.5],
+ v12 = [-.5, 1, -.5], v13 = [.5, -.25, -.5], v14 = [.5, 1, -.5], v15 = [1, 1, -.5],
+ v16 = [1, -1, -.5], v17 = [.5, -1, -.5], v18 = [-.5, .25, -.5], v19 = [-.5, -1, -.5];
+
+
+
+ const front = [0, 0, 1], back = [0, 0, -1],
+ left = [-1, 0, 0], right = [1, 0, 0],
+ up = [0, 1, 0], down = [0, -1, 0];
+ up_right = [0.6,0.8,0], down_left = [-0.94,-0.62,0]; // euh qui doivent être faux
+
+ this.vertices = new Float32Array([
+ v0, v0, v0, v1, v1, v1, v2, v2, v2, v3, v3, v3, v4, v4, v4, v5, v5, v5, v6, v6, v6,
+ v7, v7, v7, v8, v8, v8, v9, v9, v9 , v10, v10, v10, v11, v11, v11, v12, v12, v12,
+ v13, v13, v13, v14, v14, v14, v15, v15, v15, v16, v16, v16, v17, v17, v17, v18, v18, v18,
+ v19, v19, v19
+ ].flat(2));
+
+ this.normals = new Float32Array([
+ front,left,down, front,left,up, front,up_right,up, front,left,up_right, front,left,up, front,right,up,
+ front,right,down, front,down_left,down, front,right,down_left, front,right,down,
+
+ back,left,down, back,left,up, back,up_right,up, back,left,up_right, back,left,up, back,right,up,
+ back,right,down, back,down_left,down, back,right,down_left, back,right,down,
+ ].flat(2));
+
+ // Define vertices indices
+ this.indices = new Uint8Array([
+ 0,24,3 , 0,27,24, 24,6,3, 24,9,6, 24,21,9, 9,21,18, 9,18,15, 9,15,12, // front
+ 30,33,54, 30,54,57, 54,33,36, 54,36,39, 54,39,51, 39,48,51, 39,45,48, 39,42,45, // back
+
+ 1,4,34, 1,34,31, // left
+ 19,46,16, 19,49,46, // right
+ 10,13,43, 10,43,40, // inner left
+ 11,37,7, 11,41,37, // inner up_right
+ 28,58,55, 28,55,25, // inner right
+ 22,56,52, 22,26,56, // inner down_left // PROBLEME
+ 14,17,47, 14,47,44, // up right
+ 5,8,38, 5,38,35, // up left
+ 20,23,53, 20,53,50, // down right
+ 29,2,32, 29,32,59 // down left
+ ]);
+
+ const color = [1, 0, 0];
+
+ // Define colors
+
+ let values = [...Array(this.vertices.length)];
+ values = values.map(() => [...color]);
+ this.colors = new Float32Array(values.flat(2));
+}
\ No newline at end of file
diff --git a/lab4/src/models/V.js b/lab4/src/models/V.js
new file mode 100644
index 0000000000000000000000000000000000000000..56e158357d25905336eb9c7b77b5981fbb818945
--- /dev/null
+++ b/lab4/src/models/V.js
@@ -0,0 +1,69 @@
+/**
+ * Model 3D letter V
+ * @constructor
+ * - Define vertices
+ * - Define indices
+ * - Define colors
+ */
+function V() {
+
+ const face = [0, 0, 1];
+ const back = [0, 0, -1];
+ const down = [0, -1, 0];
+ const up = [0, 1, 0];
+ // Calcul de la norme du triangle
+ const downRight = [0.93, -0.37, 0];
+ const upRight = [-0.94, 0.35, 0];
+ const downLeft = [-0.93, -0.37, 0];
+ const upLeft = [0.94, 0.35, 0];
+ // Define vertices
+ // Front face
+ const v0 = [-.2, -1, .5], v1 = [.2, -1, .5], v2 = [1, 1, .5], v3 = [.6, 1, .5], v4 = [0, -.6, .5],
+ v5 = [-.6, 1, .5], v6 = [-1, 1, .5];
+ // Back face
+ const v7 = [-.2, -1, -.5], v8 = [.2, -1, -.5], v9 = [1, 1, -.5], v10 = [.6, 1, -.5], v11 = [0, -.6, -.5],
+ v12 = [-.6, 1, -.5], v13 = [-1, 1, -.5];
+
+ this.vertices = new Float32Array([
+ v0, v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v13, v1, v0, v7, v8, v2, v9, v10, v3, v5, v12, v13, v6,
+ v1, v8, v9, v2, v4, v3, v10, v11, v0, v6, v13, v7, v4, v11, v12, v5
+ ].flat(2));
+
+ // Define vertices indices
+ this.indices = new Uint8Array([ // Indices of the vertices
+ // Front face
+ 0, 1, 4, 1, 2, 4, 2, 3, 4, 0, 4, 5, 0, 5, 6,
+ // Back face
+ 7, 11, 8, 8, 11, 9, 9, 11, 10, 7, 13, 12, 12, 11, 7,
+ // Down face
+ 14, 15, 16, 16, 17, 14,
+
+ // Up face
+ 18, 19, 20, 20, 21, 18,
+ 22, 23, 24, 24, 25, 22,
+
+ // Right face
+ 26, 27, 28, 28, 29, 26,
+ 30, 31, 32, 32, 33, 30,
+
+ // Left face
+ 34, 35, 36, 36, 37, 34,
+ 38, 39, 40, 40, 41, 38
+ ]);
+
+
+ const color = [0, 1, 0];
+ // Define colors
+ let values = [...Array(this.vertices.length)];
+ values = values.map(() => [...color]);
+ this.colors = new Float32Array(values.flat(2));
+
+ this.normals = new Float32Array([
+ face, face, face, face, face, face, face,
+ back, back, back, back, back, back, back,
+ down, down, down, down,
+ up, up, up, up, up, up, up, up,
+ downRight, downRight, downRight, downRight, upRight, upRight, upRight, upRight,
+ downLeft, downLeft, downLeft, downLeft, upLeft, upLeft, upLeft, upLeft
+ ].flat(2))
+}
\ No newline at end of file