Browse Source

Minor changes

Tibo 5 months ago
parent
commit
087ab24b16

+ 5 - 1
README.md

@@ -4,7 +4,11 @@
 
 ## À faire
 
-- Créer "Touch"
+- Corriger Tangled
+- Ajouter Audio
+  - Distance
+  - Compassion
+  - Touch
 
 ## Project setup
 ```

+ 9 - 9
package-lock.json

@@ -893,9 +893,9 @@
       "dev": true
     },
     "@hapi/hoek": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
-      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==",
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
+      "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==",
       "dev": true
     },
     "@hapi/joi": {
@@ -1411,9 +1411,9 @@
           "dev": true
         },
         "serialize-javascript": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.0.tgz",
-          "integrity": "sha512-a/mxFfU00QT88umAJQsNWOnUKckhNCqOl028N48e7wFmo2/EHpTo9Wso+iJJCMrQnmFvcjto5RJdAHEvVhcyUQ==",
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
           "dev": true
         },
         "slash": {
@@ -3521,9 +3521,9 @@
           "dev": true
         },
         "serialize-javascript": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.0.tgz",
-          "integrity": "sha512-a/mxFfU00QT88umAJQsNWOnUKckhNCqOl028N48e7wFmo2/EHpTo9Wso+iJJCMrQnmFvcjto5RJdAHEvVhcyUQ==",
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
           "dev": true
         },
         "slash": {

+ 14 - 13
pictures/mixed/bundle.js

@@ -53,7 +53,7 @@ var guitar = new Tone.Sampler({
   attack : 0 ,
  release : 1000 ,
  onload:()=>{app.run()},
-   volume:-40,
+   volume:-20,
   "baseUrl" : "./guitar-nylon/"
 }).toMaster();
 
@@ -113,8 +113,8 @@ class Line {
     this.p0 = p0;
     this.p1 = p1;
     this.lineLength = p0.dist(p1);
-    this.thickness = Util.random(8,16);
-    this.colors = ["#f6324c","#ffb111","#0cb53f","#008afe"];
+    this.thickness = Util.random(8,12);
+    this.colors = ["#1a003e","#f6324c","#1a003e","#f6324c","#1a003e","#f6324c","#1a003e","#4457ff"];
     this.color = Util.randomArray(this.colors);
     this.note = Util.randomArray(notes);
     this.type = "line";
@@ -130,6 +130,7 @@ class Line {
     this.k = Util.random(0.1,10);
     this.damping= Util.random(0.8,0.99);
     this.velocity = new Vector(0,0);
+    this.resolution = Util.random(3,20)
 
   }
   update(dt){
@@ -195,7 +196,7 @@ class Line {
 
 
 
-    let resolution = 10;
+    let resolution = this.resolution;
 
     let points = [];
     let angle = this.p0.angle(this.hookPosition);
@@ -224,7 +225,7 @@ class Line {
      length = this.hookPosition.dist(this.p1);
      seg = length / resolution;
 
-    for (var i = 0; i < resolution; i++) {
+    for (var i = 0; i < resolution+1; i++) {
       let aOffset = - Math.PI/2;
       if(i%2 == 0){
         aOffset = Math.PI/2;
@@ -305,9 +306,8 @@ 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));
+
+  let density = Math.floor(Util.map(app.W,0,screen.width,1,30));
   lines = [];
   for (var i = 0; i < density; i++) {
     let types = ["line","spring"];
@@ -317,11 +317,11 @@ function populate() {
     sides = sides.replace(firstSide, "");
     let secondSide = sides.charAt(Math.floor(Math.random() * sides.length));
 
-    /*
+
     let rP0 = getSideRange(firstSide),
         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)),
@@ -334,8 +334,9 @@ function populate() {
         p1.setMag(rL);
         p0.add(rP);
         p1.add(rP);
+        */
     let l = new Line(
-      p0,p1
+      rP0,rP1
     );
     l.type = type;
     lines.push(l);
@@ -413,9 +414,9 @@ function smooth(points) {
   );
 }
 
-
+app.setSize();
 populate();
-app.backgroundColor = "#2c0067";
+app.backgroundColor = "transparent";
 
 },{"../../tagada/tagada.js":3,"../../tagada/util.js":4,"../../tagada/vector.js":5,"tone":1}],3:[function(require,module,exports){
 const Util = require('./util.js');

+ 3 - 0
pictures/mixed/index.html

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

+ 14 - 13
pictures/mixed/index.js

@@ -43,7 +43,7 @@ var guitar = new Tone.Sampler({
   attack : 0 ,
  release : 1000 ,
  onload:()=>{app.run()},
-   volume:-40,
+   volume:-20,
   "baseUrl" : "./guitar-nylon/"
 }).toMaster();
 
@@ -103,8 +103,8 @@ class Line {
     this.p0 = p0;
     this.p1 = p1;
     this.lineLength = p0.dist(p1);
-    this.thickness = Util.random(8,16);
-    this.colors = ["#f6324c","#ffb111","#0cb53f","#008afe"];
+    this.thickness = Util.random(8,12);
+    this.colors = ["#1a003e","#f6324c","#1a003e","#f6324c","#1a003e","#f6324c","#1a003e","#4457ff"];
     this.color = Util.randomArray(this.colors);
     this.note = Util.randomArray(notes);
     this.type = "line";
@@ -120,6 +120,7 @@ class Line {
     this.k = Util.random(0.1,10);
     this.damping= Util.random(0.8,0.99);
     this.velocity = new Vector(0,0);
+    this.resolution = Util.random(3,20)
 
   }
   update(dt){
@@ -185,7 +186,7 @@ class Line {
 
 
 
-    let resolution = 10;
+    let resolution = this.resolution;
 
     let points = [];
     let angle = this.p0.angle(this.hookPosition);
@@ -214,7 +215,7 @@ class Line {
      length = this.hookPosition.dist(this.p1);
      seg = length / resolution;
 
-    for (var i = 0; i < resolution; i++) {
+    for (var i = 0; i < resolution+1; i++) {
       let aOffset = - Math.PI/2;
       if(i%2 == 0){
         aOffset = Math.PI/2;
@@ -295,9 +296,8 @@ 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));
+
+  let density = Math.floor(Util.map(app.W,0,screen.width,1,30));
   lines = [];
   for (var i = 0; i < density; i++) {
     let types = ["line","spring"];
@@ -307,11 +307,11 @@ function populate() {
     sides = sides.replace(firstSide, "");
     let secondSide = sides.charAt(Math.floor(Math.random() * sides.length));
 
-    /*
+
     let rP0 = getSideRange(firstSide),
         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)),
@@ -324,8 +324,9 @@ function populate() {
         p1.setMag(rL);
         p0.add(rP);
         p1.add(rP);
+        */
     let l = new Line(
-      p0,p1
+      rP0,rP1
     );
     l.type = type;
     lines.push(l);
@@ -403,6 +404,6 @@ function smooth(points) {
   );
 }
 
-
+app.setSize();
 populate();
-app.backgroundColor = "#2c0067";
+app.backgroundColor = "transparent";

BIN
pictures/mixed/vignette.png


+ 0 - 461
pictures/tangled/bundle.j

@@ -1,461 +0,0 @@
-(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-const Tagada = require('../../tagada/tagada.js');
-const Util = require('../../tagada/util.js');
-const Vector = require('../../tagada/vector.js');
-
-let app = new Tagada();
-let lines = [];
-let $ = app.ctx;
-let colors = ["#dd352b","#415bdd","#dd352b"];
-class Point {
-  constructor(x, y) {
-    this.position = new Vector(x, y);
-    this.old_position = new Vector(x, y);
-    this.pinned = false;
-  }
-  set(x,y){
-    this.position = new Vector(x, y);
-    this.old_position = new Vector(x, y);
-  }
-  draw() {
-    $.fillStyle = "white";
-    $.beginPath();
-    $.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
-    $.fill();
-    $.closePath();
-  }
-}
-
-class Link {
-  constructor(p0, p1) {
-    this.p0 = p0;
-    this.p1 = p1;
-    this.length = p0.position.dist(p1.position);
-  }
-}
-
-
-class Line {
-  constructor(start,end,resolution) {
-    this.points = [];
-    this.links = [];
-    this.start = start;
-    this.end = end;
-    this.resolution = resolution;
-    this.length = start.dist(this.end);
-    this.segment = this.length/this.resolution;
-    this.thickness = 10;
-    this.color = "white";
-    // Generate
-    let p = new Vector(this.start.x,this.start.y);
-    for (var i = 0; i < this.resolution + 1; i++) {
-          let direction = new Vector().fromAngle(
-            this.start.angle(this.end)
-          );
-      direction.setMag(this.segment);
-      let point = new Point(p.x,p.y);
-      this.points.push(point);
-      p.add(direction);
-    }
-    for (var i = 1; i < this.points.length; i++) {
-      let p_0 = this.points[i-1],
-          p_1 = this.points[i];
-      let l = new Link(p_0,p_1);
-      this.links.push(l);
-
-    }
-  }
-  update(dt) {
-    this.points.forEach(p => {
-      if (p.pinned) return;
-      let velocity = p.position.copy();
-      velocity.sub(p.old_position);
-      velocity.mult(0.99);
-      p.old_position = p.position.copy();
-      p.position.add(velocity);
-
-      // mouse
-      let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.1;
-      if(d_m < min_dist){
-        let a = app.mouse.angle(p.position);
-        let f = new Vector().fromAngle(a);
-        let diff = min_dist - d_m;
-        f.setMag(diff);
-        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;
-      }
-
-    });
-
-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;
-    let offset = new Vector(
-      (link.p1.position.x - link.p0.position.x) * percent,
-      (link.p1.position.y - link.p0.position.y) * percent
-    );
-    if (!link.p0.pinned) {
-      link.p0.position.sub(offset);
-    }
-    if (!link.p1.pinned) {
-      link.p1.position.add(offset);
-    }
-  });
-
-
-}
-
-  }
-  draw() {
-
-    $.strokeStyle = this.color;
-    $.lineWidth = this.thickness;
-    $.beginPath();
-    let points = this.points.map(p=>{
-      return p.position
-    });
-    smooth(points);
-    $.stroke();
-  }
-}
-
-app.update = function(dt) {
-  lines.forEach((item, i) => {
-    item.update(dt);
-  });
-
-}
-
-app.render = function() {
-  lines.forEach((item, i) => {
-    item.draw();
-  });
-
-}
-
-function populate(){
-  let width = app.W * 0.8;
-  let height = app.H * 0.9;
-  let offsetX = app.W - width;
-  lines = [];
-  let resolution = Math.floor(Util.map(
-    app.W,0,screen.width,10,100
-  ));
-  let step = width / resolution;
-  for (var i = 0; i < resolution; i++) {
-    let lH = Util.map(i,0,resolution,height*0.6,height);
-    let offsetY = app.H - lH;
-
-    let x = (offsetX/2) + (i * step);
-    let line = new Line(
-      new Vector(x,offsetY/2),
-      new Vector(x,lH + offsetY / 2
-      ),
-      2
-    );
-    console.log("hey");
-    line.color = colors[Math.floor(Util.map(i,0,resolution,0,colors.length))];
-    line.thickness = Util.map(i,0,resolution,1,10);
-    lines.push(line);
-  }
-}
-
-
-function smooth(points) {
-  $.moveTo(points[0].x, points[0].y);
-  for (i = 1; i < points.length - 2; i++) {
-    var xc = (points[i].x + points[i + 1].x) / 2;
-    var yc = (points[i].y + points[i + 1].y) / 2;
-    $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
-  }
-
-  $.quadraticCurveTo(
-    points[i].x,
-    points[i].y,
-    points[i + 1].x,
-    points[i + 1].y
-  );
-}
-
-app.resize = function(old_W,old_H){
-  populate();
-}
-
-app.setSize();
-populate();
-app.backgroundColor = "#0f0f11";
-app.run();
-
-},{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){
-const Util = require('./util.js');
-const Vector = require('./vector.js');
-
-class Tagada{
-  constructor(){
-    this.canvas = document.createElement("canvas");
-    this.ctx = this.canvas.getContext('2d');
-    document.body.appendChild(this.canvas);
-    this.W = 0;
-    this.H = 0;
-    this.ressources = {
-      images:[],
-      audio:[],
-    }
-    this.backgroundColor = "gray";
-    this.timeData = {
-      now : 0,
-      dt : 0,
-      last : Util.timeStamp(),
-      step : 1/60,
-    };
-    this.frame = 0;
-    window.addEventListener("resize",()=>{
-      this.setSize();
-      this.resize();
-    });
-    this.mouse = new Vector(0,0);
-    this.pmouse = new Vector(0,0);
-    window.addEventListener("pointermove",(event)=>{
-      this.pMove(event);
-    });
-  }
-  addImage(path){
-    let image = new Image();
-    image.src = path;
-    this.ressources.images.push(image);
-    return image;
-  }
-  drawImageCover(image,x,y,sizeX,sizeY){
-    if(sizeX <= 0 || sizeY <= 0) return false;
-    let scaleX,
-        scaleY,
-        ratio = image.width / image.height;
-
-    let sourceScaleX,sourceScaleY;
-
-    let cRation = sizeX / sizeY;
-
-    if(cRation > ratio){
-      scaleX = sizeX;
-      scaleY = scaleX / ratio;
-
-      sourceScaleX = image.width;
-      sourceScaleY = sourceScaleX / cRation;
-    }else{
-      scaleY = sizeY;
-      scaleX = scaleY * ratio;
-
-      sourceScaleY = image.height;
-      sourceScaleX = sourceScaleY * cRation;
-    }
-
-    let offsetX = (sizeX - scaleX);
-    let offsetY = (sizeY - scaleY);
-
-    this.ctx.drawImage(
-    image,(image.width - sourceScaleX) / 2,(image.height - sourceScaleY) / 2,sourceScaleX ,sourceScaleY,
-    x ,y,scaleX + offsetX,scaleY + offsetY
-    );
-
-
-  }
-  run(){
-    Promise.all(
-      this.ressources.images.map(image=>{
-        return new Promise(resolve=>{
-          image.onload = ()=>{
-            resolve();
-          }
-        });
-      })
-    ).then(v=>{
-      this.cap();
-      this.setSize();
-      this.loop();
-    });
-  }
-  cap(){
-    this.ctx.lineCap = "round";
-    this.ctx.lineJoin = "round";
-  }
-  resize(){
-
-  }
-  pMove(event){
-    this.mouse.x = event.clientX - this.canvas.offsetLeft;
-    this.mouse.y = event.clientY - this.canvas.offsetTop;
-  }
-  setSize(){
-    this.W = this.canvas.width = window.innerWidth;
-    this.H = this.canvas.height = window.innerHeight;
-    this.cap();
-  }
-  update(dt){
-
-  }
-  render(){
-
-  }
-  loop(){
-    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.render();
-    this.timeData.last = this.timeData.now;
-    this.frame += 1;
-
-    this.pmouse = this.mouse.copy();
-
-    requestAnimationFrame(()=>{
-      this.loop()
-    });
-
-  }
-}
-module.exports = Tagada;
-
-},{"./util.js":3,"./vector.js":4}],3:[function(require,module,exports){
-const Util = {};
-Util.timeStamp = function() {
-	return window.performance.now();
-};
-Util.random = function(min, max) {
-  return min + Math.random() * (max - min);
-};
-Util.randomArray = function(array){
-	return array[Math.floor(Math.random()*array.length)];
-};
-Util.map = function(a, b, c, d, e) {
-	a = this.clamp(a,b,c);
-  return (a - b) / (c - b) * (e - d) + d;
-};
-Util.lerp = function(value1, value2, amount) {
-  return value1 + (value2 - value1) * amount;
-};
-Util.clamp = function(value,min,max){
-	return Math.max(min, Math.min(max, value));
-};
-Util.threeAngle = function(p0,p1,p2){
-    var b = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2),
-        a = Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2),
-        c = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2);
-    return Math.acos( (a+b-c) / Math.sqrt(4*a*b) );
-}
-Util.hsl = function(hue,saturation,lightness){
-	return `hsl(${hue},${saturation}%,${lightness}%)`;
-}
-
-module.exports = Util;
-
-},{}],4:[function(require,module,exports){
-class Vector{
-	constructor(x,y){
-		this.x = x || 0;
-		this.y = y || 0;
-	}
-	set(x,y){
-		this.x = x;
-		this.y = y;
-	}
-  reset(){
-		this.x = 0;
-		this.y = 0;
-  }
-	fromAngle(angle){
-		let x = Math.cos(angle),
-			y = Math.sin(angle);
-		return new Vector(x,y);
-	}
-	add(vector){
-		this.x += vector.x;
-		this.y += vector.y;
-	}
-	sub(vector){
-		this.x -= vector.x;
-		this.y -= vector.y;
-	}
-	mult(scalar){
-		this.x *= scalar;
-		this.y *= scalar;
-	}
-	div(scalar){
-		this.x /= scalar;
-		this.y /= scalar;
-	}
-	dot(vector){
-		return vector.x * this.x + vector.y * this.y;
-	}
-	limit(limit_value){
-		if(this.mag() > limit_value) this.setMag(limit_value);
-	}
-	mag(){
-		return Math.hypot(this.x,this.y);
-	}
-	setMag(new_mag){
-		if(this.mag() > 0){
-			this.normalize();
-		}else{
-			this.x = 1;
-			this.y = 0;
-		}
-		this.mult(new_mag);
-	}
-	normalize(){
-		let mag = this.mag();
-		if(mag > 0){
-			this.x /= mag;
-			this.y /= mag;
-		}
-	}
-  normalizedMag(){
-    let copy = this.copy();
-    copy.normalize();
-    return copy.mag();
-  }
-	heading(){
-		return Math.atan2(this.y,this.x);
-	}
-	setHeading(angle){
-		let mag = this.mag();
-		this.x = Math.cos(angle) * mag;
-		this.y = Math.sin(angle) * mag;
-	}
-	dist(vector){
-		return new Vector(this.x - vector.x,this.y - vector.y).mag();
-	}
-	angle(vector){
-		return Math.atan2(vector.y - this.y, vector.x - this.x);
-	}
-	copy(){
-		return new Vector(this.x,this.y);
-	}
-}
-
-module.exports = Vector;
-
-},{}]},{},[1]);

+ 66 - 54
pictures/tangled/bundle.js

@@ -36,52 +36,48 @@ class Link {
 
 
 class Line {
-  constructor(start,end,resolution) {
+  constructor(x,y,radius,resolution) {
+    this.radius = radius;
     this.points = [];
     this.links = [];
-    this.start = start;
-    this.end = end;
     this.resolution = resolution;
-    this.length = start.dist(this.end);
-    this.segment = this.length/this.resolution;
-    this.thickness = 10;
+    this.thickness = Util.random(10,20);
+    this.drag = Util.random(0.9,0.99);
     this.color = "white";
     // Generate
-    let p = new Vector(this.start.x,this.start.y);
-    for (var i = 0; i < this.resolution + 1; i++) {
-          let direction = new Vector().fromAngle(
-            this.start.angle(this.end)
-          );
-      direction.setMag(this.segment);
-      let point = new Point(p.x,p.y);
+    for (var i = 0; i < this.resolution; i++) {
+      let a = Util.map(i,0,this.resolution,0,Math.PI*2);
+      let px = x + Math.cos(a) * this.radius,
+          py = y + Math.sin(a) * this.radius;
+      let point = new Point(px,py);
       this.points.push(point);
-      p.add(direction);
     }
     for (var i = 1; i < this.points.length; i++) {
       let p_0 = this.points[i-1],
           p_1 = this.points[i];
       let l = new Link(p_0,p_1);
       this.links.push(l);
-
     }
+    let l = new Link(this.points[0],this.points[this.points.length-1]);
+    this.links.push(l);
+
   }
   update(dt) {
     this.points.forEach(p => {
       if (p.pinned) return;
       let velocity = p.position.copy();
       velocity.sub(p.old_position);
-      velocity.mult(0.99);
+      velocity.mult(this.drag);
       p.old_position = p.position.copy();
       p.position.add(velocity);
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.1;
+      let min_dist = Math.min(app.W,app.H)*0.4;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
-        let diff = min_dist - d_m;
-        f.setMag(diff);
+        f.setMag(Util.map(d_m,0,min_dist,20,0));
         p.position.add(f);
       }
       if (p.position.x < 0) {
@@ -123,14 +119,36 @@ for (var i = 0; i < 5; i++) {
   }
   draw() {
 
-    $.strokeStyle = this.color;
+    $.strokeStyle = "gray";
     $.lineWidth = this.thickness;
-    $.beginPath();
-    let points = this.points.map(p=>{
-      return p.position
-    });
-    smooth(points);
-    $.stroke();
+
+  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));
+  $.beginPath();
+  smooth(points);
+  $.closePath();
+  $.stroke();
+
+}
+$.translate((this.thickness*0.4),
+(-this.thickness*0.2));
+
+$.strokeStyle = "lightgray";
+$.beginPath();
+smooth(points);
+$.closePath();
+$.stroke();
+
+$.restore();
+
   }
 }
 
@@ -149,48 +167,42 @@ app.render = function() {
 }
 
 function populate(){
-  let width = app.W * 0.8;
-  let height = app.H * 0.9;
-  let offsetX = app.W - width;
   lines = [];
-  let resolution = Math.floor(Util.map(
-    app.W,0,screen.width,10,100
-  ));
-  let step = width / resolution;
-  for (var i = 0; i < resolution; i++) {
-    let lH = Util.map(i,0,resolution,height*0.6,height);
-    let offsetY = app.H - lH;
-
-    let x = (offsetX/2) + (i * step);
-    let line = new Line(
-      new Vector(x,offsetY/2),
-      new Vector(x,lH + offsetY / 2
-      ),
-      20
-    );
-    line.color = colors[Math.floor(Util.map(i,0,resolution,0,colors.length))];
-    line.thickness = Util.map(i,0,resolution,1,10);
+  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);
     lines.push(line);
   }
 }
 
 
 function smooth(points) {
-  $.moveTo(points[0].x, points[0].y);
-  for (i = 1; i < points.length - 2; i++) {
+
+  var xc = (points[0].x + points[1].x) / 2;
+  var yc = (points[0].y + points[1].y) / 2;
+
+  $.moveTo(xc, yc);
+  for (i = 1; i < points.length - 1; i++) {
     var xc = (points[i].x + points[i + 1].x) / 2;
     var yc = (points[i].y + points[i + 1].y) / 2;
     $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
   }
 
-  $.quadraticCurveTo(
-    points[i].x,
-    points[i].y,
-    points[i + 1].x,
-    points[i + 1].y
-  );
+  var xc = (points[points.length - 1].x + points[0].x) / 2;
+  var yc = (points[points.length - 1].y + points[0].y) / 2;
+
+  $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
+
+  var xc = (points[0].x + points[1].x) / 2;
+  var yc = (points[0].y + points[1].y) / 2;
+
+  $.quadraticCurveTo(points[0].x, points[0].y, xc, yc);
+
+
+
+
 }
 
+
 app.resize = function(old_W,old_H){
   populate();
 }

+ 66 - 54
pictures/tangled/index.js

@@ -35,52 +35,48 @@ class Link {
 
 
 class Line {
-  constructor(start,end,resolution) {
+  constructor(x,y,radius,resolution) {
+    this.radius = radius;
     this.points = [];
     this.links = [];
-    this.start = start;
-    this.end = end;
     this.resolution = resolution;
-    this.length = start.dist(this.end);
-    this.segment = this.length/this.resolution;
-    this.thickness = 10;
+    this.thickness = Util.random(10,20);
+    this.drag = Util.random(0.9,0.99);
     this.color = "white";
     // Generate
-    let p = new Vector(this.start.x,this.start.y);
-    for (var i = 0; i < this.resolution + 1; i++) {
-          let direction = new Vector().fromAngle(
-            this.start.angle(this.end)
-          );
-      direction.setMag(this.segment);
-      let point = new Point(p.x,p.y);
+    for (var i = 0; i < this.resolution; i++) {
+      let a = Util.map(i,0,this.resolution,0,Math.PI*2);
+      let px = x + Math.cos(a) * this.radius,
+          py = y + Math.sin(a) * this.radius;
+      let point = new Point(px,py);
       this.points.push(point);
-      p.add(direction);
     }
     for (var i = 1; i < this.points.length; i++) {
       let p_0 = this.points[i-1],
           p_1 = this.points[i];
       let l = new Link(p_0,p_1);
       this.links.push(l);
-
     }
+    let l = new Link(this.points[0],this.points[this.points.length-1]);
+    this.links.push(l);
+
   }
   update(dt) {
     this.points.forEach(p => {
       if (p.pinned) return;
       let velocity = p.position.copy();
       velocity.sub(p.old_position);
-      velocity.mult(0.99);
+      velocity.mult(this.drag);
       p.old_position = p.position.copy();
       p.position.add(velocity);
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.1;
+      let min_dist = Math.min(app.W,app.H)*0.4;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
-        let diff = min_dist - d_m;
-        f.setMag(diff);
+        f.setMag(Util.map(d_m,0,min_dist,20,0));
         p.position.add(f);
       }
       if (p.position.x < 0) {
@@ -122,14 +118,36 @@ for (var i = 0; i < 5; i++) {
   }
   draw() {
 
-    $.strokeStyle = this.color;
+    $.strokeStyle = "gray";
     $.lineWidth = this.thickness;
-    $.beginPath();
-    let points = this.points.map(p=>{
-      return p.position
-    });
-    smooth(points);
-    $.stroke();
+
+  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));
+  $.beginPath();
+  smooth(points);
+  $.closePath();
+  $.stroke();
+
+}
+$.translate((this.thickness*0.4),
+(-this.thickness*0.2));
+
+$.strokeStyle = "lightgray";
+$.beginPath();
+smooth(points);
+$.closePath();
+$.stroke();
+
+$.restore();
+
   }
 }
 
@@ -148,48 +166,42 @@ app.render = function() {
 }
 
 function populate(){
-  let width = app.W * 0.8;
-  let height = app.H * 0.9;
-  let offsetX = app.W - width;
   lines = [];
-  let resolution = Math.floor(Util.map(
-    app.W,0,screen.width,10,100
-  ));
-  let step = width / resolution;
-  for (var i = 0; i < resolution; i++) {
-    let lH = Util.map(i,0,resolution,height*0.6,height);
-    let offsetY = app.H - lH;
-
-    let x = (offsetX/2) + (i * step);
-    let line = new Line(
-      new Vector(x,offsetY/2),
-      new Vector(x,lH + offsetY / 2
-      ),
-      20
-    );
-    line.color = colors[Math.floor(Util.map(i,0,resolution,0,colors.length))];
-    line.thickness = Util.map(i,0,resolution,1,10);
+  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);
     lines.push(line);
   }
 }
 
 
 function smooth(points) {
-  $.moveTo(points[0].x, points[0].y);
-  for (i = 1; i < points.length - 2; i++) {
+
+  var xc = (points[0].x + points[1].x) / 2;
+  var yc = (points[0].y + points[1].y) / 2;
+
+  $.moveTo(xc, yc);
+  for (i = 1; i < points.length - 1; i++) {
     var xc = (points[i].x + points[i + 1].x) / 2;
     var yc = (points[i].y + points[i + 1].y) / 2;
     $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
   }
 
-  $.quadraticCurveTo(
-    points[i].x,
-    points[i].y,
-    points[i + 1].x,
-    points[i + 1].y
-  );
+  var xc = (points[points.length - 1].x + points[0].x) / 2;
+  var yc = (points[points.length - 1].y + points[0].y) / 2;
+
+  $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
+
+  var xc = (points[0].x + points[1].x) / 2;
+  var yc = (points[0].y + points[1].y) / 2;
+
+  $.quadraticCurveTo(points[0].x, points[0].y, xc, yc);
+
+
+
+
 }
 
+
 app.resize = function(old_W,old_H){
   populate();
 }

+ 30 - 27
pictures/touch/bundle.js

@@ -6,7 +6,8 @@ const Vector = require('../../tagada/vector.js');
 let app = new Tagada();
 let lines = [];
 let $ = app.ctx;
-let colors = ["#dd352b","#415bdd","#dd352b"];
+
+
 class Point {
   constructor(x, y) {
     this.position = new Vector(x, y);
@@ -64,6 +65,8 @@ class Line {
       this.links.push(l);
 
     }
+    this.points[0].pinned = true;
+    this.points[this.points.length-1].pinned = true;
   }
   update(dt) {
     this.points.forEach(p => {
@@ -76,12 +79,11 @@ class Line {
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.1;
+      let min_dist = Math.min(app.W,app.H)*0.3;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
-        let diff = min_dist - d_m;
-        f.setMag(diff);
+        f.setMag(Util.map(d_m,0,min_dist,2,0));
         p.position.add(f);
       }
       if (p.position.x < 0) {
@@ -99,12 +101,11 @@ class Line {
 
     });
 
-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,19 +119,22 @@ for (var i = 0; i < 5; i++) {
   });
 
 
-}
+
 
   }
-  draw() {
+  draw(color) {
 
-    $.strokeStyle = this.color;
+    $.fillStyle = color;
     $.lineWidth = this.thickness;
     $.beginPath();
     let points = this.points.map(p=>{
       return p.position
     });
     smooth(points);
-    $.stroke();
+    $.lineTo(app.W,app.H);
+    $.lineTo(app.W,0);
+    $.lineTo(this.points[0].x,this.points[0].y);
+    $.fill();
   }
 }
 
@@ -142,34 +146,33 @@ app.update = function(dt) {
 }
 
 app.render = function() {
+  $.globalAlpha = 0.6;
   lines.forEach((item, i) => {
-    item.draw();
+    item.draw(Util.hsl(
+      Util.map(i,0,lines.length-1,360,376)
+      ,
+      Util.map(i,0,lines.length-1,50,60)
+      ,
+    Util.map(i,0,lines.length-1,0,60)
+  ));
   });
-
+  $.globalAlpha = 0;
 }
 
 function populate(){
-  let width = app.W * 0.8;
-  let height = app.H * 0.9;
-  let offsetX = app.W - width;
   lines = [];
   let resolution = Math.floor(Util.map(
-    app.W,0,screen.width,10,100
+    app.W,0,screen.width,1,20
   ));
-  let step = width / resolution;
+  let step = app.W / resolution;
   for (var i = 0; i < resolution; i++) {
-    let lH = Util.map(i,0,resolution,height*0.6,height);
-    let offsetY = app.H - lH;
 
-    let x = (offsetX/2) + (i * step);
+    let x =i * step;
     let line = new Line(
-      new Vector(x,offsetY/2),
-      new Vector(x,lH + offsetY / 2
-      ),
-      20
+      new Vector(x,0),
+      new Vector(x,app.H),
+      10
     );
-    line.color = colors[Math.floor(Util.map(i,0,resolution,0,colors.length))];
-    line.thickness = Util.map(i,0,resolution,1,10);
     lines.push(line);
   }
 }
@@ -197,7 +200,7 @@ app.resize = function(old_W,old_H){
 
 app.setSize();
 populate();
-app.backgroundColor = "#0f0f11";
+app.backgroundColor = "black";
 app.run();
 
 },{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){

+ 1 - 0
pictures/touch/index.html

@@ -8,6 +8,7 @@
       margin: 0;
       overflow: hidden;
     }
+
   </style>
 </head>
 

+ 30 - 27
pictures/touch/index.js

@@ -5,7 +5,8 @@ const Vector = require('../../tagada/vector.js');
 let app = new Tagada();
 let lines = [];
 let $ = app.ctx;
-let colors = ["#dd352b","#415bdd","#dd352b"];
+
+
 class Point {
   constructor(x, y) {
     this.position = new Vector(x, y);
@@ -63,6 +64,8 @@ class Line {
       this.links.push(l);
 
     }
+    this.points[0].pinned = true;
+    this.points[this.points.length-1].pinned = true;
   }
   update(dt) {
     this.points.forEach(p => {
@@ -75,12 +78,11 @@ class Line {
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.1;
+      let min_dist = Math.min(app.W,app.H)*0.3;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
-        let diff = min_dist - d_m;
-        f.setMag(diff);
+        f.setMag(Util.map(d_m,0,min_dist,2,0));
         p.position.add(f);
       }
       if (p.position.x < 0) {
@@ -98,12 +100,11 @@ class Line {
 
     });
 
-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
@@ -117,19 +118,22 @@ for (var i = 0; i < 5; i++) {
   });
 
 
-}
+
 
   }
-  draw() {
+  draw(color) {
 
-    $.strokeStyle = this.color;
+    $.fillStyle = color;
     $.lineWidth = this.thickness;
     $.beginPath();
     let points = this.points.map(p=>{
       return p.position
     });
     smooth(points);
-    $.stroke();
+    $.lineTo(app.W,app.H);
+    $.lineTo(app.W,0);
+    $.lineTo(this.points[0].x,this.points[0].y);
+    $.fill();
   }
 }
 
@@ -141,34 +145,33 @@ app.update = function(dt) {
 }
 
 app.render = function() {
+  $.globalAlpha = 0.6;
   lines.forEach((item, i) => {
-    item.draw();
+    item.draw(Util.hsl(
+      Util.map(i,0,lines.length-1,360,376)
+      ,
+      Util.map(i,0,lines.length-1,50,60)
+      ,
+    Util.map(i,0,lines.length-1,0,60)
+  ));
   });
-
+  $.globalAlpha = 0;
 }
 
 function populate(){
-  let width = app.W * 0.8;
-  let height = app.H * 0.9;
-  let offsetX = app.W - width;
   lines = [];
   let resolution = Math.floor(Util.map(
-    app.W,0,screen.width,10,100
+    app.W,0,screen.width,1,20
   ));
-  let step = width / resolution;
+  let step = app.W / resolution;
   for (var i = 0; i < resolution; i++) {
-    let lH = Util.map(i,0,resolution,height*0.6,height);
-    let offsetY = app.H - lH;
 
-    let x = (offsetX/2) + (i * step);
+    let x =i * step;
     let line = new Line(
-      new Vector(x,offsetY/2),
-      new Vector(x,lH + offsetY / 2
-      ),
-      20
+      new Vector(x,0),
+      new Vector(x,app.H),
+      10
     );
-    line.color = colors[Math.floor(Util.map(i,0,resolution,0,colors.length))];
-    line.thickness = Util.map(i,0,resolution,1,10);
     lines.push(line);
   }
 }
@@ -196,5 +199,5 @@ app.resize = function(old_W,old_H){
 
 app.setSize();
 populate();
-app.backgroundColor = "#0f0f11";
+app.backgroundColor = "black";
 app.run();

+ 2 - 2
pictures/touch/info.JSON

@@ -1,5 +1,5 @@
 {
 "title":"Touch",
-"description":"Once well arranged",
-"draft":true
+"description":"Gentle caress",
+"draft":false
 }

BIN
pictures/touch/vignette.png


+ 0 - 445
public/pictures/leaving/bundle.js

@@ -1,445 +0,0 @@
-(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-const Tagada = require('../../tagada/tagada.js');
-const Util = require('../../tagada/util.js');
-const Vector = require('../../tagada/vector.js');
-
-let app = new Tagada();
-let shapes = [];
-let $ = app.ctx;
-
-class Point {
-  constructor(x, y) {
-    this.position = new Vector(x, y);
-    this.old_position = new Vector(x, y);
-    this.pinned = false;
-  }
-  set(x,y){
-    this.position = new Vector(x, y);
-    this.old_position = new Vector(x, y);
-  }
-  draw() {
-    $.fillStyle = "white";
-    $.beginPath();
-    $.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
-    $.fill();
-    $.closePath();
-  }
-}
-
-class Link {
-  constructor(p0, p1) {
-    this.p0 = p0;
-    this.p1 = p1;
-    this.length = p0.position.dist(p1.position);
-  }
-}
-
-
-class Shape {
-  constructor(start, end, corner, attraction) {
-    this.points = [];
-    this.links = [];
-    this.corner = corner;
-    this.attraction = attraction;
-    this.start = start.p;
-    this.start_offset = start.offset;
-    this.end = end.p;
-    this.end_offset = end.offset;
-    this.resolution = Util.clamp(Math.floor(Math.max(app.W,app.H)/100),4,14);
-    let a = this.start.angle(this.end),
-      d = this.start.dist(this.end);
-    for (let i = 0; i < this.resolution; i++) {
-      let p_p = new Vector().fromAngle(a);
-      p_p.setMag(
-        Util.map(i, 0, this.resolution - 1, 0, d)
-      );
-      p_p.add(this.start);
-      this.points.push(new Point(p_p.x, p_p.y));
-    }
-    this.points[0].pinned = true;
-    this.points[this.points.length-1].pinned = true;
-    for (var i = 1; i < this.points.length; i++) {
-      let p_0 = this.points[i-1],
-          p_1 = this.points[i];
-      let l = new Link(p_0,p_1);
-      l.length *= 1.4;
-      this.links.push(l);
-    }
-  }
-  update(dt) {
-    // edges
-    let s = this.points[0].position;
-    s.x = this.start.x + Math.cos(app.frame*0.02) * this.start_offset.x;
-    s.y = this.start.y + Math.sin(app.frame*0.02) * this.start_offset.y;
-
-    let e = this.points[this.points.length-1].position;
-    e.x = this.end.x + Math.cos(app.frame*0.02) * this.end_offset.x;
-    e.y = this.end.y + Math.sin(app.frame*0.02) * this.end_offset.y;
-
-    this.points.forEach(p => {
-      if (p.pinned) return;
-      let velocity = p.position.copy();
-      velocity.sub(p.old_position);
-      velocity.mult(0.98);
-      p.old_position = p.position.copy();
-      p.position.add(velocity);
-      let a = p.position.angle(this.attraction);
-
-      let g = new Vector().fromAngle(a);
-      g.setMag(0.2);
-      p.position.add(g);
-      // mouse
-      let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.3;
-      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,1,0));
-        p.position.add(f);
-      }
-    });
-
-    this.links.forEach(link => {
-      let distance = link.p0.position.dist(link.p1.position),
-        difference = link.length - distance,
-        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
-      );
-      if (!link.p0.pinned) {
-        link.p0.position.sub(offset);
-      }
-      if (!link.p1.pinned) {
-        link.p1.position.add(offset);
-      }
-    });
-
-  }
-  draw() {
-
-    $.beginPath();
-    let points = this.points.map(p=>{
-      return p.position
-    });
-    smooth(points);
-    $.lineTo(this.corner.x,this.corner.y);
-    $.closePath();
-
-  }
-}
-
-app.update = function(dt) {
-  shapes.forEach(s=>{
-    s.update();
-  });
-}
-
-app.render = function() {
-  let $ = this.ctx;
-
-  $.globalCompositeOperation = "xor";
-  shapes.forEach(s=>{
-    $.fillStyle = "#ff3500";
-    s.draw();
-    $.fill();
-  });
-
-  $.globalCompositeOperation = "destination-over";
-  shapes.forEach(s=>{
-    $.fillStyle = s.color;
-    s.draw();
-    $.lineWidth = 20;
-    $.fill();
-  });
-  $.globalCompositeOperation = "source-over";
-
-}
-
-function populate(){
-  shapes = [];
-  let s1 =   new Shape(
-      {p:new Vector(0, app.H * 0.4),offset:{x:0,y:-30}},
-      {p:new Vector(app.W * 0.6, app.H),offset:{x:40,y:0}},
-      new Vector(0,app.H),
-      new Vector(app.W,0),
-    );
-    s1.color = "#ffff00";
-  shapes.push(s1);
-  let s2 =   new Shape(
-      {p:new Vector(app.W * 0.4,0 ),offset:{x:-60,y:0}},
-      {p:new Vector(app.W, app.H * 0.8),offset:{x:0,y:20}},
-      new Vector(app.W,0),
-      new Vector(0,app.H),
-    );
-    s2.color = "#002fff";
-  shapes.push(s2);
-}
-
-
-function smooth(points) {
-  $.moveTo(points[0].x, points[0].y);
-  for (i = 1; i < points.length - 2; i++) {
-    var xc = (points[i].x + points[i + 1].x) / 2;
-    var yc = (points[i].y + points[i + 1].y) / 2;
-    $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
-  }
-
-  $.quadraticCurveTo(
-    points[i].x,
-    points[i].y,
-    points[i + 1].x,
-    points[i + 1].y
-  );
-}
-
-app.resize = function(old_W,old_H){
-  populate();
-}
-
-app.setSize();
-populate();
-app.backgroundColor = "white";
-app.run();
-
-},{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){
-const Util = require('./util.js');
-const Vector = require('./vector.js');
-
-class Tagada{
-  constructor(){
-    this.canvas = document.createElement("canvas");
-    this.ctx = this.canvas.getContext('2d');
-    document.body.appendChild(this.canvas);
-    this.W = 0;
-    this.H = 0;
-    this.ressources = {
-      images:[],
-      audio:[],
-    }
-    this.backgroundColor = "gray";
-    this.timeData = {
-      now : 0,
-      dt : 0,
-      last : Util.timeStamp(),
-      step : 1/60,
-    };
-    this.frame = 0;
-    window.addEventListener("resize",()=>{
-      this.setSize();
-      this.resize();
-    });
-    this.mouse = new Vector(0,0);
-    window.addEventListener("pointermove",(event)=>{
-      this.pMove(event);
-    });
-  }
-  addImage(path){
-    let image = new Image();
-    image.src = path;
-    this.ressources.images.push(image);
-    return image;
-  }
-  drawImageCover(image,x,y,sizeX,sizeY){
-    if(sizeX <= 0 || sizeY <= 0) return false;
-    let scaleX,
-        scaleY,
-        ratio = image.width / image.height;
-
-    let sourceScaleX,sourceScaleY;
-
-    let cRation = sizeX / sizeY;
-
-    if(cRation > ratio){
-      scaleX = sizeX;
-      scaleY = scaleX / ratio;
-
-      sourceScaleX = image.width;
-      sourceScaleY = sourceScaleX / cRation;
-    }else{
-      scaleY = sizeY;
-      scaleX = scaleY * ratio;
-
-      sourceScaleY = image.height;
-      sourceScaleX = sourceScaleY * cRation;
-    }
-
-    let offsetX = (sizeX - scaleX);
-    let offsetY = (sizeY - scaleY);
-
-    this.ctx.drawImage(
-    image,(image.width - sourceScaleX) / 2,(image.height - sourceScaleY) / 2,sourceScaleX ,sourceScaleY,
-    x ,y,scaleX + offsetX,scaleY + offsetY
-    );
-
-
-  }
-  run(){
-    Promise.all(
-      this.ressources.images.map(image=>{
-        return new Promise(resolve=>{
-          image.onload = ()=>{
-            resolve();
-          }
-        });
-      })
-    ).then(v=>{
-      this.setSize();
-      this.loop();
-    });
-  }
-  resize(){
-
-  }
-  pMove(event){
-    this.mouse.x = event.clientX - this.canvas.offsetLeft;
-    this.mouse.y = event.clientY - this.canvas.offsetTop;
-  }
-  setSize(){
-    this.W = this.canvas.width = window.innerWidth;
-    this.H = this.canvas.height = window.innerHeight;
-  }
-  update(dt){
-
-  }
-  render(){
-
-  }
-  loop(){
-    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.render();
-    this.timeData.last = this.timeData.now;
-    this.frame += 1;
-
-    requestAnimationFrame(()=>{
-      this.loop()
-    });
-  }
-}
-module.exports = Tagada;
-
-},{"./util.js":3,"./vector.js":4}],3:[function(require,module,exports){
-const Util = {};
-Util.timeStamp = function() {
-	return window.performance.now();
-};
-Util.random = function(min, max) {
-  return min + Math.random() * (max - min);
-};
-Util.map = function(a, b, c, d, e) {
-	a = this.clamp(a,b,c);
-  return (a - b) / (c - b) * (e - d) + d;
-};
-Util.lerp = function(value1, value2, amount) {
-  return value1 + (value2 - value1) * amount;
-};
-Util.clamp = function(value,min,max){
-	return Math.max(min, Math.min(max, value));
-};
-Util.threeAngle = function(p0,p1,p2){
-    var b = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2),
-        a = Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2),
-        c = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2);
-    return Math.acos( (a+b-c) / Math.sqrt(4*a*b) );
-}
-Util.hsl = function(hue,saturation,lightness){
-	return `hsl(${hue},${saturation}%,${lightness}%)`;
-}
-
-module.exports = Util;
-
-},{}],4:[function(require,module,exports){
-class Vector{
-	constructor(x,y){
-		this.x = x || 0;
-		this.y = y || 0;
-	}
-	set(x,y){
-		this.x = x;
-		this.y = y;
-	}
-  reset(){
-		this.x = 0;
-		this.y = 0;
-  }
-	fromAngle(angle){
-		let x = Math.cos(angle),
-			y = Math.sin(angle);
-		return new Vector(x,y);
-	}
-	add(vector){
-		this.x += vector.x;
-		this.y += vector.y;
-	}
-	sub(vector){
-		this.x -= vector.x;
-		this.y -= vector.y;
-	}
-	mult(scalar){
-		this.x *= scalar;
-		this.y *= scalar;
-	}
-	div(scalar){
-		this.x /= scalar;
-		this.y /= scalar;
-	}
-	dot(vector){
-		return vector.x * this.x + vector.y * this.y;
-	}
-	limit(limit_value){
-		if(this.mag() > limit_value) this.setMag(limit_value);
-	}
-	mag(){
-		return Math.hypot(this.x,this.y);
-	}
-	setMag(new_mag){
-		if(this.mag() > 0){
-			this.normalize();
-		}else{
-			this.x = 1;
-			this.y = 0;
-		}
-		this.mult(new_mag);
-	}
-	normalize(){
-		let mag = this.mag();
-		if(mag > 0){
-			this.x /= mag;
-			this.y /= mag;
-		}
-	}
-  normalizedMag(){
-    let copy = this.copy();
-    copy.normalize();
-    return copy.mag();
-  }
-	heading(){
-		return Math.atan2(this.y,this.x);
-	}
-	setHeading(angle){
-		let mag = this.mag();
-		this.x = Math.cos(angle) * mag;
-		this.y = Math.sin(angle) * mag;
-	}
-	dist(vector){
-		return new Vector(this.x - vector.x,this.y - vector.y).mag();
-	}
-	angle(vector){
-		return Math.atan2(vector.y - this.y, vector.x - this.x);
-	}
-	copy(){
-		return new Vector(this.x,this.y);
-	}
-}
-
-module.exports = Vector;
-
-},{}]},{},[1]);

+ 0 - 4
public/pictures/leaving/index.html

@@ -1,4 +0,0 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Mixed up</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>

BIN
public/pictures/leaving/vignette.png


+ 14 - 13
public/pictures/mixed/bundle.js

@@ -53,7 +53,7 @@ var guitar = new Tone.Sampler({
   attack : 0 ,
  release : 1000 ,
  onload:()=>{app.run()},
-   volume:-40,
+   volume:-20,
   "baseUrl" : "./guitar-nylon/"
 }).toMaster();
 
@@ -113,8 +113,8 @@ class Line {
     this.p0 = p0;
     this.p1 = p1;
     this.lineLength = p0.dist(p1);
-    this.thickness = Util.random(8,16);
-    this.colors = ["#f6324c","#ffb111","#0cb53f","#008afe"];
+    this.thickness = Util.random(8,12);
+    this.colors = ["#1a003e","#f6324c","#1a003e","#f6324c","#1a003e","#f6324c","#1a003e","#4457ff"];
     this.color = Util.randomArray(this.colors);
     this.note = Util.randomArray(notes);
     this.type = "line";
@@ -130,6 +130,7 @@ class Line {
     this.k = Util.random(0.1,10);
     this.damping= Util.random(0.8,0.99);
     this.velocity = new Vector(0,0);
+    this.resolution = Util.random(3,20)
 
   }
   update(dt){
@@ -195,7 +196,7 @@ class Line {
 
 
 
-    let resolution = 10;
+    let resolution = this.resolution;
 
     let points = [];
     let angle = this.p0.angle(this.hookPosition);
@@ -224,7 +225,7 @@ class Line {
      length = this.hookPosition.dist(this.p1);
      seg = length / resolution;
 
-    for (var i = 0; i < resolution; i++) {
+    for (var i = 0; i < resolution+1; i++) {
       let aOffset = - Math.PI/2;
       if(i%2 == 0){
         aOffset = Math.PI/2;
@@ -305,9 +306,8 @@ 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));
+
+  let density = Math.floor(Util.map(app.W,0,screen.width,1,30));
   lines = [];
   for (var i = 0; i < density; i++) {
     let types = ["line","spring"];
@@ -317,11 +317,11 @@ function populate() {
     sides = sides.replace(firstSide, "");
     let secondSide = sides.charAt(Math.floor(Math.random() * sides.length));
 
-    /*
+
     let rP0 = getSideRange(firstSide),
         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)),
@@ -334,8 +334,9 @@ function populate() {
         p1.setMag(rL);
         p0.add(rP);
         p1.add(rP);
+        */
     let l = new Line(
-      p0,p1
+      rP0,rP1
     );
     l.type = type;
     lines.push(l);
@@ -413,9 +414,9 @@ function smooth(points) {
   );
 }
 
-
+app.setSize();
 populate();
-app.backgroundColor = "#2c0067";
+app.backgroundColor = "transparent";
 
 },{"../../tagada/tagada.js":3,"../../tagada/util.js":4,"../../tagada/vector.js":5,"tone":1}],3:[function(require,module,exports){
 const Util = require('./util.js');

+ 21 - 4
public/pictures/mixed/index.html

@@ -1,4 +1,21 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Mixed up</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;
+    }
+    canvas{
+      background-image: radial-gradient(circle at bottom, #2c0067 ,black);
+    }
+  </style>
+</head>
+
+<body>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

BIN
public/pictures/mixed/vignette.png


+ 0 - 445
public/pictures/spark/bundle.js

@@ -1,445 +0,0 @@
-(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-const Tagada = require('../../tagada/tagada.js');
-const Util = require('../../tagada/util.js');
-const Vector = require('../../tagada/vector.js');
-
-let app = new Tagada();
-let shapes = [];
-let $ = app.ctx;
-
-class Point {
-  constructor(x, y) {
-    this.position = new Vector(x, y);
-    this.old_position = new Vector(x, y);
-    this.pinned = false;
-  }
-  set(x,y){
-    this.position = new Vector(x, y);
-    this.old_position = new Vector(x, y);
-  }
-  draw() {
-    $.fillStyle = "white";
-    $.beginPath();
-    $.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
-    $.fill();
-    $.closePath();
-  }
-}
-
-class Link {
-  constructor(p0, p1) {
-    this.p0 = p0;
-    this.p1 = p1;
-    this.length = p0.position.dist(p1.position);
-  }
-}
-
-
-class Shape {
-  constructor(start, end, corner, attraction) {
-    this.points = [];
-    this.links = [];
-    this.corner = corner;
-    this.attraction = attraction;
-    this.start = start.p;
-    this.start_offset = start.offset;
-    this.end = end.p;
-    this.end_offset = end.offset;
-    this.resolution = Util.clamp(Math.floor(Math.max(app.W,app.H)/100),4,14);
-    let a = this.start.angle(this.end),
-      d = this.start.dist(this.end);
-    for (let i = 0; i < this.resolution; i++) {
-      let p_p = new Vector().fromAngle(a);
-      p_p.setMag(
-        Util.map(i, 0, this.resolution - 1, 0, d)
-      );
-      p_p.add(this.start);
-      this.points.push(new Point(p_p.x, p_p.y));
-    }
-    this.points[0].pinned = true;
-    this.points[this.points.length-1].pinned = true;
-    for (var i = 1; i < this.points.length; i++) {
-      let p_0 = this.points[i-1],
-          p_1 = this.points[i];
-      let l = new Link(p_0,p_1);
-      l.length *= 1.4;
-      this.links.push(l);
-    }
-  }
-  update(dt) {
-    // edges
-    let s = this.points[0].position;
-    s.x = this.start.x + Math.cos(app.frame*0.02) * this.start_offset.x;
-    s.y = this.start.y + Math.sin(app.frame*0.02) * this.start_offset.y;
-
-    let e = this.points[this.points.length-1].position;
-    e.x = this.end.x + Math.cos(app.frame*0.02) * this.end_offset.x;
-    e.y = this.end.y + Math.sin(app.frame*0.02) * this.end_offset.y;
-
-    this.points.forEach(p => {
-      if (p.pinned) return;
-      let velocity = p.position.copy();
-      velocity.sub(p.old_position);
-      velocity.mult(0.98);
-      p.old_position = p.position.copy();
-      p.position.add(velocity);
-      let a = p.position.angle(this.attraction);
-
-      let g = new Vector().fromAngle(a);
-      g.setMag(0.2);
-      p.position.add(g);
-      // mouse
-      let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.3;
-      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,1,0));
-        p.position.add(f);
-      }
-    });
-
-    this.links.forEach(link => {
-      let distance = link.p0.position.dist(link.p1.position),
-        difference = link.length - distance,
-        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
-      );
-      if (!link.p0.pinned) {
-        link.p0.position.sub(offset);
-      }
-      if (!link.p1.pinned) {
-        link.p1.position.add(offset);
-      }
-    });
-
-  }
-  draw() {
-
-    $.beginPath();
-    let points = this.points.map(p=>{
-      return p.position
-    });
-    smooth(points);
-    $.lineTo(this.corner.x,this.corner.y);
-    $.closePath();
-
-  }
-}
-
-app.update = function(dt) {
-  shapes.forEach(s=>{
-    s.update();
-  });
-}
-
-app.render = function() {
-  let $ = this.ctx;
-
-  $.globalCompositeOperation = "xor";
-  shapes.forEach(s=>{
-    $.fillStyle = "#ff3500";
-    s.draw();
-    $.fill();
-  });
-
-  $.globalCompositeOperation = "destination-over";
-  shapes.forEach(s=>{
-    $.fillStyle = s.color;
-    s.draw();
-    $.lineWidth = 20;
-    $.fill();
-  });
-  $.globalCompositeOperation = "source-over";
-
-}
-
-function populate(){
-  shapes = [];
-  let s1 =   new Shape(
-      {p:new Vector(0, app.H * 0.4),offset:{x:0,y:-30}},
-      {p:new Vector(app.W * 0.6, app.H),offset:{x:40,y:0}},
-      new Vector(0,app.H),
-      new Vector(app.W,0),
-    );
-    s1.color = "#ffff00";
-  shapes.push(s1);
-  let s2 =   new Shape(
-      {p:new Vector(app.W * 0.4,0 ),offset:{x:-60,y:0}},
-      {p:new Vector(app.W, app.H * 0.8),offset:{x:0,y:20}},
-      new Vector(app.W,0),
-      new Vector(0,app.H),
-    );
-    s2.color = "#002fff";
-  shapes.push(s2);
-}
-
-
-function smooth(points) {
-  $.moveTo(points[0].x, points[0].y);
-  for (i = 1; i < points.length - 2; i++) {
-    var xc = (points[i].x + points[i + 1].x) / 2;
-    var yc = (points[i].y + points[i + 1].y) / 2;
-    $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
-  }
-
-  $.quadraticCurveTo(
-    points[i].x,
-    points[i].y,
-    points[i + 1].x,
-    points[i + 1].y
-  );
-}
-
-app.resize = function(old_W,old_H){
-  populate();
-}
-
-app.setSize();
-populate();
-app.backgroundColor = "white";
-app.run();
-
-},{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){
-const Util = require('./util.js');
-const Vector = require('./vector.js');
-
-class Tagada{
-  constructor(){
-    this.canvas = document.createElement("canvas");
-    this.ctx = this.canvas.getContext('2d');
-    document.body.appendChild(this.canvas);
-    this.W = 0;
-    this.H = 0;
-    this.ressources = {
-      images:[],
-      audio:[],
-    }
-    this.backgroundColor = "gray";
-    this.timeData = {
-      now : 0,
-      dt : 0,
-      last : Util.timeStamp(),
-      step : 1/60,
-    };
-    this.frame = 0;
-    window.addEventListener("resize",()=>{
-      this.setSize();
-      this.resize();
-    });
-    this.mouse = new Vector(0,0);
-    window.addEventListener("pointermove",(event)=>{
-      this.pMove(event);
-    });
-  }
-  addImage(path){
-    let image = new Image();
-    image.src = path;
-    this.ressources.images.push(image);
-    return image;
-  }
-  drawImageCover(image,x,y,sizeX,sizeY){
-    if(sizeX <= 0 || sizeY <= 0) return false;
-    let scaleX,
-        scaleY,
-        ratio = image.width / image.height;
-
-    let sourceScaleX,sourceScaleY;
-
-    let cRation = sizeX / sizeY;
-
-    if(cRation > ratio){
-      scaleX = sizeX;
-      scaleY = scaleX / ratio;
-
-      sourceScaleX = image.width;
-      sourceScaleY = sourceScaleX / cRation;
-    }else{
-      scaleY = sizeY;
-      scaleX = scaleY * ratio;
-
-      sourceScaleY = image.height;
-      sourceScaleX = sourceScaleY * cRation;
-    }
-
-    let offsetX = (sizeX - scaleX);
-    let offsetY = (sizeY - scaleY);
-
-    this.ctx.drawImage(
-    image,(image.width - sourceScaleX) / 2,(image.height - sourceScaleY) / 2,sourceScaleX ,sourceScaleY,
-    x ,y,scaleX + offsetX,scaleY + offsetY
-    );
-
-
-  }
-  run(){
-    Promise.all(
-      this.ressources.images.map(image=>{
-        return new Promise(resolve=>{
-          image.onload = ()=>{
-            resolve();
-          }
-        });
-      })
-    ).then(v=>{
-      this.setSize();
-      this.loop();
-    });
-  }
-  resize(){
-
-  }
-  pMove(event){
-    this.mouse.x = event.clientX - this.canvas.offsetLeft;
-    this.mouse.y = event.clientY - this.canvas.offsetTop;
-  }
-  setSize(){
-    this.W = this.canvas.width = window.innerWidth;
-    this.H = this.canvas.height = window.innerHeight;
-  }
-  update(dt){
-
-  }
-  render(){
-
-  }
-  loop(){
-    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.render();
-    this.timeData.last = this.timeData.now;
-    this.frame += 1;
-
-    requestAnimationFrame(()=>{
-      this.loop()
-    });
-  }
-}
-module.exports = Tagada;
-
-},{"./util.js":3,"./vector.js":4}],3:[function(require,module,exports){
-const Util = {};
-Util.timeStamp = function() {
-	return window.performance.now();
-};
-Util.random = function(min, max) {
-  return min + Math.random() * (max - min);
-};
-Util.map = function(a, b, c, d, e) {
-	a = this.clamp(a,b,c);
-  return (a - b) / (c - b) * (e - d) + d;
-};
-Util.lerp = function(value1, value2, amount) {
-  return value1 + (value2 - value1) * amount;
-};
-Util.clamp = function(value,min,max){
-	return Math.max(min, Math.min(max, value));
-};
-Util.threeAngle = function(p0,p1,p2){
-    var b = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2),
-        a = Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2),
-        c = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2);
-    return Math.acos( (a+b-c) / Math.sqrt(4*a*b) );
-}
-Util.hsl = function(hue,saturation,lightness){
-	return `hsl(${hue},${saturation}%,${lightness}%)`;
-}
-
-module.exports = Util;
-
-},{}],4:[function(require,module,exports){
-class Vector{
-	constructor(x,y){
-		this.x = x || 0;
-		this.y = y || 0;
-	}
-	set(x,y){
-		this.x = x;
-		this.y = y;
-	}
-  reset(){
-		this.x = 0;
-		this.y = 0;
-  }
-	fromAngle(angle){
-		let x = Math.cos(angle),
-			y = Math.sin(angle);
-		return new Vector(x,y);
-	}
-	add(vector){
-		this.x += vector.x;
-		this.y += vector.y;
-	}
-	sub(vector){
-		this.x -= vector.x;
-		this.y -= vector.y;
-	}
-	mult(scalar){
-		this.x *= scalar;
-		this.y *= scalar;
-	}
-	div(scalar){
-		this.x /= scalar;
-		this.y /= scalar;
-	}
-	dot(vector){
-		return vector.x * this.x + vector.y * this.y;
-	}
-	limit(limit_value){
-		if(this.mag() > limit_value) this.setMag(limit_value);
-	}
-	mag(){
-		return Math.hypot(this.x,this.y);
-	}
-	setMag(new_mag){
-		if(this.mag() > 0){
-			this.normalize();
-		}else{
-			this.x = 1;
-			this.y = 0;
-		}
-		this.mult(new_mag);
-	}
-	normalize(){
-		let mag = this.mag();
-		if(mag > 0){
-			this.x /= mag;
-			this.y /= mag;
-		}
-	}
-  normalizedMag(){
-    let copy = this.copy();
-    copy.normalize();
-    return copy.mag();
-  }
-	heading(){
-		return Math.atan2(this.y,this.x);
-	}
-	setHeading(angle){
-		let mag = this.mag();
-		this.x = Math.cos(angle) * mag;
-		this.y = Math.sin(angle) * mag;
-	}
-	dist(vector){
-		return new Vector(this.x - vector.x,this.y - vector.y).mag();
-	}
-	angle(vector){
-		return Math.atan2(vector.y - this.y, vector.x - this.x);
-	}
-	copy(){
-		return new Vector(this.x,this.y);
-	}
-}
-
-module.exports = Vector;
-
-},{}]},{},[1]);

+ 0 - 4
public/pictures/spark/index.html

@@ -1,4 +0,0 @@
-<!DOCTYPE html  ><html lang="en"> </html><head><title>Spark</title><style>body{
-  margin:0;
-  overflow:hidden;
-}</style></head><body><script src="bundle.js"></script></body>

BIN
public/pictures/spark/vignette.png


+ 66 - 54
public/pictures/tangled/bundle.js

@@ -36,52 +36,48 @@ class Link {
 
 
 class Line {
-  constructor(start,end,resolution) {
+  constructor(x,y,radius,resolution) {
+    this.radius = radius;
     this.points = [];
     this.links = [];
-    this.start = start;
-    this.end = end;
     this.resolution = resolution;
-    this.length = start.dist(this.end);
-    this.segment = this.length/this.resolution;
-    this.thickness = 10;
+    this.thickness = Util.random(10,20);
+    this.drag = Util.random(0.9,0.99);
     this.color = "white";
     // Generate
-    let p = new Vector(this.start.x,this.start.y);
-    for (var i = 0; i < this.resolution + 1; i++) {
-          let direction = new Vector().fromAngle(
-            this.start.angle(this.end)
-          );
-      direction.setMag(this.segment);
-      let point = new Point(p.x,p.y);
+    for (var i = 0; i < this.resolution; i++) {
+      let a = Util.map(i,0,this.resolution,0,Math.PI*2);
+      let px = x + Math.cos(a) * this.radius,
+          py = y + Math.sin(a) * this.radius;
+      let point = new Point(px,py);
       this.points.push(point);
-      p.add(direction);
     }
     for (var i = 1; i < this.points.length; i++) {
       let p_0 = this.points[i-1],
           p_1 = this.points[i];
       let l = new Link(p_0,p_1);
       this.links.push(l);
-
     }
+    let l = new Link(this.points[0],this.points[this.points.length-1]);
+    this.links.push(l);
+
   }
   update(dt) {
     this.points.forEach(p => {
       if (p.pinned) return;
       let velocity = p.position.copy();
       velocity.sub(p.old_position);
-      velocity.mult(0.99);
+      velocity.mult(this.drag);
       p.old_position = p.position.copy();
       p.position.add(velocity);
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.1;
+      let min_dist = Math.min(app.W,app.H)*0.4;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
-        let diff = min_dist - d_m;
-        f.setMag(diff);
+        f.setMag(Util.map(d_m,0,min_dist,20,0));
         p.position.add(f);
       }
       if (p.position.x < 0) {
@@ -123,14 +119,36 @@ for (var i = 0; i < 5; i++) {
   }
   draw() {
 
-    $.strokeStyle = this.color;
+    $.strokeStyle = "gray";
     $.lineWidth = this.thickness;
-    $.beginPath();
-    let points = this.points.map(p=>{
-      return p.position
-    });
-    smooth(points);
-    $.stroke();
+
+  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));
+  $.beginPath();
+  smooth(points);
+  $.closePath();
+  $.stroke();
+
+}
+$.translate((this.thickness*0.4),
+(-this.thickness*0.2));
+
+$.strokeStyle = "lightgray";
+$.beginPath();
+smooth(points);
+$.closePath();
+$.stroke();
+
+$.restore();
+
   }
 }
 
@@ -149,48 +167,42 @@ app.render = function() {
 }
 
 function populate(){
-  let width = app.W * 0.8;
-  let height = app.H * 0.9;
-  let offsetX = app.W - width;
   lines = [];
-  let resolution = Math.floor(Util.map(
-    app.W,0,screen.width,10,100
-  ));
-  let step = width / resolution;
-  for (var i = 0; i < resolution; i++) {
-    let lH = Util.map(i,0,resolution,height*0.6,height);
-    let offsetY = app.H - lH;
-
-    let x = (offsetX/2) + (i * step);
-    let line = new Line(
-      new Vector(x,offsetY/2),
-      new Vector(x,lH + offsetY / 2
-      ),
-      20
-    );
-    line.color = colors[Math.floor(Util.map(i,0,resolution,0,colors.length))];
-    line.thickness = Util.map(i,0,resolution,1,10);
+  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);
     lines.push(line);
   }
 }
 
 
 function smooth(points) {
-  $.moveTo(points[0].x, points[0].y);
-  for (i = 1; i < points.length - 2; i++) {
+
+  var xc = (points[0].x + points[1].x) / 2;
+  var yc = (points[0].y + points[1].y) / 2;
+
+  $.moveTo(xc, yc);
+  for (i = 1; i < points.length - 1; i++) {
     var xc = (points[i].x + points[i + 1].x) / 2;
     var yc = (points[i].y + points[i + 1].y) / 2;
     $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
   }
 
-  $.quadraticCurveTo(
-    points[i].x,
-    points[i].y,
-    points[i + 1].x,
-    points[i + 1].y
-  );
+  var xc = (points[points.length - 1].x + points[0].x) / 2;
+  var yc = (points[points.length - 1].y + points[0].y) / 2;
+
+  $.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
+
+  var xc = (points[0].x + points[1].x) / 2;
+  var yc = (points[0].y + points[1].y) / 2;
+
+  $.quadraticCurveTo(points[0].x, points[0].y, xc, yc);
+
+
+
+
 }
 
+
 app.resize = function(old_W,old_H){
   populate();
 }

+ 30 - 27
public/pictures/touch/bundle.js

@@ -6,7 +6,8 @@ const Vector = require('../../tagada/vector.js');
 let app = new Tagada();
 let lines = [];
 let $ = app.ctx;
-let colors = ["#dd352b","#415bdd","#dd352b"];
+
+
 class Point {
   constructor(x, y) {
     this.position = new Vector(x, y);
@@ -64,6 +65,8 @@ class Line {
       this.links.push(l);
 
     }
+    this.points[0].pinned = true;
+    this.points[this.points.length-1].pinned = true;
   }
   update(dt) {
     this.points.forEach(p => {
@@ -76,12 +79,11 @@ class Line {
 
       // mouse
       let d_m = app.mouse.dist(p.position);
-      let min_dist = Math.min(app.W,app.H)*0.1;
+      let min_dist = Math.min(app.W,app.H)*0.3;
       if(d_m < min_dist){
         let a = app.mouse.angle(p.position);
         let f = new Vector().fromAngle(a);
-        let diff = min_dist - d_m;
-        f.setMag(diff);
+        f.setMag(Util.map(d_m,0,min_dist,2,0));
         p.position.add(f);
       }
       if (p.position.x < 0) {
@@ -99,12 +101,11 @@ class Line {
 
     });
 
-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,19 +119,22 @@ for (var i = 0; i < 5; i++) {
   });
 
 
-}
+
 
   }
-  draw() {
+  draw(color) {
 
-    $.strokeStyle = this.color;
+    $.fillStyle = color;
     $.lineWidth = this.thickness;
     $.beginPath();
     let points = this.points.map(p=>{
       return p.position
     });
     smooth(points);
-    $.stroke();
+    $.lineTo(app.W,app.H);
+    $.lineTo(app.W,0);
+    $.lineTo(this.points[0].x,this.points[0].y);
+    $.fill();
   }
 }
 
@@ -142,34 +146,33 @@ app.update = function(dt) {
 }
 
 app.render = function() {
+  $.globalAlpha = 0.6;
   lines.forEach((item, i) => {
-    item.draw();
+    item.draw(Util.hsl(
+      Util.map(i,0,lines.length-1,360,376)
+      ,
+      Util.map(i,0,lines.length-1,50,60)
+      ,
+    Util.map(i,0,lines.length-1,0,60)
+  ));
   });
-
+  $.globalAlpha = 0;
 }
 
 function populate(){
-  let width = app.W * 0.8;
-  let height = app.H * 0.9;
-  let offsetX = app.W - width;
   lines = [];
   let resolution = Math.floor(Util.map(
-    app.W,0,screen.width,10,100
+    app.W,0,screen.width,1,20
   ));
-  let step = width / resolution;
+  let step = app.W / resolution;
   for (var i = 0; i < resolution; i++) {
-    let lH = Util.map(i,0,resolution,height*0.6,height);
-    let offsetY = app.H - lH;
 
-    let x = (offsetX/2) + (i * step);
+    let x =i * step;
     let line = new Line(
-      new Vector(x,offsetY/2),
-      new Vector(x,lH + offsetY / 2
-      ),
-      20
+      new Vector(x,0),
+      new Vector(x,app.H),
+      10
     );
-    line.color = colors[Math.floor(Util.map(i,0,resolution,0,colors.length))];
-    line.thickness = Util.map(i,0,resolution,1,10);
     lines.push(line);
   }
 }
@@ -197,7 +200,7 @@ app.resize = function(old_W,old_H){
 
 app.setSize();
 populate();
-app.backgroundColor = "#0f0f11";
+app.backgroundColor = "black";
 app.run();
 
 },{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){

BIN
public/pictures/touch/vignette.png


+ 0 - 335
public/pictures/warmth/bundle.js

@@ -1,335 +0,0 @@
-(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-const Tagada = require('../../tagada/tagada.js');
-const Util = require('../../tagada/util.js');
-const Vector = require('../../tagada/vector.js');
-
-
-let app = new Tagada();
-
-let div = {
-  x: {
-    value: 0,
-    min: 1,
-    max: 3,
-    size: 0
-  },
-  y: {
-    value: 0,
-    min: 1,
-    max: 10,
-    size: 0
-  },
-  total: 1
-};
-
-let gap = 12,
-  padding = 20,
-  margin = -gap / 2 + padding;
-
-let target = new Vector(0, 0);
-
-app.divide = function() {
-  div.x.value = Math.round(
-    Util.map(this.W, 0, window.screen.width, div.x.min, div.x.max)
-  );
-  div.y.value = Math.round(
-    Util.map(this.H, 0, window.screen.height, div.y.min, div.y.max)
-  );
-  div.x.size = -gap + (this.W - margin * 2) / div.x.value;
-  div.y.size = -gap + (this.H - margin * 2) / div.y.value;
-  div.total = div.x.value * div.y.value;
-};
-
-app.update = function(dt) {
-  let offset = this.mouse.copy();
-  offset.sub(target);
-  offset.mult(0.1);
-  target.add(offset.copy());
-};
-
-app.render = function() {
-  let $ = this.ctx;
-  for (let i = 0; i < div.total; i++) {
-    let x = gap / 2 + margin + Math.floor(i / div.y.value) * (gap + div.x.size),
-      y = gap / 2 + margin + (i % div.y.value) * (gap + div.y.size);
-
-    let min_size = Math.min(div.x.size, div.y.size);
-    let angle = target.angle(new Vector(x, y));
-
-    let color = Math.sin(
-      Math.cos(angle + this.frame * 0.02 + x * 0.02) *
-        Math.sin(angle + this.frame * 0.02 + y * 0.001)
-    );
-    let s = Util.map(color, -1, 1, 0, 1);
-    $.fillStyle = Util.hsl(
-      Util.map(color, -1, 1, 360, 300),
-      Util.map(color, -1, 1, 90, 60),
-      Util.map(color, -1, 1, 50, 80)
-    );
-    let x_o = x,
-      y_o = y ;
-    $.fillRect(
-       x_o,
-       y_o,
-      div.x.size,
-      div.y.size
-    );
-  }
-};
-
-app.resize = function() {
-  this.divide();
-};
-
-app.backgroundColor = "black";
-
-app.setSize();
-target = new Vector(app.W / 2, app.H / 2);
-app.mouse = new Vector(app.W / 2, app.H / 2);
-app.divide();
-app.run();
-
-},{"../../tagada/tagada.js":2,"../../tagada/util.js":3,"../../tagada/vector.js":4}],2:[function(require,module,exports){
-const Util = require('./util.js');
-const Vector = require('./vector.js');
-
-class Tagada{
-  constructor(){
-    this.canvas = document.createElement("canvas");
-    this.ctx = this.canvas.getContext('2d');
-    document.body.appendChild(this.canvas);
-    this.W = 0;
-    this.H = 0;
-    this.ressources = {
-      images:[],
-      audio:[],
-    }
-    this.backgroundColor = "gray";
-    this.timeData = {
-      now : 0,
-      dt : 0,
-      last : Util.timeStamp(),
-      step : 1/60,
-    };
-    this.frame = 0;
-    window.addEventListener("resize",()=>{
-      this.setSize();
-      this.resize();
-    });
-    this.mouse = new Vector(0,0);
-    window.addEventListener("pointermove",(event)=>{
-      this.pMove(event);
-    });
-  }
-  addImage(path){
-    let image = new Image();
-    image.src = path;
-    this.ressources.images.push(image);
-    return image;
-  }
-  drawImageCover(image,x,y,sizeX,sizeY){
-    if(sizeX <= 0 || sizeY <= 0) return false;
-    let scaleX,
-        scaleY,
-        ratio = image.width / image.height;
-