gitpush
This commit is contained in:
parent
5fa546c036
commit
b1eeb9cc2f
2841
package-lock.json
generated
2841
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,115 +0,0 @@
|
||||
---
|
||||
title: hello p5.js
|
||||
categories:
|
||||
- 作品
|
||||
- p5js
|
||||
keywords: []
|
||||
tags: []
|
||||
date: 2022-09-18 16:45:10
|
||||
---
|
||||
|
||||
``` js
|
||||
let tx = 0, ty = 0, tr = 0, tg = 0, tb = 0;
|
||||
let sx, sy, sr, sg, sb;
|
||||
let x1, y1, x2, y2, r, g, b;
|
||||
let p5Canvas
|
||||
|
||||
function setup() {
|
||||
p5Canvas = createCanvas();
|
||||
p5Canvas.parent(p5Container)
|
||||
windowResized()
|
||||
|
||||
background(0);
|
||||
|
||||
sx = random(100000000);
|
||||
sy = random(100000000);
|
||||
sr = random(100000000);
|
||||
sg = random(100000000);
|
||||
sb = random(100000000);
|
||||
|
||||
noiseSeed(sx);
|
||||
x1 = map(noise(tx), 0, 1, 0, width);
|
||||
noiseSeed(sy);
|
||||
y1 = map(noise(ty), 0, 1, 0, height);
|
||||
|
||||
}
|
||||
|
||||
function draw() {
|
||||
let dt = deltaTime / 1000;
|
||||
tx += dt, ty += dt, tr += dt, tg += dt, tb += dt;
|
||||
noiseSeed(sx);
|
||||
x2 = map(noise(tx), 0, 1, 0, width);
|
||||
noiseSeed(sy);
|
||||
y2 = map(noise(ty), 0, 1, 0, height);
|
||||
noiseSeed(sr);
|
||||
r = map(noise(tr), 0, 1, 0, 255);
|
||||
noiseSeed(sg);
|
||||
g = map(noise(tg), 0, 1, 0, 255);
|
||||
noiseSeed(sb);
|
||||
b = map(noise(tb), 0, 1, 0, 255);
|
||||
stroke(color(r, g, b));
|
||||
strokeWeight(8);
|
||||
line(x1, y1, x1 = x2, y1 = y2);
|
||||
background(0, 16);
|
||||
}
|
||||
|
||||
function windowResized() {
|
||||
const width = p5Container.offsetWidth;
|
||||
const height = Math.round(9 * width / 16);
|
||||
resizeCanvas(width, height);
|
||||
}
|
||||
```
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<div id="p5Container"></div>
|
||||
|
||||
<script src="//zhao/js/p5.min.js", defer></script>
|
||||
<script src="//zhao/js/p5.sound.min.js", defer></script>
|
||||
<script>
|
||||
let tx = 0, ty = 0, tr = 0, tg = 0, tb = 0;
|
||||
let sx, sy, sr, sg, sb;
|
||||
let x1, y1, x2, y2, r, g, b;
|
||||
let p5Canvas
|
||||
|
||||
function setup() {
|
||||
p5Canvas = createCanvas();
|
||||
p5Canvas.parent(p5Container)
|
||||
windowResized()
|
||||
background(0);
|
||||
sx = random(100000000);
|
||||
sy = random(100000000);
|
||||
sr = random(100000000);
|
||||
sg = random(100000000);
|
||||
sb = random(100000000);
|
||||
noiseSeed(sx);
|
||||
x1 = map(noise(tx), 0, 1, 0, width);
|
||||
noiseSeed(sy);
|
||||
y1 = map(noise(ty), 0, 1, 0, height);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
let dt = deltaTime / 1000;
|
||||
tx += dt, ty += dt, tr += dt, tg += dt, tb += dt;
|
||||
noiseSeed(sx);
|
||||
x2 = map(noise(tx), 0, 1, 0, width);
|
||||
noiseSeed(sy);
|
||||
y2 = map(noise(ty), 0, 1, 0, height);
|
||||
noiseSeed(sr);
|
||||
r = map(noise(tr), 0, 1, 0, 255);
|
||||
noiseSeed(sg);
|
||||
g = map(noise(tg), 0, 1, 0, 255);
|
||||
noiseSeed(sb);
|
||||
b = map(noise(tb), 0, 1, 0, 255);
|
||||
stroke(color(r, g, b));
|
||||
strokeWeight(8);
|
||||
line(x1, y1, x1 = x2, y1 = y2);
|
||||
background(0, 16);
|
||||
}
|
||||
|
||||
function windowResized() {
|
||||
const width = p5Container.offsetWidth;
|
||||
const height = Math.round(9 * width / 16);
|
||||
resizeCanvas(width, height);
|
||||
}
|
||||
</script>
|
||||
80
source/_posts/作品/p5js/柏林噪声1D.md
Normal file
80
source/_posts/作品/p5js/柏林噪声1D.md
Normal file
@ -0,0 +1,80 @@
|
||||
---
|
||||
title: 柏林噪声1D
|
||||
categories:
|
||||
- 作品
|
||||
- p5js
|
||||
keywords: [noise]
|
||||
tags: []
|
||||
date: 2022-09-18 16:45:10
|
||||
---
|
||||
|
||||
<style>
|
||||
pre,
|
||||
code {
|
||||
font-family: 'Fira Code', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
``` js
|
||||
let offset = 0
|
||||
let ratio = 0.01
|
||||
let speed = 0.01
|
||||
function setup() {
|
||||
createCanvas().parent(p5Container)
|
||||
windowResized()
|
||||
noiseDetail(2, 0.5)
|
||||
strokeWeight(2)
|
||||
stroke('blue')
|
||||
noFill()
|
||||
}
|
||||
function draw() {
|
||||
background(200)
|
||||
beginShape()
|
||||
for (let x = 0; x < width; x++) {
|
||||
const y = noise(offset + x * ratio) * height
|
||||
vertex(x, y)
|
||||
}
|
||||
endShape()
|
||||
offset += speed
|
||||
}
|
||||
function windowResized() {
|
||||
const width = p5Container.offsetWidth;
|
||||
const height = Math.round(9 * width / 16);
|
||||
resizeCanvas(width, height);
|
||||
}
|
||||
```
|
||||
|
||||
<!-- more -->
|
||||
|
||||
<div id="p5Container"></div>
|
||||
|
||||
<script src="//zhao/js/p5.min.js"></script>
|
||||
<script src="//zhao/js/p5.sound.min.js"></script>
|
||||
<script>
|
||||
let offset = 0
|
||||
let ratio = 0.01
|
||||
let speed = 0.01
|
||||
function setup() {
|
||||
createCanvas().parent(p5Container)
|
||||
windowResized()
|
||||
noiseDetail(2, 0.5)
|
||||
strokeWeight(2)
|
||||
stroke('blue')
|
||||
noFill()
|
||||
}
|
||||
function draw() {
|
||||
background(200)
|
||||
beginShape()
|
||||
for (let x = 0; x < width; x++) {
|
||||
const y = noise(offset + x * ratio) * height
|
||||
vertex(x, y)
|
||||
}
|
||||
endShape()
|
||||
offset += speed
|
||||
}
|
||||
function windowResized() {
|
||||
const width = p5Container.offsetWidth;
|
||||
const height = Math.round(9 * width / 16);
|
||||
resizeCanvas(width, height);
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user