fidget/sketch.js at main · gdiggs/fidget · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
const fills =["#e5007d", "#27214d", "#00a7b5", "#d95702", "#d42450"];

let nextFill = 0;
let lastID = 1;

let shapes = [];
let points = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(94,78,156);

  drawShapes();
  drawTrail();
}

function touchEnded() {
  shapes.push({
    id: lastID,
    x: mouseX,
    y: mouseY,
    opacity: 250,
    size: 24,
    fill: fills[nextFill]
  });

  nextFill++;
  if (nextFill >= fills.length) { nextFill = 0; }
  lastID++;
}

function drawShapes() {
  shapes.forEach(function(shape, i) {
    noStroke();
    let thisColor = color(shape.fill);
    thisColor.setAlpha(shape.opacity);
    fill(thisColor);

    if (shape.id % 7 == 0) {
      triangle(shape.x, shape.y, shape.x+shape.size, shape.y-shape.size, shape.x+shape.size, shape.y);
    } else if (shape.id % 13 == 0) {
      rect(shape.x, shape.y, shape.size, shape.size, 20);
    } else {
      circle(shape.x, shape.y, shape.size);
    }

    shape.size++;

    if (shape.size > 100) {
      shape.opacity--;
    }

    if(shape.opacity < 0) {
      shapes.splice(i, 1);
    }

  });
}

function drawTrail() {
  strokeWeight(4);
  stroke("#c6e4e4");
  points.forEach(function(pt, i) {
    if (i == 0) {
      line(mouseX, mouseY, pt[0], pt[1]);
    } else {
      const lastPoint = points[i-1];
      line(pt[0], pt[1], lastPoint[0], lastPoint[1]);
    }
  });

  points.unshift([mouseX, mouseY]);
  points.splice(10);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}