Skip to content
Snippets Groups Projects
Commit 439399b3 authored by RaedAbr's avatar RaedAbr
Browse files

Add lab 4

parent c38a579c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lab4/README.md 0 → 100644
+ 32
− 0
View file @ 439399b3
# 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`***
lab4/doc/enonce.pdf 0 → 100644
+ 0
− 0
View file @ 439399b3
File added
lab4/src/lab4.html 0 → 100644
+ 4
− 0
View file @ 439399b3
<!DOCTYPE html>
<html>
</html>
lab4/src/lab4.js 0 → 100644
+ 9
− 0
View file @ 439399b3
// 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
}
lab4/src/models/K.js 0 → 100644
+ 117
− 0
View file @ 439399b3
/**
* 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
lab4/src/models/N.js 0 → 100644
+ 62
− 0
View file @ 439399b3
/**
* 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
lab4/src/models/V.js 0 → 100644
+ 69
− 0
View file @ 439399b3
/**
* 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment