问题描述
我将向量的每个点绘制为 P5.js
中的一个顶点。
我想像彩虹一样分别改变循环中每个顶点的颜色。问题是它改变了所有顶点的颜色,我不知道为什么。
var x = 0.01
var y = 0
var z = 0
var sigma = 10
var prandtl = 28
var rayleigh = 8 / 3
var dt = 0.01
var positionPoint = []
var colorChange = 0;
function setup() {
createCanvas(800,800,WEBGL)
colorMode(HSB)
}
function draw() {
background("grey")
formula()
noFill()
scale(5)
strokeWeight(3)
beginShape()
rotateZ(frameCount * 0.01);
rotateY(frameCount * 0.01);
for (var i = 0; i < positionPoint.length; i++) {
stroke(colorChange,255,255)
vertex(positionPoint[i].x,positionPoint[i].y,positionPoint[i].z)
colorChange += 0.001
if (colorChange > 255) {
colorChange = 0
}
}
endShape()
}
const formula = () => {
var dx = (sigma * (y - x)) * dt
var dy = (x * (prandtl - z) - y) * dt
var dz = (x * y - rayleigh * z) * dt
x = x + dx
y = y + dy
z = z + dz
positionPoint.push(createVector(x,y,z))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
解决方法
从角点绘制的形状只能均匀着色。您需要绘制单独的线段。
vertex(positionPoint[i].x,positionPoint[i].y,positionPoint[i].z)
line(positionPoint[i].x,positionPoint[i].z,positionPoint[i+1].x,positionPoint[i+1].y,positionPoint[i+1].z)
颜色通道在 [0,255] 范围内。在循环之前设置 colorChange = 0
并在循环中将其递增 1:
colorChange = 0;
for (var i = 0; i < positionPoint.length-1; i++) {
// [...]
colorChange += 1
if (colorChange > 255) {
colorChange = 0
}
}
var x = 0.01
var y = 0
var z = 0
var sigma = 10
var prandtl = 28
var rayleigh = 8 / 3
var dt = 0.01
var positionPoint = []
var colorChange = 0;
function setup() {
createCanvas(800,800,WEBGL)
colorMode(HSB)
}
function draw() {
background("grey")
formula()
noFill()
scale(5)
strokeWeight(3)
//beginShape()
rotateZ(frameCount * 0.01);
rotateY(frameCount * 0.01);
colorChange = 0;
for (var i = 0; i < positionPoint.length-1; i++) {
stroke(colorChange,255,255)
//vertex(positionPoint[i].x,positionPoint[i].z)
line(positionPoint[i].x,positionPoint[i+1].z)
colorChange += 1
if (colorChange > 255) {
colorChange = 0
}
}
//endShape()
}
const formula = () => {
var dx = (sigma * (y - x)) * dt
var dy = (x * (prandtl - z) - y) * dt
var dz = (x * y - rayleigh * z) * dt
x = x + dx
y = y + dy
z = z + dz
positionPoint.push(createVector(x,y,z))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>