# random

/**
 * 最小値と最大値を指定したランダムな値を返す
 * @param min {number}
 * @param max {number}
 * @returns {number}
 */
const random = (min, max) => Math.random() * (max - min) + min;

1
2
3
4
5
6
7
8

# colors

with css gradient

import { gsap } from 'gsap/all'
import math from './math';
import chroma from 'chroma-js';

class RandomColor {

  /**
   * ランダムなグラデーションカラーを生成する
   * シームレスなグラデーションとタイル状に描画するモードを選択する
   *
   * @param target {HTMLElement}
   * @param length {number}
   * @param tile {boolean}
   * @param deg {number}
   * @param rotation {boolean}
   * @returns {DragPinchSimple}
   */
  constructor(target, length = 30, tile = false, deg = 90, rotation = false) {

    /**
     * ターゲットとなる要素
     * @type {HTMLElement}
     */
    this.target = target;

    /**
     * グラデーションのカラーストップ数
     * @type {number}
     */
    this.length = length;

    /**
     * 描画モードの真偽値
     * @type {boolean}
     */
    this.tile = tile;

    /**
     * グラデーションの角度
     * @type {number}
     */
    this.deg = deg;

    /**
     * 回転するかどうか
     * @type {boolean}
     */
    this.rotation = rotation;

    /**
     * animation callback id
     * @type {number}
     */
    this.animationId = 0;

    this.init();

    return this;

  }

  /**
   * initialize
   */
  init() {
    this.play();
  }

  play() {

    gsap.set(this.target, {
      background: `linear-gradient(${this.deg}deg, ${this.getColor()})`,
    });

    this.animationId = requestAnimationFrame(() => this.play());
    this.rotation && (this.deg += 2)

  }

  getColor() {

    let gradient = '';

    for (let i = 0; i < this.length; i++) {

      const color = chroma(math.random(100, 220), math.random(100, 255), math.random(180, 240)).css();
      gradient += color;

      if (this.tile && i !== this.length - 1) {
        gradient += ` ${100 / this.length * i}%, ${color} ${100 / this.length * (i + 1)}%,`;
      } else if (i === this.length - 1) {
        gradient += ` ${100 / this.length * i}%, ${color} ${100 / this.length * (i + 1)}%`;
      } else if (!this.tile && i !== this.length - 1) {
        gradient += ',';
      }

    }

    return gradient;

  }

  // destroy this instance
  destroy() {

    cancelAnimationFrame(this.animationId);

    this.target = null;
    this.length = 0;
    this.tile = false;
    this.animationId = 0;

  }

}

export default RandomColor;

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

# rotation

# transform

import { gsap } from 'gsap/all'
import math from './math';

class RandomColor {

  /**
   * ランダムな値でオブジェクトを変形
   * @param target {HTMLElement}
   * @returns {DragPinchSimple}
   */
  constructor(target) {

    /**
     * ターゲットとなる要素
     * @type {HTMLElement}
     */
    this.target = target;

    /**
     * animation callback id
     * @type {number}
     */
    this.animationId = 0;

    this.init();

    return this;

  }

  /**
   * initialize
   */
  init() {
    this.play();
  }

  play() {
    
    gsap.set(this.target, {
      scaleX: math.random(.5, 2),
      scaleY: math.random(.5, 2),
      skewX: math.random(0, 360),
      skewY: math.random(0, 360),
      x: math.random(-150, 150),
      y: math.random(-150, 150),
    });

    this.animationId = requestAnimationFrame(() => this.play());

  }

  // destroy this instance
  destroy() {

    cancelAnimationFrame(this.animationId);

    this.target = null;
    this.animationId = 0;

  }

}

export default RandomColor;

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

← drag GSAP3 →