p5.jsでふわふわした円をつくりたい。

クリエイティブコーディングについて

https://wota.co.jp/

こちらのTOPにあるような液状のアニメーションを実装したいと考えています。
p5.jsなどで実装するかと思うのですが、サークルをnoize関数で返す、ふわふわとした動きが再現できません。。

どなたか、こちらの実装方法を教えて頂けませんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

調べているうちにパーリングノイズにヒットしました。
勉強がてらに書いてみました。
SVGで円を何個か適当に動かしています。

HTML&JS
1<!DOCTYPE html>
2<meta charset="utf-8">
3<title>SVG背景を動的にする</title>
4<style>
5  body {
6    margin: 0;
7  }
8  #BG {
9    position: absolute;
10    height: 100%;
11    width: 100%;
12    overflow: hidden;
13    top: 0px;    
14  }
15</style>
16<body>
17<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" id="BG">
18  <defs>
19    <radialGradient id="a0">
20      <stop offset="90%" stop-color="#fff"/>
21      <stop offset="100%" stop-color="rgba(255,255,255,0)" />
22    </radialGradient>
23    <radialGradient id="a1">
24      <stop offset="10%" stop-color="#08f"/>
25      <stop offset="80%" stop-color="rgba(0,255,255,0)" />
26    </radialGradient>
27    <radialGradient id="a2">
28      <stop offset="40%" stop-color="#04e"/>
29      <stop offset="90%" stop-color="rgba(0,200,255,0)" />
30    </radialGradient>
31  </defs>
32</svg>
33
34
35<script>
36
37function createCircle (fill, r, opacity) {
38  let element = document.createElementNS ('http://www.w3.org/2000/svg', 'circle');
39  Object.entries (
40    {fill, r, 'fill-opacity': opacity}
41  ).forEach (([attr, val])=>
42    element.setAttribute (attr, val));
43  return element;
44}
45
46class P2 {
47  constructor (x = 0, y = 0) { this.x = x; this.y = y; }
48}
49
50
51class PerlinNoise {
52  constructor (random = Math.random) {
53    this.random   = random;
54    this.gradient = new Map;
55  }
56  
57  randomGradient (x) {
58    if (! this.gradient.has (x))
59      this.gradient.set (x, this.random () * 2 -1);
60    return this.gradient.get (x);
61  }
62
63  noise (x) {
64    let
65      x0 = x |0, x1 = x0 + 1,
66      r0 = x - x0, r1 = r0 - 1,
67      u = r0 * this.randomGradient (x0),
68      v = r1 * this.randomGradient (x1),
69      sx = r0 * r0 * (3 - 2 * r0);
70
71    return 2 * (u + sx * (v - u));
72  }
73}
74
75class Firefly {
76  constructor (element, place = new P2, actionRange = new P2, speed = 0.001) {
77    Object.assign (this, {
78      element, place, actionRange, speed,
79      count: 0, rnd: new P2 (new PerlinNoise, new PerlinNoise)
80    });
81  }
82
83  move () {
84    let
85      px = this.place.x + this.rnd.x.noise (this.count) * this.actionRange.x -this.actionRange.x/2,
86      py = this.place.y + this.rnd.y.noise (this.count*1.1) * this.actionRange.y -this.actionRange.y/2;
87    this.element.setAttribute ('cx', px|0);
88    this.element.setAttribute ('cy', py|0);
89    this.count += this.speed;
90  }
91}
92
93const
94  c = [
95    createCircle ('url(#a2)', 1500,1),//底
96    createCircle ('url(#a2)', 1500,1),//底
97    createCircle ('url(#a1)', 600,.4),//中間
98    createCircle ('url(#a1)', 600,.4),//中間
99    createCircle ('url(#a0)', 2000,.8),//空
100  ],
101  hotaru = [
102    new Firefly (c[0], new P2 ( 700, 1500), new P2 (1000,100), 0.003),//底
103    new Firefly (c[1], new P2 (1200, 1300), new P2 (0500,200), 0.003),//底
104    new Firefly (c[2], new P2 ( 700,  700), new P2 ( 800,200), 0.007),
105    new Firefly (c[3], new P2 (1200,  700), new P2 ( 800,200), 0.007),
106    new Firefly (c[4], new P2 (1000,-1500), new P2 (1000, 100), 0.01),//空
107  ];
108  c.forEach (e=> BG.appendChild (e));
109
110
111!function loop() {
112  hotaru.forEach (h=>h.move ());
113  requestAnimationFrame (loop);
114}();
115
116
117
118</script>
119
120
121
122