p5/src/sketches/animationDev2.mjs at main · Lokua/p5 · 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
119
120
121
122
// @ts-check
import chroma from 'chroma-js'
import ControlPanel, { Range } from '../lib/ControlPanel/index.mjs'
import AnimationHelper from '../lib/AnimationHelper.mjs'

/**
 * @param {import("p5")} p
 */
export default function (p) {
  const metadata = {
    name: 'animationDev2',
    frameRate: 60,
  }

  const [w, h] = [500, 500]

  const ah = new AnimationHelper({ p, frameRate: metadata.frameRate, bpm: 134 })
  const colorScale = chroma.scale(['red', 'teal'])

  const controlPanel = new ControlPanel({
    p,
    id: metadata.name,
    attemptReload: true,
    controls: {
      a: new Range({
        name: 'a',
        value: 50,
        min: 0,
        max: 1000,
      }),
    },
  })

  function setup() {
    controlPanel.init()
    const canvas = p.createCanvas(w, h)

    p.colorMode(p.RGB, 255, 255, 255, 1)

    return {
      canvas,
    }
  }

  function draw() {
    p.background(240)
    p.noStroke()

    const amplitude = 20
    const diameter = w / 8

    drawCircle({
      x: w / 4,
      amplitude,
      diameter,
      color: colorScale(0).rgba(),
      animation: ah.animate({
        keyframes: [0, 1],
        duration: 1,
      }),
    })
    drawCircle({
      x: w / 4 + w / 8,
      amplitude,
      diameter: diameter / 2,
      color: colorScale(0.25).rgba(),
      animation: ah.animate({
        keyframes: [0, 1],
        duration: 6,
      }),
    })

    drawCircle({
      x: w / 2,
      amplitude,
      diameter,
      color: colorScale(0.5).rgba(),
      animation: ah.animate({
        keyframes: [0, 2, 1],
        duration: 3,
        every: 3,
        delay: 0.75,
      }),
    })

    drawCircle({
      x: w / 2 + w / 8,
      amplitude,
      diameter: diameter / 2,
      color: colorScale(0.75).rgba(),
      animation: ah.animate({
        keyframes: [0, 1],
        duration: 12,
      }),
    })
    drawCircle({
      x: w / 2 + w / 4,
      amplitude,
      diameter,
      color: colorScale(1).rgba(),
      animation: ah.animate({
        keyframes: [0, 1],
        duration: 1,
        delay: 0.5,
      }),
    })
  }

  function drawCircle({ x, amplitude, diameter, color, animation }) {
    p.fill(...color)
    p.circle(x, h / 2 + amplitude * p.sin(animation * p.TWO_PI), diameter)
  }

  return {
    setup,
    draw,
    destroy() {
      controlPanel.destroy()
    },
    metadata,
  }
}