MoJS-Demo/main.js at master · EnjoyDigital/MoJS-Demo · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*
 * EXPERIMENT 1

var min = -50;
var max = 50;

const circle1 = new mojs.Shape({
  shape:          'circle',
  fill:           'none',
  stroke:         'cyan',
  radius:         30,
  strokeWidth:    { 20 : 0 },
  scale:          { 0.5 : 1 },
  left:           0,
  top:            0,

  duration:       500,
  delay:          0,
  isShowEnd:      false
});

const circle2 = new mojs.Shape({
  shape:          'circle',
  fill:           'none',
  stroke:         'yellow',
  radius:         15,
  strokeWidth:    { 10 : 0 },
  scale:          { 0.5 : 1 },
  left:           0,
  top:            0,

  duration:       400,
  delay:          0,
  isShowEnd:      false
});

const circle3 = new mojs.Shape({
  shape:          'circle',
  fill:           'none',
  stroke:         'green',
  radius:         15,
  strokeWidth:    { 10 : 0 },
  scale:          { 0.5 : 1 },
  left:           0,
  top:            0,

  duration:       500,
  delay:          0,
  isShowEnd:      false
});

const circle4 = new mojs.Shape({
  shape:          'circle',
  fill:           'none',
  stroke:         'red',
  radius:         10,
  strokeWidth:    { 7 : 0 },
  scale:          { 0.5 : 1 },
  left:           0,
  top:            0,

  duration:       600,
  delay:          0,
  isShowEnd:      false
});

document.addEventListener('click', function(e) {

    circle1
      .tune({ x: e.pageX, y: e.pageY })
      .replay();
    circle2
      .tune({ x: e.pageX + Math.floor(Math.random() * (max - min + 1)) + min, y: e.pageY + Math.floor(Math.random() * (max - min + 1)) + min })
      .replay();
    circle3
      .tune({ x: e.pageX + Math.floor(Math.random() * (max - min + 1)) + min, y: e.pageY + Math.floor(Math.random() * (max - min + 1)) + min })
      .replay();
    circle4
      .tune({ x: e.pageX + Math.floor(Math.random() * (max - min + 1)) + min, y: e.pageY + Math.floor(Math.random() * (max - min + 1)) + min })
      .replay();
});


 * END EXPERIMENT 1
 */


/*
 * EXPERIMENT 2


const burst = new mojs.Burst({
  left: 0,
  top: 0,
  radius:   { 0: 100 },
  count:    10,
  angle: { 30: 0 },
  duration: 3000,
  children: {
    shape:      'circle',
    fill:       { 'cyan' : 'orange' },
    radius:     10,
    angle:      { 360: 0 },
    delay: 'stagger( rand(0,100) )'
  }
});

document.addEventListener('click', function(e) {

    burst
      .tune({ x: e.pageX, y: e.pageY })
      .generate() // regenerates random values
      .play();
});


 * END EXPERIMENT 2
 */