diff --git a/oop/index.html b/oop/index.html
new file mode 100644
index 0000000..2edec63
--- /dev/null
+++ b/oop/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/oop/script.js b/oop/script.js
new file mode 100644
index 0000000..cc2af64
--- /dev/null
+++ b/oop/script.js
@@ -0,0 +1,40 @@
+let canvas = document.querySelector('#scene');
+
+canvas.width = document.body.clientWidth;
+canvas.height = document.body.clientHeight;
+
+let ctx = canvas.getContext('2d');
+
+// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
+
+// les fonctions
+function degToRad(deg) {
+ return deg * (Math.PI / 180.0);
+}
+
+// les animations
+// une loop ne peut pas focntionner car l'image ne se rafraîchit pas entre les iteration de boucle
+// for (let index = 0; index < array.length; index++) {
+
+// }
+
+let pos = {
+ x:50,
+ y:50
+}
+
+let monAnime = function(){
+ // pos.x = pos.x +1;
+ // pos.x += 1;
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+ pos.x++;
+ ctx.beginPath();
+ ctx.arc(pos.x, pos.y, 20, 0, degToRad(360));
+ ctx.stroke();
+
+ window.requestAnimationFrame(monAnime);
+}
+
+
+window.requestAnimationFrame(monAnime);
\ No newline at end of file
diff --git a/oop/styles.css b/oop/styles.css
new file mode 100644
index 0000000..9b36ab8
--- /dev/null
+++ b/oop/styles.css
@@ -0,0 +1,5 @@
+body{
+ margin: 0;
+ width:100vw;
+ height:100vh;
+}
\ No newline at end of file