Browse Source

Main loop Background options

Tibo 6 months ago
parent
commit
0680ec21bb
97 changed files with 256 additions and 62 deletions
  1. 82 16
      pictures/mixed/bundle.js
  2. BIN
      pictures/mixed/guitar-nylon/A2.mp3
  3. BIN
      pictures/mixed/guitar-nylon/A2.ogg
  4. BIN
      pictures/mixed/guitar-nylon/A2.wav
  5. BIN
      pictures/mixed/guitar-nylon/A3.mp3
  6. BIN
      pictures/mixed/guitar-nylon/A3.ogg
  7. BIN
      pictures/mixed/guitar-nylon/A3.wav
  8. BIN
      pictures/mixed/guitar-nylon/A4.mp3
  9. BIN
      pictures/mixed/guitar-nylon/A4.ogg
  10. BIN
      pictures/mixed/guitar-nylon/A4.wav
  11. BIN
      pictures/mixed/guitar-nylon/A5.mp3
  12. BIN
      pictures/mixed/guitar-nylon/A5.ogg
  13. BIN
      pictures/mixed/guitar-nylon/A5.wav
  14. BIN
      pictures/mixed/guitar-nylon/As5.mp3
  15. BIN
      pictures/mixed/guitar-nylon/As5.ogg
  16. BIN
      pictures/mixed/guitar-nylon/As5.wav
  17. BIN
      pictures/mixed/guitar-nylon/B1.mp3
  18. BIN
      pictures/mixed/guitar-nylon/B1.ogg
  19. BIN
      pictures/mixed/guitar-nylon/B1.wav
  20. BIN
      pictures/mixed/guitar-nylon/B2.mp3
  21. BIN
      pictures/mixed/guitar-nylon/B2.ogg
  22. BIN
      pictures/mixed/guitar-nylon/B2.wav
  23. BIN
      pictures/mixed/guitar-nylon/B3.mp3
  24. BIN
      pictures/mixed/guitar-nylon/B3.ogg
  25. BIN
      pictures/mixed/guitar-nylon/B3.wav
  26. BIN
      pictures/mixed/guitar-nylon/B4.mp3
  27. BIN
      pictures/mixed/guitar-nylon/B4.ogg
  28. BIN
      pictures/mixed/guitar-nylon/B4.wav
  29. BIN
      pictures/mixed/guitar-nylon/Cs3.mp3
  30. BIN
      pictures/mixed/guitar-nylon/Cs3.ogg
  31. BIN
      pictures/mixed/guitar-nylon/Cs3.wav
  32. BIN
      pictures/mixed/guitar-nylon/Cs4.mp3
  33. BIN
      pictures/mixed/guitar-nylon/Cs4.ogg
  34. BIN
      pictures/mixed/guitar-nylon/Cs4.wav
  35. BIN
      pictures/mixed/guitar-nylon/Cs5.mp3
  36. BIN
      pictures/mixed/guitar-nylon/Cs5.ogg
  37. BIN
      pictures/mixed/guitar-nylon/Cs5.wav
  38. BIN
      pictures/mixed/guitar-nylon/D2.mp3
  39. BIN
      pictures/mixed/guitar-nylon/D2.ogg
  40. BIN
      pictures/mixed/guitar-nylon/D2.wav
  41. BIN
      pictures/mixed/guitar-nylon/D3.mp3
  42. BIN
      pictures/mixed/guitar-nylon/D3.ogg
  43. BIN
      pictures/mixed/guitar-nylon/D3.wav
  44. BIN
      pictures/mixed/guitar-nylon/D5.mp3
  45. BIN
      pictures/mixed/guitar-nylon/D5.ogg
  46. BIN
      pictures/mixed/guitar-nylon/D5.wav
  47. BIN
      pictures/mixed/guitar-nylon/Ds4.mp3
  48. BIN
      pictures/mixed/guitar-nylon/Ds4.ogg
  49. BIN
      pictures/mixed/guitar-nylon/Ds4.wav
  50. BIN
      pictures/mixed/guitar-nylon/E2.mp3
  51. BIN
      pictures/mixed/guitar-nylon/E2.ogg
  52. BIN
      pictures/mixed/guitar-nylon/E2.wav
  53. BIN
      pictures/mixed/guitar-nylon/E3.mp3
  54. BIN
      pictures/mixed/guitar-nylon/E3.ogg
  55. BIN
      pictures/mixed/guitar-nylon/E3.wav
  56. BIN
      pictures/mixed/guitar-nylon/E4.mp3
  57. BIN
      pictures/mixed/guitar-nylon/E4.ogg
  58. BIN
      pictures/mixed/guitar-nylon/E4.wav
  59. BIN
      pictures/mixed/guitar-nylon/E5.mp3
  60. BIN
      pictures/mixed/guitar-nylon/E5.ogg
  61. BIN
      pictures/mixed/guitar-nylon/E5.wav
  62. BIN
      pictures/mixed/guitar-nylon/Fs2.mp3
  63. BIN
      pictures/mixed/guitar-nylon/Fs2.ogg
  64. BIN
      pictures/mixed/guitar-nylon/Fs2.wav
  65. BIN
      pictures/mixed/guitar-nylon/Fs3.mp3
  66. BIN
      pictures/mixed/guitar-nylon/Fs3.ogg
  67. BIN
      pictures/mixed/guitar-nylon/Fs3.wav
  68. BIN
      pictures/mixed/guitar-nylon/Fs4.mp3
  69. BIN
      pictures/mixed/guitar-nylon/Fs4.ogg
  70. BIN
      pictures/mixed/guitar-nylon/Fs4.wav
  71. BIN
      pictures/mixed/guitar-nylon/Fs5.mp3
  72. BIN
      pictures/mixed/guitar-nylon/Fs5.ogg
  73. BIN
      pictures/mixed/guitar-nylon/Fs5.wav
  74. BIN
      pictures/mixed/guitar-nylon/G3.mp3
  75. BIN
      pictures/mixed/guitar-nylon/G3.ogg
  76. BIN
      pictures/mixed/guitar-nylon/G3.wav
  77. BIN
      pictures/mixed/guitar-nylon/G5.mp3
  78. BIN
      pictures/mixed/guitar-nylon/G5.ogg
  79. BIN
      pictures/mixed/guitar-nylon/G5.wav
  80. BIN
      pictures/mixed/guitar-nylon/Gs2.mp3
  81. BIN
      pictures/mixed/guitar-nylon/Gs2.ogg
  82. BIN
      pictures/mixed/guitar-nylon/Gs2.wav
  83. BIN
      pictures/mixed/guitar-nylon/Gs4.mp3
  84. BIN
      pictures/mixed/guitar-nylon/Gs4.ogg
  85. BIN
      pictures/mixed/guitar-nylon/Gs4.wav
  86. BIN
      pictures/mixed/guitar-nylon/Gs5.mp3
  87. BIN
      pictures/mixed/guitar-nylon/Gs5.ogg
  88. BIN
      pictures/mixed/guitar-nylon/Gs5.wav
  89. 72 12
      pictures/mixed/index.js
  90. 1 1
      pictures/warmth/info.JSON
  91. 82 16
      public/pictures/mixed/bundle.js
  92. 1 0
      src/App.vue
  93. 1 1
      src/assets/picturesData.JSON
  94. 1 1
      src/components/card.vue
  95. 1 11
      src/poem.md
  96. 10 4
      tagada/tagada.js
  97. 5 0
      vue.config.js

