Browse Source

new sounds, Added transition between pictures

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

+ 0 - 1
README.md

@@ -6,7 +6,6 @@
 
 - Nettoyer "Mixed"
 - Créer "Touch" et "Spark"
-- Ajouter une transition entre les images
 
 ## Project setup
 ```

+ 5 - 0
package-lock.json

@@ -10968,6 +10968,11 @@
       "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
       "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo="
     },
+    "tone": {
+      "version": "13.8.25",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-13.8.25.tgz",
+      "integrity": "sha512-8QqmLn+/R+Urib/78zf93+NqFLddXS777kQO7+EbJHwqy+nmug+SJFRp2KIytT0LQY2sJBiopNb2ceHA8uQQJg=="
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",

+ 1 - 0
package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.3.2",
     "pug": "^2.0.4",
+    "tone": "^13.8.25",
     "vue": "^2.6.10",
     "vue-markdown-v2": "^0.1.7",
     "watchify": "^3.11.1"

+ 8 - 0
pictures/looks/bundle.js

@@ -121,6 +121,7 @@ class Tagada{
       this.resize();
     });
     this.mouse = new Vector(0,0);
+    this.pmouse = new Vector(0,0);
     window.addEventListener("pointermove",(event)=>{
       this.pMove(event);
     });
@@ -175,10 +176,15 @@ class Tagada{
         });
       })
     ).then(v=>{
+      this.cap();
       this.setSize();
       this.loop();
     });
   }
+  cap(){
+    this.ctx.lineCap = "round";
+    this.ctx.lineJoin = "round";
+  }
   resize(){
 
   }
@@ -189,6 +195,7 @@ class Tagada{
   setSize(){
     this.W = this.canvas.width = window.innerWidth;
     this.H = this.canvas.height = window.innerHeight;
+    this.cap();
   }
   update(dt){
 
@@ -206,6 +213,7 @@ class Tagada{
       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;

File diff suppressed because it is too large
+ 101 - 12
pictures/mixed/bundle.js


+ 82 - 8
pictures/mixed/index.js

@@ -2,8 +2,56 @@ const Tagada = require('../../tagada/tagada.js');
 const Util = require('../../tagada/util.js');
 const Vector = require('../../tagada/vector.js');
 
+const Tone = require("tone");
+
+console.log(Tone);
+
 let app = new Tagada();
 let $ = app.ctx;
+let notes = ["F#2", "F#3", "F#4", "F#5", "G3", "G5", "G#2", "G#4", "G#5", "A2", "A3", "A4", "A5", "A#5", "B1", "B2", "B3", "B4", "C#3", "C#4", "C#5", "D2", "D3", "D5", "D#4", "E2", "E3", "E4", "E5"];
+var guitar = new Tone.Sampler({
+  'F#2': 'Fs2.[mp3|ogg]',
+  'F#3': 'Fs3.[mp3|ogg]',
+  'F#4': 'Fs4.[mp3|ogg]',
+  'F#5': 'Fs5.[mp3|ogg]',
+  'G3': 'G3.[mp3|ogg]',
+  'G5': 'G3.[mp3|ogg]',
+  'G#2': 'Gs2.[mp3|ogg]',
+  'G#4': 'Gs4.[mp3|ogg]',
+  'G#5': 'Gs5.[mp3|ogg]',
+  'A2': 'A2.[mp3|ogg]',
+  'A3': 'A3.[mp3|ogg]',
+  'A4': 'A4.[mp3|ogg]',
+  'A5': 'A5.[mp3|ogg]',
+  'A#5': 'As5.[mp3|ogg]',
+  'B1': 'B1.[mp3|ogg]',
+  'B2': 'B2.[mp3|ogg]',
+  'B3': 'B3.[mp3|ogg]',
+  'B4': 'B4.[mp3|ogg]',
+  'C#3': 'Cs3.[mp3|ogg]',
+  'C#4': 'Cs4.[mp3|ogg]',
+  'C#5': 'Cs5.[mp3|ogg]',
+  'D2': 'D2.[mp3|ogg]',
+  'D3': 'D3.[mp3|ogg]',
+  'D5': 'D5.[mp3|ogg]',
+  'D#4': 'Ds4.[mp3|ogg]',
+  'E2': 'E2.[mp3|ogg]',
+  'E3': 'E3.[mp3|ogg]',
+  'E4': 'E4.[mp3|ogg]',
+  'E5': 'E5.[mp3|ogg]'
+}, {
+  attack : 0 ,
+ release : 1000 ,
+ onload:()=>{app.run()},
+   volume:1,
+  "baseUrl" : "./guitar-nylon/"
+}).toMaster();
+
+
+var distortion = new Tone.Distortion(0.6)
+var tremolo = new Tone.Tremolo().start()
+
+var polySynth = new Tone.PolySynth(4, Tone.Synth).chain(distortion, tremolo, Tone.Master)
 
 class Line {
   constructor(p0, p1) {
@@ -13,7 +61,7 @@ class Line {
     this.thickness = Util.random(8,16);
     this.colors = ["#f6324c","#ffb111","#0cb53f","#008afe"];
     this.color = Util.randomArray(this.colors);
-
+    this.note = Util.randomArray(notes);
     this.type = "line";
 
     this.hooked = false;
@@ -27,6 +75,7 @@ class Line {
     this.k = Util.random(0.1,10);
     this.damping= Util.random(0.8,0.99);
     this.velocity = new Vector(0,0);
+
   }
   update(dt){
 
@@ -53,10 +102,14 @@ class Line {
   draw() {
     if(this.hooked){
       this.hookPosition = app.mouse.copy();
-    }
-    if(this.hookPosition.dist(this.restPosition) > this.lineLength * 0.1){
-      this.hooked = false;
-      this.restPosition = this.lineCenter.copy();
+
+      if(this.hookPosition.dist(this.restPosition) > this.lineLength * 0.1){
+        this.hooked = false;
+        this.restPosition = this.lineCenter.copy();
+        guitar.triggerAttackRelease(this.note)
+      }
+
+
     }
 
     if(this.type == "line"){
@@ -187,17 +240,38 @@ function segmentIntersect(segment1, segment2) {
 }
 
 function populate() {
+  let min_length = Math.min(window.innerWidth,window.innerHeight),
+      max_length = Math.max(screen.width,screen.height);
+  let density = Math.floor(Util.map(min_length,0,max_length,10,60));
   lines = [];
-  for (var i = 0; i < 80; i++) {
+  for (var i = 0; i < density; i++) {
     let types = ["line","spring"];
     let type = Util.randomArray(types);
     let sides = "tlrb";
     let firstSide = sides.charAt(Math.floor(Math.random() * sides.length));
     sides = sides.replace(firstSide, "");
     let secondSide = sides.charAt(Math.floor(Math.random() * sides.length));
+
+    /*
     let rP0 = getSideRange(firstSide),
-      rP1 = getSideRange(secondSide);
-    let l = new Line(rP0, rP1);
+        rP1 = getSideRange(secondSide);
+    */
+
+    let min_length = Math.min(window.innerWidth,window.innerHeight);
+
+    let rP = new Vector(Util.random(0,window.innerWidth),Util.random(0,window.innerHeight)),
+        rA = Util.random(0,Math.PI*2),
+        rL = Util.random(min_length*0.1,min_length*0.6);
+
+    let p0 = new Vector().fromAngle(rA),
+        p1 = new Vector().fromAngle(rA+Math.PI);
+        p0.setMag(rL);
+        p1.setMag(rL);
+        p0.add(rP);
+        p1.add(rP);
+    let l = new Line(
+      p0,p1
+    );
     l.type = type;
     lines.push(l);
   }

+ 8 - 0
public/pictures/looks/bundle.js

@@ -121,6 +121,7 @@ class Tagada{
       this.resize();
     });
     this.mouse = new Vector(0,0);
+    this.pmouse = new Vector(0,0);
     window.addEventListener("pointermove",(event)=>{
       this.pMove(event);
     });
@@ -175,10 +176,15 @@ class Tagada{
         });
       })
     ).then(v=>{
+      this.cap();
       this.setSize();
       this.loop();
     });
   }
+  cap(){
+    this.ctx.lineCap = "round";
+    this.ctx.lineJoin = "round";
+  }
   resize(){
 
   }
@@ -189,6 +195,7 @@ class Tagada{
   setSize(){
     this.W = this.canvas.width = window.innerWidth;
     this.H = this.canvas.height = window.innerHeight;
+    this.cap();
   }
   update(dt){
 
@@ -206,6 +213,7 @@ class Tagada{
       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;

File diff suppressed because it is too large
+ 101 - 12
public/pictures/mixed/bundle.js


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


+ 28 - 8
src/App.vue

@@ -8,7 +8,7 @@
       </header>
 
       <div class="box-fill v-sep scroll-y">
-        <card v-for="p in pictures" :key="p.id" :title="p.title" :description="p.description" :vignettePath="p.vignette" :current="current" :id="p.id" :draft = "p.draft" v-on:selectCurrent="currentChange" />
+        <card v-for="p in pictures" :key="p.id" :title="p.title" :description="p.description" :vignettePath="p.vignette" :current="current" :loading="loading" :id="p.id" :draft = "p.draft" v-on:selectCurrent="currentChange" />
 
       </div>
     </div>
@@ -16,7 +16,7 @@
 
     </div>
   </div>
-  <iframe :src="pictures[this.current].path" width="100%" height="100%"></iframe>
+  <iframe ref="mainframe" v-bind:class="{hidden:loading}" @load="load" width="100%" height="100%"></iframe>
 </div>
 </template>
 
@@ -36,23 +36,30 @@ export default {
     return {
       title: "Intimacy",
       pictures: pData.default,
-      loading: false,
+      loading: true,
       current: 0,
       poem: poem,
     }
   },
   methods: {
     currentChange: function(id,draft) {
+      if(this.loading) return false;
       if(draft) return false;
+      this.loading = true;
       this.current = id;
-      this.changePicture();
+      setTimeout(()=>{
+        this.$refs.mainframe.src = this.pictures[this.current].path;
+      },1000);
+
     },
-    changePicture: function() {
-      this.loading = true;
+    load:function(){
+      this.loading = false;
     }
   },
-  created: function() {
-    this.changePicture();
+  mounted: function() {
+    this.loading = true;
+
+    this.$refs.mainframe.src = this.pictures[this.current].path;
   }
 
 }
@@ -77,6 +84,9 @@ body {
   overflow: hidden;
   user-select: none;
   font-size: 0.8rem;
+  background-color: black;
+  background-image: radial-gradient(ellipse at bottom center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 60%), url("./assets/5-dots.png");
+  perspective: 1000px;
 }
 
 h1,h2,h3,h4,h5{
@@ -85,8 +95,17 @@ h1,h2,h3,h4,h5{
 
 iframe {
   border: 0;
+  opacity: 1;
+  transition: opacity 0.6s,transform 0.8s,filter 0.4s;
+}
+
+.hidden{
+  opacity: 0;
+  filter: grayscale(1);
+  transform: scale(1.04);
 }
 
+
 .full {
   width: 100%;
   height: 100%;
@@ -128,6 +147,7 @@ iframe {
 }
 
 #left-pannel {
+  z-index: 2;
   box-sizing: border-box;
   position: absolute;
   width: 10%;

+ 26 - 3
src/components/card.vue

@@ -12,7 +12,7 @@
     </div>
 
 
-    <div class="icon"></div>
+    <div v-bind:class="{spin:loading && current == id,}" class="icon"></div>
 
   </div>
 
@@ -28,12 +28,29 @@ export default {
     draft: Boolean,
     description: String,
     vignettePath: String,
-    current: Number
+    current: Number,
+    loading: Boolean
   }
 }
 </script>
 
 <style scoped>
+
+.spin{
+  animation: spin 0.2s infinite linear;
+
+}
+
+@keyframes spin {
+  0%{
+    transform: rotate(0deg);
+  }
+  100%{
+    transform: rotate(360deg);
+  }
+}
+
+
 .card.unavailable{
   opacity: 0.4;
 }
@@ -44,6 +61,8 @@ export default {
 }
 
 .card {
+  cursor:pointer;
+
   padding: 0.8rem 1.2rem;
   border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
 }
@@ -70,7 +89,7 @@ export default {
   border-radius: 50%;
   background-size: cover;
   background-position: center;
-  transition: all 0.2s;
+  transition: all 0.1s;
 }
 
 .icon {
@@ -90,6 +109,10 @@ export default {
 
 }
 
+.icon.spin{
+  background-image: url('../assets/reload_arrow.svg');
+
+}
 .card:not(.unavailable).active:hover .icon {
   background-image: url('../assets/reload_arrow.svg');
 }

+ 2 - 0
src/poem.md

@@ -1,3 +1,5 @@
+A short poem, composed of image, sound and text.
+
 Distance between words,
 Far from the self,
 In a space shared by many

+ 6 - 0
tagada/tagada.js

@@ -80,10 +80,15 @@ class Tagada{
         });
       })
     ).then(v=>{
+      this.cap();
       this.setSize();
       this.loop();
     });
   }
+  cap(){
+    this.ctx.lineCap = "round";
+    this.ctx.lineJoin = "round";
+  }
   resize(){
 
   }
@@ -94,6 +99,7 @@ class Tagada{
   setSize(){
     this.W = this.canvas.width = window.innerWidth;
     this.H = this.canvas.height = window.innerHeight;
+    this.cap();
   }
   update(dt){