116 lines
2.7 KiB
Markdown
116 lines
2.7 KiB
Markdown
---
|
|
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>
|