+ 82 - 16
pictures/mixed/bundle.js

@@ -53,15 +53,60 @@ var guitar = new Tone.Sampler({
   attack : 0 ,
  release : 1000 ,
  onload:()=>{app.run()},
-   volume:1,
+   volume:-40,
   "baseUrl" : "./guitar-nylon/"
 }).toMaster();
 
 
-var distortion = new Tone.Distortion(0.6)
-var tremolo = new Tone.Tremolo().start()
+class Particle {
+  constructor(container, x, y, size) {
+    this.container = container;
+    this.position = new Vector(x, y);
+    this.velocity = new Vector(0, 0);
+    this.acceleration = new Vector(0, 0);
+    this.size = size;
+    this.maxSpeed = Util.random(100, 1000);
+    this.start = new Date();
+    this.duration = Util.random(100, 400);
+    this.spinOffset = Util.random(0.001,0.4);
+    this.colors = ["#fff83a","#ffffff"];
+    this.weigth = Util.random(1,4);
+  }
+  draw() {
+    let time = new Date() - this.start;
+    if (time > this.duration) {
+      // delete particle
+      let id = this.container.indexOf(this);
+      this.container.splice(id, 1);
+    }
+    let sizeOffset = Util.map(time,0,this.duration,0,1),
+        weightoffset = Util.map(time,0,this.duration,1,0.1);
+
+    $.save();
+    $.strokeStyle = "white";
+    $.translate(this.position.x, this.position.y);
+    $.rotate(this.velocity.heading());
+    $.lineWidth = this.weigth*weightoffset;
+    $.beginPath();
+    $.moveTo(sizeOffset*this.size,0);
+    $.lineTo(this.size,0);
+    $.stroke();
+    $.restore();
 
-var polySynth = new Tone.PolySynth(4, Tone.Synth).chain(distortion, tremolo, Tone.Master)
+  }
+  addForce(force) {
+    this.acceleration.add(force);
+  }
+  update(dt) {
+    this.velocity.add(this.acceleration);
+    this.velocity.limit(this.maxSpeed);
+    this.velocity.mult(0.98);
+    let v = this.velocity.copy();
+    v.mult(dt);
+    this.position.add(v);
+    this.acceleration.reset();
+  }
+}
 
 class Line {
   constructor(p0, p1) {
@@ -116,10 +161,18 @@ class Line {
       if(this.hookPosition.dist(this.restPosition) > this.lineLength * 0.1){
         this.hooked = false;
         this.restPosition = this.lineCenter.copy();
-        guitar.triggerAttackRelease(this.note)
-      }
+        guitar.triggerAttackRelease(this.note);
+        let sparkCount = Math.floor(Util.random(2,10));
+        for (var i = 0; i < sparkCount; i++) {
+          let p = new Particle(particles,this.hookPosition.x,this.hookPosition.y,
+          Util.random(40,100));
 
+          p.velocity.setMag(Util.random(100,2000));
+          p.velocity.setHeading(Util.random(0,Math.PI*2));
 
+          particles.push(p);
+        }
+      }
     }
 
     if(this.type == "line"){
@@ -205,7 +258,9 @@ let target = {
 
 target.color = "green";
 
-let lines = [];
+let lines = [],
+    particles = [];
+
 
 function segmentIntersect(segment1, segment2) {
   let p0 = segment1.p0,
@@ -319,22 +374,28 @@ function getSideRange(side) {
 
 app.update = function(dt) {
   target.p0 = app.pmouse;
-  target.p1 = app.mouse;
   lines.forEach(l=>{
     l.intersect(target);
     l.update(dt);
   })
-}
+  particles.forEach(p => p.update(dt));
+  target.p1 = app.mouse;
+
+};
 
 app.render = function() {
   lines.forEach(l => {
     l.draw();
   });
-}
+  for (let i = particles.length-1; i > 0; i--) {
+    let p = particles[i];
+    p.draw();
+  }
+};
 
 app.resize = function() {
   populate();
-}
+};
 
 function smooth(points) {
   $.moveTo(points[0].x, points[0].y);
@@ -355,7 +416,6 @@ function smooth(points) {
 
 populate();
 app.backgroundColor = "#2c0067";
-app.run();
 
 },{"../../tagada/tagada.js":3,"../../tagada/util.js":4,"../../tagada/vector.js":5,"tone":1}],3:[function(require,module,exports){
 const Util = require('./util.js');
@@ -468,23 +528,29 @@ class Tagada{
 
   }
   loop(){
-    this.ctx.fillStyle = this.backgroundColor;
-    this.ctx.fillRect(0,0,this.W,this.H);
-
+    if(this.backgroundColor == "transparent"){
+      this.ctx.clearRect(0,0,this.W,this.H);
+    }else{
+      this.ctx.fillStyle = this.backgroundColor;
+      this.ctx.fillRect(0,0,this.W,this.H);
+    }
     this.timeData.now = Util.timeStamp();
     this.timeData.dt = this.timeData.dt + Math.min(1, (this.timeData.now - this.timeData.last) / 1000);
     while(this.timeData.dt > this.timeData.step) {
       this.timeData.dt = this.timeData.dt - this.timeData.step;
       this.update(this.timeData.step);
     }
-    this.pmouse = this.mouse.copy();
+
     this.render();
     this.timeData.last = this.timeData.now;
     this.frame += 1;
 
+    this.pmouse = this.mouse.copy();
+
     requestAnimationFrame(()=>{
       this.loop()
     });
+
   }
 }
 module.exports = Tagada;

BIN
pictures/mixed/guitar-nylon/A2.mp3


BIN
pictures/mixed/guitar-nylon/A2.ogg


BIN
pictures/mixed/guitar-nylon/A2.wav


BIN
pictures/mixed/guitar-nylon/A3.mp3


BIN
pictures/mixed/guitar-nylon/A3.ogg


BIN
pictures/mixed/guitar-nylon/A3.wav


BIN
pictures/mixed/guitar-nylon/A4.mp3


BIN
pictures/mixed/guitar-nylon/A4.ogg


BIN
pictures/mixed/guitar-nylon/A4.wav


BIN
pictures/mixed/guitar-nylon/A5.mp3


BIN
pictures/mixed/guitar-nylon/A5.ogg


BIN
pictures/mixed/guitar-nylon/A5.wav


BIN
pictures/mixed/guitar-nylon/As5.mp3


BIN
pictures/mixed/guitar-nylon/As5.ogg


BIN
pictures/mixed/guitar-nylon/As5.wav


BIN
pictures/mixed/guitar-nylon/B1.mp3


BIN
pictures/mixed/guitar-nylon/B1.ogg


BIN
pictures/mixed/guitar-nylon/B1.wav


BIN
pictures/mixed/guitar-nylon/B2.mp3


BIN
pictures/mixed/guitar-nylon/B2.ogg


BIN
pictures/mixed/guitar-nylon/B2.wav


BIN
pictures/mixed/guitar-nylon/B3.mp3


BIN
pictures/mixed/guitar-nylon/B3.ogg


BIN
pictures/mixed/guitar-nylon/B3.wav


BIN
pictures/mixed/guitar-nylon/B4.mp3


BIN
pictures/mixed/guitar-nylon/B4.ogg


BIN
pictures/mixed/guitar-nylon/B4.wav


BIN
pictures/mixed/guitar-nylon/Cs3.mp3


BIN
pictures/mixed/guitar-nylon/Cs3.ogg


BIN
pictures/mixed/guitar-nylon/Cs3.wav


BIN
pictures/mixed/guitar-nylon/Cs4.mp3


BIN
pictures/mixed/guitar-nylon/Cs4.ogg


BIN
pictures/mixed/guitar-nylon/Cs4.wav


BIN
pictures/mixed/guitar-nylon/Cs5.mp3


BIN
pictures/mixed/guitar-nylon/Cs5.ogg


BIN
pictures/mixed/guitar-nylon/Cs5.wav


BIN
pictures/mixed/guitar-nylon/D2.mp3


BIN
pictures/mixed/guitar-nylon/D2.ogg


BIN
pictures/mixed/guitar-nylon/D2.wav


BIN
pictures/mixed/guitar-nylon/D3.mp3


BIN
pictures/mixed/guitar-nylon/D3.ogg


BIN
pictures/mixed/guitar-nylon/D3.wav


BIN
pictures/mixed/guitar-nylon/D5.mp3


BIN
pictures/mixed/guitar-nylon/D5.ogg


BIN
pictures/mixed/guitar-nylon/D5.wav


BIN
pictures/mixed/guitar-nylon/Ds4.mp3


BIN
pictures/mixed/guitar-nylon/Ds4.ogg


BIN
pictures/mixed/guitar-nylon/Ds4.wav


BIN
pictures/mixed/guitar-nylon/E2.mp3


BIN
pictures/mixed/guitar-nylon/E2.ogg


BIN
pictures/mixed/guitar-nylon/E2.wav


BIN
pictures/mixed/guitar-nylon/E3.mp3


BIN
pictures/mixed/guitar-nylon/E3.ogg


BIN
pictures/mixed/guitar-nylon/E3.wav


BIN
pictures/mixed/guitar-nylon/E4.mp3


BIN
pictures/mixed/guitar-nylon/E4.ogg


BIN
pictures/mixed/guitar-nylon/E4.wav


BIN
pictures/mixed/guitar-nylon/E5.mp3


BIN
pictures/mixed/guitar-nylon/E5.ogg


BIN
pictures/mixed/guitar-nylon/E5.wav


BIN
pictures/mixed/guitar-nylon/Fs2.mp3


BIN
pictures/mixed/guitar-nylon/Fs2.ogg


BIN
pictures/mixed/guitar-nylon/Fs2.wav


BIN
pictures/mixed/guitar-nylon/Fs3.mp3


BIN
pictures/mixed/guitar-nylon/Fs3.ogg


BIN
pictures/mixed/guitar-nylon/Fs3.wav


BIN
pictures/mixed/guitar-nylon/Fs4.mp3


BIN
pictures/mixed/guitar-nylon/Fs4.ogg


BIN
pictures/mixed/guitar-nylon/Fs4.wav


BIN
pictures/mixed/guitar-nylon/Fs5.mp3


BIN
pictures/mixed/guitar-nylon/Fs5.ogg


BIN
pictures/mixed/guitar-nylon/Fs5.wav


BIN
pictures/mixed/guitar-nylon/G3.mp3


BIN
pictures/mixed/guitar-nylon/G3.ogg


BIN
pictures/mixed/guitar-nylon/G3.wav


BIN
pictures/mixed/guitar-nylon/G5.mp3


BIN
pictures/mixed/guitar-nylon/G5.ogg


BIN
pictures/mixed/guitar-nylon/G5.wav


BIN
pictures/mixed/guitar-nylon/Gs2.mp3


BIN
pictures/mixed/guitar-nylon/Gs2.ogg


BIN
pictures/mixed/guitar-nylon/Gs2.wav


BIN
pictures/mixed/guitar-nylon/Gs4.mp3


BIN
pictures/mixed/guitar-nylon/Gs4.ogg


BIN
pictures/mixed/guitar-nylon/Gs4.wav


BIN
pictures/mixed/guitar-nylon/Gs5.mp3


BIN
pictures/mixed/guitar-nylon/Gs5.ogg


BIN
pictures/mixed/guitar-nylon/Gs5.wav


+ 72 - 12
pictures/mixed/index.js

@@ -43,15 +43,60 @@ var guitar = new Tone.Sampler({
   attack : 0 ,
  release : 1000 ,
  onload:()=>{app.run()},
-   volume:1,
+   volume:-40,
   "baseUrl" : "./guitar-nylon/"
 }).toMaster();
 
 
-var distortion = new Tone.Distortion(0.6)
-var tremolo = new Tone.Tremolo().start()
+class Particle {
+  constructor(container, x, y, size) {
+    this.container = container;
+    this.position = new Vector(x, y);
+    this.velocity = new Vector(0, 0);
+    this.acceleration = new Vector(0, 0);
+    this.size = size;
+    this.maxSpeed = Util.random(100, 1000);
+    this.start = new Date();
+    this.duration = Util.random(100, 400);
+    this.spinOffset = Util.random(0.001,0.4);
+    this.colors = ["#fff83a","#ffffff"];
+    this.weigth = Util.random(1,4);
+  }
+  draw() {
+    let time = new Date() - this.start;
+    if (time > this.duration) {
+      // delete particle
+      let id = this.container.indexOf(this);
+      this.container.splice(id, 1);
+    }
+    let sizeOffset = Util.map(time,0,this.duration,0,1),
+        weightoffset = Util.map(time,0,this.duration,1,0.1);
+
+    $.save();
+    $.strokeStyle = "white";
+    $.translate(this.position.x, this.position.y);
+    $.rotate(this.velocity.heading());
+    $.lineWidth = this.weigth*weightoffset;
+    $.beginPath();
+    $.moveTo(sizeOffset*this.size,0);
+    $.lineTo(this.size,0);
+    $.stroke();
+    $.restore();
 
-var polySynth = new Tone.PolySynth(4, Tone.Synth).chain(distortion, tremolo, Tone.Master)
+  }
+  addForce(force) {
+    this.acceleration.add(force);
+  }
+  update(dt) {
+    this.velocity.add(this.acceleration);
+    this.velocity.limit(this.maxSpeed);
+    this.velocity.mult(0.98);
+    let v = this.velocity.copy();
+    v.mult(dt);
+    this.position.add(v);
+    this.acceleration.reset();
+  }
+}
 
 class Line {
   constructor(p0, p1) {
@@ -106,10 +151,18 @@ class Line {
       if(this.hookPosition.dist(this.restPosition) > this.lineLength * 0.1){
         this.hooked = false;
         this.restPosition = this.lineCenter.copy();
-        guitar.triggerAttackRelease(this.note)
-      }
+        guitar.triggerAttackRelease(this.note);
+        let sparkCount = Math.floor(Util.random(2,10));
+        for (var i = 0; i < sparkCount; i++) {
+          let p = new Particle(particles,this.hookPosition.x,this.hookPosition.y,
+          Util.random(40,100));
 
+          p.velocity.setMag(Util.random(100,2000));
+          p.velocity.setHeading(Util.random(0,Math.PI*2));
 
+          particles.push(p);
+        }
+      }
     }
 
     if(this.type == "line"){
@@ -195,7 +248,9 @@ let target = {
 
 target.color = "green";
 
-let lines = [];
+let lines = [],
+    particles = [];
+
 
 function segmentIntersect(segment1, segment2) {
   let p0 = segment1.p0,
@@ -309,22 +364,28 @@ function getSideRange(side) {
 
 app.update = function(dt) {
   target.p0 = app.pmouse;
-  target.p1 = app.mouse;
   lines.forEach(l=>{
     l.intersect(target);
     l.update(dt);
   })
-}
+  particles.forEach(p => p.update(dt));
+  target.p1 = app.mouse;
+
+};
 
 app.render = function() {
   lines.forEach(l => {
     l.draw();
   });
-}
+  for (let i = particles.length-1; i > 0; i--) {
+    let p = particles[i];
+    p.draw();
+  }
+};
 
 app.resize = function() {
   populate();
-}
+};
 
 function smooth(points) {
   $.moveTo(points[0].x, points[0].y);
@@ -345,4 +406,3 @@ function smooth(points) {
 
 populate();
 app.backgroundColor = "#2c0067";
-app.run();

+ 1 - 1
pictures/warmth/info.JSON

@@ -1,5 +1,5 @@
 {
 "title":"Warmth",
 "description":"From inside",
-"draft":false
+"draft":true
 }

+ 82 - 16
public/pictures/mixed/bundle.js

@@ -53,15 +53,60 @@ var guitar = new Tone.Sampler({
   attack : 0 ,
  release : 1000 ,
  onload:()=>{app.run()},
-   volume:1,
+   volume:-40,
   "baseUrl" : "./guitar-nylon/"
 }).toMaster();
 
 
-var distortion = new Tone.Distortion(0.6)
-var tremolo = new Tone.Tremolo().start()
+class Particle {
+  constructor(container, x, y, size) {
+    this.container = container;
+    this.position = new Vector(x, y);
+    this.velocity = new Vector(0, 0);
+    this.acceleration = new Vector(0, 0);
+    this.size = size;
+    this.maxSpeed = Util.random(100, 1000);
+    this.start = new Date();
+    this.duration = Util.random(100, 400);
+    this.spinOffset = Util.random(0.001,0.4);
+    this.colors = ["#fff83a","#ffffff"];
+    this.weigth = Util.random(1,4);
+  }
+  draw() {
+    let time = new Date() - this.start;
+    if (time > this.duration) {
+      // delete particle
+      let id = this.container.indexOf(this);
+      this.container.splice(id, 1);
+    }
+    let sizeOffset = Util.map(time,0,this.duration,0,1),
+        weightoffset = Util.map(time,0,this.duration,1,0.1);
+
+    $.save();
+    $.strokeStyle = "white";
+    $.translate(this.position.x, this.position.y);
+    $.rotate(this.velocity.heading());
+    $.lineWidth = this.weigth*weightoffset;
+    $.beginPath();
+    $.moveTo(sizeOffset*this.size,0);
+    $.lineTo(this.size,0);
+    $.stroke();
+    $.restore();
 
-var polySynth = new Tone.PolySynth(4, Tone.Synth).chain(distortion, tremolo, Tone.Master)
+  }
+  addForce(force) {
+    this.acceleration.add(force);
+  }
+  update(dt) {
+    this.velocity.add(this.acceleration);
+    this.velocity.limit(this.maxSpeed);
+    this.velocity.mult(0.98);
+    let v = this.velocity.copy();
+    v.mult(dt);
+    this.position.add(v);
+    this.acceleration.reset();
+  }
+}
 
 class Line {
   constructor(p0, p1) {
@@ -116,10 +161,18 @@ class Line {
       if(this.hookPosition.dist(this.restPosition) > this.lineLength * 0.1){
         this.hooked = false;
         this.restPosition = this.lineCenter.copy();
-        guitar.triggerAttackRelease(this.note)
-      }
+        guitar.triggerAttackRelease(this.note);
+        let sparkCount = Math.floor(Util.random(2,10));
+        for (var i = 0; i < sparkCount; i++) {
+          let p = new Particle(particles,this.hookPosition.x,this.hookPosition.y,
+          Util.random(40,100));
 
+          p.velocity.setMag(Util.random(100,2000));
+          p.velocity.setHeading(Util.random(0,Math.PI*2));
 
+          particles.push(p);
+        }
+      }
     }
 
     if(this.type == "line"){
@@ -205,7 +258,9 @@ let target = {
 
 target.color = "green";
 
-let lines = [];
+let lines = [],
+    particles = [];
+
 
 function segmentIntersect(segment1, segment2) {
   let p0 = segment1.p0,
@@ -319,22 +374,28 @@ function getSideRange(side) {
 
 app.update = function(dt) {
   target.p0 = app.pmouse;
-  target.p1 = app.mouse;
   lines.forEach(l=>{
     l.intersect(target);
     l.update(dt);
   })
-}
+  particles.forEach(p => p.update(dt));
+  target.p1 = app.mouse;
+
+};
 
 app.render = function() {
   lines.forEach(l => {
     l.draw();
   });
-}
+  for (let i = particles.length-1; i > 0; i--) {
+    let p = particles[i];
+    p.draw();
+  }
+};
 
 app.resize = function() {
   populate();
-}
+};
 
 function smooth(points) {
   $.moveTo(points[0].x, points[0].y);
@@ -355,7 +416,6 @@ function smooth(points) {
 
 populate();
 app.backgroundColor = "#2c0067";
-app.run();
 
 },{"../../tagada/tagada.js":3,"../../tagada/util.js":4,"../../tagada/vector.js":5,"tone":1}],3:[function(require,module,exports){
 const Util = require('./util.js');
@@ -468,23 +528,29 @@ class Tagada{
 
   }
   loop(){
-    this.ctx.fillStyle = this.backgroundColor;
-    this.ctx.fillRect(0,0,this.W,this.H);
-
+    if(this.backgroundColor == "transparent"){
+      this.ctx.clearRect(0,0,this.W,this.H);
+    }else{
+      this.ctx.fillStyle = this.backgroundColor;
+      this.ctx.fillRect(0,0,this.W,this.H);
+    }
     this.timeData.now = Util.timeStamp();
     this.timeData.dt = this.timeData.dt + Math.min(1, (this.timeData.now - this.timeData.last) / 1000);
     while(this.timeData.dt > this.timeData.step) {
       this.timeData.dt = this.timeData.dt - this.timeData.step;
       this.update(this.timeData.step);
     }
-    this.pmouse = this.mouse.copy();
+
     this.render();
     this.timeData.last = this.timeData.now;
     this.frame += 1;
 
+    this.pmouse = this.mouse.copy();
+
     requestAnimationFrame(()=>{
       this.loop()
     });
+
   }
 }
 module.exports = Tagada;

+ 1 - 0
src/App.vue

@@ -57,6 +57,7 @@ export default {
     }
   },
   mounted: function() {
+
     this.loading = true;
 
     this.$refs.mainframe.src = this.pictures[this.current].path;

File diff suppressed because it is too large
+ 1 - 1
src/assets/picturesData.JSON


+ 1 - 1
src/components/card.vue

@@ -2,7 +2,7 @@
 <div class="card" v-bind:class="{'active' : current == id,'unavailable' : draft == true}"  v-on:click="(event)=>{
   this.$emit('selectCurrent',id,draft)}">
   <div class="h-sep v-center gap">
-    <div class="vignette" v-bind:style="{ 'background-image': 'url(../' + vignettePath + ')' }">
+    <div class="vignette" v-bind:style="{ 'background-image': 'url(' + vignettePath + ')' }">
 
     </div>
 

+ 1 - 11
src/poem.md

@@ -1,11 +1 @@
-A short poem, composed of image, sound and text.
-
-Distance between words,
-Far from the self,
-In a space shared by many
-One may feels trapped
-Skin and marrow,
-but no sorrow
-Subtle feelings and impressions,
-not influenced by others
-freedom to be oneself
+A short poem, composed of images, sounds and texts.

+ 10 - 4
tagada/tagada.js

@@ -108,23 +108,29 @@ class Tagada{
 
   }
   loop(){
-    this.ctx.fillStyle = this.backgroundColor;
-    this.ctx.fillRect(0,0,this.W,this.H);
-
+    if(this.backgroundColor == "transparent"){
+      this.ctx.clearRect(0,0,this.W,this.H);
+    }else{
+      this.ctx.fillStyle = this.backgroundColor;
+      this.ctx.fillRect(0,0,this.W,this.H);
+    }
     this.timeData.now = Util.timeStamp();
     this.timeData.dt = this.timeData.dt + Math.min(1, (this.timeData.now - this.timeData.last) / 1000);
     while(this.timeData.dt > this.timeData.step) {
       this.timeData.dt = this.timeData.dt - this.timeData.step;
       this.update(this.timeData.step);
     }
-    this.pmouse = this.mouse.copy();
+
     this.render();
     this.timeData.last = this.timeData.now;
     this.frame += 1;
 
+    this.pmouse = this.mouse.copy();
+
     requestAnimationFrame(()=>{
       this.loop()
     });
+
   }
 }
 module.exports = Tagada;

+ 5 - 0
vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production'
+    ? './'
+    : '/'
+}