回答編集履歴

4

追記

2021/12/18 13:08

投稿

thkana
thkana

スコア7703

test CHANGED
@@ -115,3 +115,83 @@
115
115
 
116
116
 
117
117
  (「もぞもぞ」じゃなくて「もぞもぞっ」だったか...最後の'っ'で随分印象が変わる気がする)
118
+
119
+
120
+
121
+ ---
122
+
123
+
124
+
125
+ もしかして、「線の中を虫が這い回る」ってこんなことなのかしら? 力尽きてきたのでJava版Processingで。p5.jsへの移植もそんなに難しくないと思うので。
126
+
127
+ ```Processing
128
+
129
+ float xx;
130
+
131
+ float y0=20;//上下線の間隔
132
+
133
+ float ny=0;
134
+
135
+ float ndy=0.01;
136
+
137
+ float nx1=0;
138
+
139
+ float ndx1=0.1;
140
+
141
+ float ndx2=0.01;
142
+
143
+ float cent;
144
+
145
+
146
+
147
+ void setup() {
148
+
149
+ size(400, 200);
150
+
151
+ strokeWeight(3);
152
+
153
+ cent=height/2; //中心位置
154
+
155
+ stroke(0);
156
+
157
+ fill(0);
158
+
159
+ }
160
+
161
+
162
+
163
+ void draw() {
164
+
165
+ background(0xcc);
166
+
167
+ xx=xx+8*noise(nx1);
168
+
169
+ if (xx>width) {
170
+
171
+ xx=0;
172
+
173
+ }
174
+
175
+ float ddPrev=0;
176
+
177
+ for (int x=0; x<width; x++) {
178
+
179
+ float dd=max(y0*40/dist(xx, cent, x, cent+y0)*noise(x*ndx2, ny)-3, 0);
180
+
181
+ line(x-1, cent-y0-ddPrev, x, cent-y0-dd);
182
+
183
+ line(x-1, cent+y0+ddPrev, x, cent+y0+dd);
184
+
185
+ ddPrev=dd;
186
+
187
+ circle(xx, height/2, 20);
188
+
189
+ }
190
+
191
+ nx1+=ndx1;
192
+
193
+ ny+=ndy;
194
+
195
+ }
196
+
197
+ ```

3

プログラムの動作見栄え修正

2021/12/18 13:08

投稿

thkana
thkana

スコア7703

test CHANGED
@@ -84,6 +84,8 @@
84
84
 
85
85
  function draw() {
86
86
 
87
+ noStroke();
88
+
87
89
  background(0xcc);
88
90
 
89
91
  x+=5*noise(n);

2

追記...?

2021/12/18 08:31

投稿

thkana
thkana

スコア7703

test CHANGED
@@ -109,3 +109,7 @@
109
109
  noiseって、私のイメージでは、凸凹のある地形図データベースを持っていて、その地図からある座標の高度を読み出す感じ(ノイズという言葉にはなんか当てはまらないけれど)。地形として連続性があって、細かいピッチで読み出せば「なだらか」に見えるし、荒いピッチで読み出せば比較的変化が急になる。
110
110
 
111
111
  で、「どういうものか」という話と「どう使えば効果的か」という話はまったく別だったりする...
112
+
113
+
114
+
115
+ (「もぞもぞ」じゃなくて「もぞもぞっ」だったか...最後の'っ'で随分印象が変わる気がする)

1

サンプル追記

2021/12/18 07:27

投稿

thkana
thkana

スコア7703

test CHANGED
@@ -21,3 +21,91 @@
21
21
 
22
22
 
23
23
  気持ち悪さが足りないでしょうか。
24
+
25
+
26
+
27
+ ---
28
+
29
+ 速度を一定でなくしたいだけなら例えばこんな。Javascriptはよく知らないからあまり自信ない。
30
+
31
+ 「もぞもぞ」感はないなぁ。
32
+
33
+ ```Processing
34
+
35
+ //p5.js
36
+
37
+ let x=0;
38
+
39
+ let n=0;
40
+
41
+ let dn=0.1;
42
+
43
+
44
+
45
+ function setup() {
46
+
47
+ createCanvas(500,200);
48
+
49
+ }
50
+
51
+
52
+
53
+
54
+
55
+ function draw() {
56
+
57
+ background(0xcc);
58
+
59
+ let ns=noise(n);
60
+
61
+ text(ns,50,50);
62
+
63
+ x+=10*ns;
64
+
65
+ n+=dn;
66
+
67
+ circle(x,100,30);
68
+
69
+ if(x>width){
70
+
71
+ x-=width;
72
+
73
+ }
74
+
75
+ }
76
+
77
+ ```
78
+
79
+ 「胴体」を作ってみると虫っぽくなって、ちょっと「もぞもぞ」してきただろうか?
80
+
81
+ ```Processing
82
+
83
+ //draw()のみ差し換え
84
+
85
+ function draw() {
86
+
87
+ background(0xcc);
88
+
89
+ x+=5*noise(n);
90
+
91
+ n+=dn;
92
+
93
+ for(let xx=0; xx<50; xx++){
94
+
95
+ circle(x-xx,50+noise((x-xx)*0.03)*50,30);
96
+
97
+ if(x>width){
98
+
99
+ x-=width;
100
+
101
+ }
102
+
103
+ }
104
+
105
+ }
106
+
107
+ ```
108
+
109
+ noiseって、私のイメージでは、凸凹のある地形図データベースを持っていて、その地図からある座標の高度を読み出す感じ(ノイズという言葉にはなんか当てはまらないけれど)。地形として連続性があって、細かいピッチで読み出せば「なだらか」に見えるし、荒いピッチで読み出せば比較的変化が急になる。
110
+
111
+ で、「どういうものか」という話と「どう使えば効果的か」という話はまったく別だったりする...