diff --git a/oop/index.html b/oop/index.html
new file mode 100644
index 0000000..233dc22
--- /dev/null
+++ b/oop/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ OOP
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/oop/script.js b/oop/script.js
new file mode 100644
index 0000000..3f0d8d7
--- /dev/null
+++ b/oop/script.js
@@ -0,0 +1,79 @@
+let canvas = document.getElementById('scene');
+let ctx = canvas.getContext("2d");
+
+
+let resizeCanvas = () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+}
+resizeCanvas()
+
+
+let onResize = (event) => {
+ resizeCanvas()
+}
+
+window.addEventListener('resize', onResize);
+
+// ctx.fillStyle = "green";
+// ctx.fillRect(300, 300, 100, 100);
+
+
+
+
+class Boule {
+ constructor(x, y, s) {
+ // this.x = x;
+ // this.y = y;
+ this.pos = {
+ x: x,
+ y: y
+ }
+ this.size = s
+ this.vx = -2+Math.random()*4;
+ this.vy = -2+Math.random()*4;
+ }
+
+ draw(){
+ // console.log('draw', this);
+ ctx.beginPath();
+ ctx.fillStyle = 'red';
+ ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
+ // ctx.fillRect(300, 300, 100, 100);
+ ctx.fill();
+ }
+
+ move(){
+ this.pos.x += this.vx;
+ this.pos.y += this.vy;
+ this.draw();
+ }
+}
+
+
+
+
+let boules = [];
+let maboule;
+for (let index = 0; index < 10000; index++) {
+ maboule = new Boule(
+ Math.random()*canvas.width,
+ Math.random()*canvas.height,
+ 2+Math.random()*10
+ );
+ maboule.draw();
+ boules.push(maboule);
+
+}
+
+
+let anime = () => {
+ ctx.clearRect(0,0, canvas.width, canvas.height)
+ boules.forEach((boule) => {
+ boule.move();
+
+ })
+ window.requestAnimationFrame(anime);
+}
+
+window.requestAnimationFrame(anime);
\ No newline at end of file
diff --git a/oop/styles.css b/oop/styles.css
new file mode 100644
index 0000000..e08d1ed
--- /dev/null
+++ b/oop/styles.css
@@ -0,0 +1,16 @@
+body{
+ margin: 0;
+}
+
+h1{
+ font-size: 18em;
+}
+
+canvas#scene{
+ position: absolute;
+ z-index: 10;
+ top:0;
+ left:0;
+ /* width: 100%;
+ height:100%; */
+}
\ No newline at end of file