p5MobileWebExamples/sketch.js at master · OhJia/p5MobileWebExamples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// template http://bit.ly/1g8h17S

var diameter;
var distance;
var ex, ey;
var mc
var count;

function setup(){
  var myCan = createCanvas(windowWidth, windowHeight);
  myCan.parent('p5Container');
  var element = document.getElementById('p5Container');
  mc = new Hammer(element);
  mc.get('pinch').set({ enable: true });

  count = 0;
  diameter = 50;
  ex = int(windowWidth/2);
  ey = int(windowHeight/2);

  pinched();
}

function draw(){
  background(255);
  noStroke();
  if (count > 0){
    fill(color(ex, ey, count * 10.2, count * 10.2));
    ellipse(ex, ey, 100 + (40 - count), 100 + (40 - count));
    --count;
  }
  fill(color(ex, ey, 0));
  ellipse(ex, ey, diameter, diameter);
}

// function touchMoved() {
//   ex = touchX;
//   ey = touchY;
//   return false;
// }

function pinched() {
  mc.on("pinch", function(e){
    distance = int(dist(e.center.x, e.center.y, ex, ey));
    //console.log(e.center.x, e.center.y, ex, ey);
    //console.log(distance, diameter/2);
    //e.preventDefault();
    if (distance < diameter/2) {
      //console.log('on ellipse')
      count = 25;
    }
  });
}