Browse Source

New Theme

Tibo 5 months ago
parent
commit
9f83df37c3

+ 0 - 1
README.md

@@ -4,7 +4,6 @@
 
 ## À faire
 
-- Corriger Tangled
 - Ajouter Audio
   - Distance
   - Compassion

+ 45 - 35
build_source.js

@@ -2,24 +2,24 @@ const path = require("path");
 const fs = require("fs");
 const pug = require('pug');
 
-const directoryPath = path.join(__dirname,"pictures");
+const directoryPath = path.join(__dirname, "pictures");
 
 let compiledFunction = pug.compileFile('picture_template.pug');
 
 
-function fetchDrawings(){
-  return new Promise(resolve=>{
+function fetchDrawings() {
+  return new Promise(resolve => {
 
-    fs.readdir(directoryPath,function(err, files){
-      if(err){
+    fs.readdir(directoryPath, function(err, files) {
+      if (err) {
         return console.log("AIE !");
       }
       let id = -1;
-      let result = files.map(f=>{
-        let filePath = path.join(directoryPath,f,"info.JSON");
-        let entryPath = path.join("pictures",f,"index.html");
-        let vignettePath = path.join("pictures",f,"vignette.png");
-        let sourcePath = path.join(directoryPath,f);
+      let result = files.map(f => {
+        let filePath = path.join(directoryPath, f, "info.JSON");
+        let entryPath = path.join("pictures", f, "index.html");
+        let vignettePath = path.join("pictures", f, "vignette.png");
+        let sourcePath = path.join(directoryPath, f);
         let sourceDirName = f;
 
         let info = fs.readFileSync(filePath);
@@ -27,14 +27,14 @@ function fetchDrawings(){
         id += 1;
 
         return {
-          id:id,
-          title:info.title,
-          description:info.description,
-          vignette:vignettePath,
-          path:entryPath,
-          draft:false || info.draft,
-          sourcePath:sourcePath,
-          sourceDirName:sourceDirName
+          id: id,
+          title: info.title,
+          description: info.description,
+          vignette: vignettePath,
+          path: entryPath,
+          draft: false || info.draft,
+          sourcePath: sourcePath,
+          sourceDirName: sourceDirName
         }
 
       });
@@ -46,35 +46,45 @@ function fetchDrawings(){
   });
 }
 
-function makeDir(sourceFolder){
-  fs.mkdir(`public/pictures/${sourceFolder.sourceDirName}`, {recursive:true},(err)=>{
-    if(err) throw err;
-  });
-  let build = compiledFunction({
-    title:sourceFolder.title,
-  });
-  fs.writeFile(`public/pictures/${sourceFolder.sourceDirName}/index.html`,build,function(err){
-    if(err) console.log("ouch");
+function makeDir(sourceFolder) {
+  fs.mkdir(`public/pictures/${sourceFolder.sourceDirName}`, {
+    recursive: true
+  }, (err) => {
+    if (err) throw err;
   });
+
   // add build js and vignette
-  fs.copyFile(`pictures/${sourceFolder.sourceDirName}/bundle.js`,`public/pictures/${sourceFolder.sourceDirName}/bundle.js`,(err)=>{
-    if(err) throw err;
+  fs.copyFile(`pictures/${sourceFolder.sourceDirName}/bundle.js`, `public/pictures/${sourceFolder.sourceDirName}/bundle.js`, (err) => {
+    if (err) throw err;
   });
-  fs.copyFile(`pictures/${sourceFolder.sourceDirName}/vignette.png`,`public/pictures/${sourceFolder.sourceDirName}/vignette.png`,(err)=>{
-    if(err) throw err;
+  fs.copyFile(`pictures/${sourceFolder.sourceDirName}/vignette.png`, `public/pictures/${sourceFolder.sourceDirName}/vignette.png`, (err) => {
+    if (err) throw err;
   });
+
+  fs.copyFile(`pictures/${sourceFolder.sourceDirName}/index.html`, `public/pictures/${sourceFolder.sourceDirName}/index.html`, (err) => {
+    if (err) {
+      let build = compiledFunction({
+        title: sourceFolder.title,
+      });
+      fs.writeFile(`public/pictures/${sourceFolder.sourceDirName}/index.html`, build, function(err) {
+        if (err) console.log("ouch");
+      });
+
+    }
+  });
+
 }
 
 
-fetchDrawings().then(r=>{
+fetchDrawings().then(r => {
   // Create folder
-  r.forEach(sourceFolder=>{
+  r.forEach(sourceFolder => {
     makeDir(sourceFolder);
   });
   // then write files in json
   let data = JSON.stringify(r);
-  fs.writeFile("src/assets/picturesData.JSON",data,err=>{
-    if(err) throw err;
+  fs.writeFile("src/assets/picturesData.JSON", data, err => {
+    if (err) throw err;
     console.log(":)");
   });
 });

+ 36 - 40
pictures/tangled/bundle.js

@@ -6,7 +6,13 @@ const Vector = require('../../tagada/vector.js');
 let app = new Tagada();
 let lines = [];
 let $ = app.ctx;
-let colors = ["#dd352b","#415bdd","#dd352b"];
+let colors = [
+  ["#4e94ff","#ff624f"],
+  ["#ffffff","#57aaef"],
+  ["#ff9cdb","#0bf273"],
+  ["#22346c","#0bf273"],
+  ["#70fc6d","#fff273"]
+];
 class Point {
   constructor(x, y) {
     this.position = new Vector(x, y);
@@ -41,9 +47,9 @@ class Line {
     this.points = [];
     this.links = [];
     this.resolution = resolution;
-    this.thickness = Util.random(10,20);
+    this.thickness = Util.random(4,20);
     this.drag = Util.random(0.9,0.99);
-    this.color = "white";
+    this.theme = ["gray","white"];
     // Generate
     for (var i = 0; i < this.resolution; i++) {
       let a = Util.map(i,0,this.resolution,0,Math.PI*2);
@@ -73,24 +79,22 @@ class Line {
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.4;
+      let min_dist = Math.min(app.W,app.H)*0.2;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
         f.setMag(Util.map(d_m,0,min_dist,20,0));
         p.position.add(f);
       }
-      if (p.position.x < 0) {
-        p.position.x = 0;
-      }
-      if (p.position.x > app.W) {
-        p.position.x = app.W;
-      }
-      if (p.position.y < 0) {
-        p.position.y = 0;
-      }
-      if (p.position.y > app.H) {
-        p.position.y = app.H;
+      let c = new Vector(app.W/2,app.H/2);
+      let d = p.position.dist(c);
+      if(d > Math.min(app.W,app.H)*0.48){
+
+
+        let a = p.position.angle(c);
+        let force = new Vector().fromAngle(a);
+        force.setMag(1);
+        p.position.add(force);
       }
 
     });
@@ -100,7 +104,7 @@ for (var i = 0; i < 5; i++) {
   this.links.forEach(link => {
     let distance = link.p0.position.dist(link.p1.position),
       difference = link.length - distance,
-      percent = difference / distance / 1.5;
+      percent = difference / distance / 2;
     let offset = new Vector(
       (link.p1.position.x - link.p0.position.x) * percent,
       (link.p1.position.y - link.p0.position.y) * percent
@@ -119,36 +123,19 @@ for (var i = 0; i < 5; i++) {
   }
   draw() {
 
-    $.strokeStyle = "gray";
+    $.strokeStyle = this.theme[0];
     $.lineWidth = this.thickness;
 
   let points = this.points.map(p=>{
     return p.position
   });
-  $.save();
 
-  for (var i = 0; i < 6; i++) {
-
-
-  $.translate((this.thickness*0.4),
-(-this.thickness*0.2));
+  $.strokeStyle = this.theme[0];
   $.beginPath();
   smooth(points);
   $.closePath();
   $.stroke();
 
-}
-$.translate((this.thickness*0.4),
-(-this.thickness*0.2));
-
-$.strokeStyle = "lightgray";
-$.beginPath();
-smooth(points);
-$.closePath();
-$.stroke();
-
-$.restore();
-
   }
 }
 
@@ -167,11 +154,14 @@ app.render = function() {
 }
 
 function populate(){
+
   lines = [];
-  for (var i = 0; i < 2; i++) {
-    let line = new Line(app.W/2,app.H/2,Math.min(app.W,app.H)*Util.random(0.4,0.1),40);
+  for (var i = 0; i < 30; i++) {
+    let line = new Line(app.W/2,app.H/2-i*3,Math.min(app.W,app.H)*Util.map(i,0,30,0.4,0.3),40);
+    line.theme = colors[Math.floor(Util.map(i,0,30,0,colors.length))];
     lines.push(line);
   }
+
 }
 
 
@@ -207,9 +197,11 @@ app.resize = function(old_W,old_H){
   populate();
 }
 
-app.setSize();
-populate();
-app.backgroundColor = "#0f0f11";
+app.ready = function(){
+  populate();
+}
+
+app.backgroundColor = "#6f5fff";
 app.run();
 
 },{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){
@@ -298,6 +290,7 @@ class Tagada{
       this.cap();
       this.setSize();
       this.loop();
+      this.ready();
     });
   }
   cap(){
@@ -307,6 +300,9 @@ class Tagada{
   resize(){
 
   }
+  ready(){
+
+  }
   pMove(event){
     this.mouse.x = event.clientX - this.canvas.offsetLeft;
     this.mouse.y = event.clientY - this.canvas.offsetTop;

+ 32 - 40
pictures/tangled/index.js

@@ -5,7 +5,13 @@ const Vector = require('../../tagada/vector.js');
 let app = new Tagada();
 let lines = [];
 let $ = app.ctx;
-let colors = ["#dd352b","#415bdd","#dd352b"];
+let colors = [
+  ["#4e94ff","#ff624f"],
+  ["#ffffff","#57aaef"],
+  ["#ff9cdb","#0bf273"],
+  ["#22346c","#0bf273"],
+  ["#70fc6d","#fff273"]
+];
 class Point {
   constructor(x, y) {
     this.position = new Vector(x, y);
@@ -40,9 +46,9 @@ class Line {
     this.points = [];
     this.links = [];
     this.resolution = resolution;
-    this.thickness = Util.random(10,20);
+    this.thickness = Util.random(4,20);
     this.drag = Util.random(0.9,0.99);
-    this.color = "white";
+    this.theme = ["gray","white"];
     // Generate
     for (var i = 0; i < this.resolution; i++) {
       let a = Util.map(i,0,this.resolution,0,Math.PI*2);
@@ -72,24 +78,22 @@ class Line {
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.4;
+      let min_dist = Math.min(app.W,app.H)*0.2;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
         f.setMag(Util.map(d_m,0,min_dist,20,0));
         p.position.add(f);
       }
-      if (p.position.x < 0) {
-        p.position.x = 0;
-      }
-      if (p.position.x > app.W) {
-        p.position.x = app.W;
-      }
-      if (p.position.y < 0) {
-        p.position.y = 0;
-      }
-      if (p.position.y > app.H) {
-        p.position.y = app.H;
+      let c = new Vector(app.W/2,app.H/2);
+      let d = p.position.dist(c);
+      if(d > Math.min(app.W,app.H)*0.48){
+
+
+        let a = p.position.angle(c);
+        let force = new Vector().fromAngle(a);
+        force.setMag(1);
+        p.position.add(force);
       }
 
     });
@@ -99,7 +103,7 @@ for (var i = 0; i < 5; i++) {
   this.links.forEach(link => {
     let distance = link.p0.position.dist(link.p1.position),
       difference = link.length - distance,
-      percent = difference / distance / 1.5;
+      percent = difference / distance / 2;
     let offset = new Vector(
       (link.p1.position.x - link.p0.position.x) * percent,
       (link.p1.position.y - link.p0.position.y) * percent
@@ -118,36 +122,19 @@ for (var i = 0; i < 5; i++) {
   }
   draw() {
 
-    $.strokeStyle = "gray";
+    $.strokeStyle = this.theme[0];
     $.lineWidth = this.thickness;
 
   let points = this.points.map(p=>{
     return p.position
   });
-  $.save();
-
-  for (var i = 0; i < 6; i++) {
 
-
-  $.translate((this.thickness*0.4),
-(-this.thickness*0.2));
+  $.strokeStyle = this.theme[0];
   $.beginPath();
   smooth(points);
   $.closePath();
   $.stroke();
 
-}
-$.translate((this.thickness*0.4),
-(-this.thickness*0.2));
-
-$.strokeStyle = "lightgray";
-$.beginPath();
-smooth(points);
-$.closePath();
-$.stroke();
-
-$.restore();
-
   }
 }
 
@@ -166,11 +153,14 @@ app.render = function() {
 }
 
 function populate(){
+
   lines = [];
-  for (var i = 0; i < 2; i++) {
-    let line = new Line(app.W/2,app.H/2,Math.min(app.W,app.H)*Util.random(0.4,0.1),40);
+  for (var i = 0; i < 30; i++) {
+    let line = new Line(app.W/2,app.H/2-i*3,Math.min(app.W,app.H)*Util.map(i,0,30,0.4,0.3),40);
+    line.theme = colors[Math.floor(Util.map(i,0,30,0,colors.length))];
     lines.push(line);
   }
+
 }
 
 
@@ -206,7 +196,9 @@ app.resize = function(old_W,old_H){
   populate();
 }
 
-app.setSize();
-populate();
-app.backgroundColor = "#0f0f11";
+app.ready = function(){
+  populate();
+}
+
+app.backgroundColor = "#6f5fff";
 app.run();

BIN
pictures/tangled/vignette.png


+ 18 - 4
public/pictures/compassion/index.html

@@ -1,4 +1,18 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Compassion</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Build</title>
+  <style media="screen">
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

+ 18 - 4
public/pictures/distance/index.html

@@ -1,4 +1,18 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Distance</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Build</title>
+  <style media="screen">
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

+ 18 - 4
public/pictures/looks/index.html

@@ -1,4 +1,18 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Mass gaze</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Build</title>
+  <style media="screen">
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

+ 1 - 1
public/pictures/mixed/index.html

@@ -9,7 +9,7 @@
       overflow: hidden;
     }
     canvas{
-      background-image: radial-gradient(circle at bottom, #2c0067 ,black);
+      background-image: radial-gradient(ellipse at bottom left, #2c0067 50%,black);
     }
   </style>
 </head>

+ 18 - 4
public/pictures/observers/index.html

@@ -1,4 +1,18 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Observers</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Build</title>
+  <style media="screen">
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

+ 18 - 4
public/pictures/shared/index.html

@@ -1,4 +1,18 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Shared</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Build</title>
+  <style media="screen">
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

+ 36 - 40
public/pictures/tangled/bundle.js

@@ -6,7 +6,13 @@ const Vector = require('../../tagada/vector.js');
 let app = new Tagada();
 let lines = [];
 let $ = app.ctx;
-let colors = ["#dd352b","#415bdd","#dd352b"];
+let colors = [
+  ["#4e94ff","#ff624f"],
+  ["#ffffff","#57aaef"],
+  ["#ff9cdb","#0bf273"],
+  ["#22346c","#0bf273"],
+  ["#70fc6d","#fff273"]
+];
 class Point {
   constructor(x, y) {
     this.position = new Vector(x, y);
@@ -41,9 +47,9 @@ class Line {
     this.points = [];
     this.links = [];
     this.resolution = resolution;
-    this.thickness = Util.random(10,20);
+    this.thickness = Util.random(4,20);
     this.drag = Util.random(0.9,0.99);
-    this.color = "white";
+    this.theme = ["gray","white"];
     // Generate
     for (var i = 0; i < this.resolution; i++) {
       let a = Util.map(i,0,this.resolution,0,Math.PI*2);
@@ -73,24 +79,22 @@ class Line {
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.4;
+      let min_dist = Math.min(app.W,app.H)*0.2;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
         f.setMag(Util.map(d_m,0,min_dist,20,0));
         p.position.add(f);
       }
-      if (p.position.x < 0) {
-        p.position.x = 0;
-      }
-      if (p.position.x > app.W) {
-        p.position.x = app.W;
-      }
-      if (p.position.y < 0) {
-        p.position.y = 0;
-      }
-      if (p.position.y > app.H) {
-        p.position.y = app.H;
+      let c = new Vector(app.W/2,app.H/2);
+      let d = p.position.dist(c);
+      if(d > Math.min(app.W,app.H)*0.48){
+
+
+        let a = p.position.angle(c);
+        let force = new Vector().fromAngle(a);
+        force.setMag(1);
+        p.position.add(force);
       }
 
     });
@@ -100,7 +104,7 @@ for (var i = 0; i < 5; i++) {
   this.links.forEach(link => {
     let distance = link.p0.position.dist(link.p1.position),
       difference = link.length - distance,
-      percent = difference / distance / 1.5;
+      percent = difference / distance / 2;
     let offset = new Vector(
       (link.p1.position.x - link.p0.position.x) * percent,
       (link.p1.position.y - link.p0.position.y) * percent
@@ -119,36 +123,19 @@ for (var i = 0; i < 5; i++) {
   }
   draw() {
 
-    $.strokeStyle = "gray";
+    $.strokeStyle = this.theme[0];
     $.lineWidth = this.thickness;
 
   let points = this.points.map(p=>{
     return p.position
   });
-  $.save();
 
-  for (var i = 0; i < 6; i++) {
-
-
-  $.translate((this.thickness*0.4),
-(-this.thickness*0.2));
+  $.strokeStyle = this.theme[0];
   $.beginPath();
   smooth(points);
   $.closePath();
   $.stroke();
 
-}
-$.translate((this.thickness*0.4),
-(-this.thickness*0.2));
-
-$.strokeStyle = "lightgray";
-$.beginPath();
-smooth(points);
-$.closePath();
-$.stroke();
-
-$.restore();
-
   }
 }
 
@@ -167,11 +154,14 @@ app.render = function() {
 }
 
 function populate(){
+
   lines = [];
-  for (var i = 0; i < 2; i++) {
-    let line = new Line(app.W/2,app.H/2,Math.min(app.W,app.H)*Util.random(0.4,0.1),40);
+  for (var i = 0; i < 30; i++) {
+    let line = new Line(app.W/2,app.H/2-i*3,Math.min(app.W,app.H)*Util.map(i,0,30,0.4,0.3),40);
+    line.theme = colors[Math.floor(Util.map(i,0,30,0,colors.length))];
     lines.push(line);
   }
+
 }
 
 
@@ -207,9 +197,11 @@ app.resize = function(old_W,old_H){
   populate();
 }
 
-app.setSize();
-populate();
-app.backgroundColor = "#0f0f11";
+app.ready = function(){
+  populate();
+}
+
+app.backgroundColor = "#6f5fff";
 app.run();
 
 },{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){
@@ -298,6 +290,7 @@ class Tagada{
       this.cap();
       this.setSize();
       this.loop();
+      this.ready();
     });
   }
   cap(){
@@ -307,6 +300,9 @@ class Tagada{
   resize(){
 
   }
+  ready(){
+
+  }
   pMove(event){
     this.mouse.x = event.clientX - this.canvas.offsetLeft;
     this.mouse.y = event.clientY - this.canvas.offsetTop;

+ 18 - 4
public/pictures/tangled/index.html

@@ -1,4 +1,18 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Tangled</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Build</title>
+  <style media="screen">
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

BIN
public/pictures/tangled/vignette.png


+ 19 - 4
public/pictures/touch/index.html

@@ -1,4 +1,19 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Touch</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Build</title>
+  <style media="screen">
+    body {
+      margin: 0;
+      overflow: hidden;
+    }
+
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

+ 14 - 2
src/components/card.vue

@@ -55,13 +55,21 @@ export default {
   opacity: 0.4;
 }
 
-.card.active {
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+.card:not(.active){
+
+}
 
+.card.active {
+background-size: 100% 100%;
 }
 
 .card {
+
   cursor:pointer;
+  transition: all 0.2s;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 50%);
+  background-size: 0% 100%;
 
   padding: 0.8rem 1.2rem;
   border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
@@ -121,6 +129,10 @@ export default {
   transform: scale(0.6);
 }
 
+.card.active .vignette{
+  transform: scale(1);
+}
+
 .card:not(.unavailable):not(.active):hover .vignette {
   transform: scale(0.8);
 }

+ 4 - 0
tagada/tagada.js

@@ -83,6 +83,7 @@ class Tagada{
       this.cap();
       this.setSize();
       this.loop();
+      this.ready();
     });
   }
   cap(){
@@ -92,6 +93,9 @@ class Tagada{
   resize(){
 
   }
+  ready(){
+
+  }
   pMove(event){
     this.mouse.x = event.clientX - this.canvas.offsetLeft;
     this.mouse.y = event.clientY - this.canvas.offsetTop;