74 lines
1.5 KiB
Markdown
74 lines
1.5 KiB
Markdown
|
---
|
||
|
|
title: 柏林噪声1D
|
||
|
|
categories:
|
||
|
|
- 作品
|
||
|
|
- p5js
|
||
|
|
keywords: [noise]
|
||
|
|
tags: []
|
||
|
|
date: 2022-09-18 16:45:10
|
||
|
|
---
|
||
|
|
|
||
|
|
``` 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>
|