104 lines
2.4 KiB
Markdown
104 lines
2.4 KiB
Markdown
|
---
|
||
|
|
title: 柏林噪声2D
|
||
|
|
categories:
|
||
|
|
- 作品
|
||
|
|
- p5js
|
||
|
|
keywords: [noise]
|
||
|
|
tags: []
|
||
|
|
date: 2022-09-18 22:53:03
|
||
|
|
---
|
||
|
|
|
||
|
|
``` js
|
||
|
|
let offestX = 0
|
||
|
|
let speedX = 0.05
|
||
|
|
let offsetY = 0
|
||
|
|
let speedY = 0
|
||
|
|
let noiseScale = 0.05
|
||
|
|
let fps = 0
|
||
|
|
function setup() {
|
||
|
|
createCanvas().parent(p5Container)
|
||
|
|
windowResized()
|
||
|
|
noiseDetail(4, 0.5)
|
||
|
|
pixelDensity(1)
|
||
|
|
frameRate(30)
|
||
|
|
noStroke()
|
||
|
|
}
|
||
|
|
function draw() {
|
||
|
|
loadPixels()
|
||
|
|
for (let y = 0; y < height; y++) {
|
||
|
|
const noiseY = offsetY + y * noiseScale
|
||
|
|
for (let x = 0; x < width; x++) {
|
||
|
|
const noiseX = offestX + x * noiseScale
|
||
|
|
const noise2D = noise(noiseX, noiseY)
|
||
|
|
const noiseV = map(noise2D, 0, 1, 0, 255)
|
||
|
|
const index = (x + width * y) * 4
|
||
|
|
pixels[index + 0] = noiseV
|
||
|
|
pixels[index + 1] = noiseV
|
||
|
|
pixels[index + 2] = noiseV
|
||
|
|
pixels[index + 3] = 255
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updatePixels()
|
||
|
|
offestX += speedX
|
||
|
|
offsetY += speedY
|
||
|
|
}
|
||
|
|
function keyPressed() {
|
||
|
|
isLooping() ? noLoop() : loop()
|
||
|
|
}
|
||
|
|
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 offestX = 0
|
||
|
|
let speedX = 0.05
|
||
|
|
let offsetY = 0
|
||
|
|
let speedY = 0
|
||
|
|
let noiseScale = 0.05
|
||
|
|
let fps = 0
|
||
|
|
function setup() {
|
||
|
|
createCanvas().parent(p5Container)
|
||
|
|
windowResized()
|
||
|
|
noiseDetail(4, 0.5)
|
||
|
|
pixelDensity(1)
|
||
|
|
frameRate(30)
|
||
|
|
noStroke()
|
||
|
|
}
|
||
|
|
function draw() {
|
||
|
|
loadPixels()
|
||
|
|
for (let y = 0; y < height; y++) {
|
||
|
|
const noiseY = offsetY + y * noiseScale
|
||
|
|
for (let x = 0; x < width; x++) {
|
||
|
|
const noiseX = offestX + x * noiseScale
|
||
|
|
const noise2D = noise(noiseX, noiseY)
|
||
|
|
const noiseV = map(noise2D, 0, 1, 0, 255)
|
||
|
|
const index = (x + width * y) * 4
|
||
|
|
pixels[index + 0] = noiseV
|
||
|
|
pixels[index + 1] = noiseV
|
||
|
|
pixels[index + 2] = noiseV
|
||
|
|
pixels[index + 3] = 255
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updatePixels()
|
||
|
|
offestX += speedX
|
||
|
|
offsetY += speedY
|
||
|
|
}
|
||
|
|
function keyPressed() {
|
||
|
|
isLooping() ? noLoop() : loop()
|
||
|
|
}
|
||
|
|
function windowResized() {
|
||
|
|
const width = p5Container.offsetWidth;
|
||
|
|
const height = Math.round(9 * width / 16);
|
||
|
|
resizeCanvas(width, height);
|
||
|
|
}
|
||
|
|
</script>
|