纸.js如何制作彩色笔触颜色?

Question

>我有一个问题。我无法制作彩色笔触颜色。我试着那样做

p.strokeColor = 'purple'; p.strokeColor = 'red';和p.strokeColor=['purple','red'].

但没有任何帮助。下面是一个示例。

这是一个演示。https://codepen.io/aqua908/pen/rNvyyJj

Answer 1

你做得很好，每次只选择不同的颜色，根据y说

if (y % 2 == 0) {
p.strokeColor = "purple";
} else {
p.strokeColor = "blue";
}

window.onload = function () {
var w = 800; //window.innerWidth
var h = 400; //window.innerHeight
var params = {
height: 0.3,
amplitude: 60,
speedX: 5,
speedY: 5,
speedZ: 5,
frequenceX: 2,
frequenceY: 2,
frequenceZ: 5
};
var gui = new dat.gui.GUI();
var f1 = gui.addFolder("Noise Waves");
f1.add(params, "height", 0.1, 1).step(0.1);
f1.add(params, "amplitude", 0, 150).step(1);
f1.add(params, "speedX", -10, 10).step(0.5);
f1.add(params, "speedY", -10, 10).step(0.5);
f1.add(params, "speedZ", -10, 10).step(0.5);
f1.add(params, "frequenceX", 1, 10);
f1.add(params, "frequenceY", 1, 10);
f1.add(params, "frequenceZ", 1, 10);
f1.open();
var simplex = new SimplexNoise();
var nx = 0;
var ny = 0;
var nz = 0;
var cols = 256;
var rows = 16;
var primitives = [];
paper.install(window);
paper.setup("myCanvas");
for (var y = 0; y < rows; y++) {
var p = new Path();
p.segments = [];
for (var x = 0; x < cols; x++) {
p.add(new Point(2, h / 2));
}
if (y % 2 == 0) {
p.strokeColor = "purple";
} else {
p.strokeColor = "blue";
}
p.strokeWidth = 2;
//p.smooth({ type: 'continuous' })
primitives.push(p);
}
view.onFrame = function (event) {
nx += params.speedX / 1000;
ny += params.speedY / 1000;
nz += params.speedZ / 100;
for (var y = 0; y < rows; y++) {
var p = primitives[y];
for (var x = 0; x < cols; x++) {
var Y =
(h * (1 - params.height)) / 2 +
((h * params.height) / rows) * y +
simplex.noise3D(
nx + (x * params.frequenceX) / 100,
ny + (y * params.frequenceY) / 100,
(nz * params.frequenceZ) / 100
) *
params.amplitude;
p.segments[x].point.x = (w / cols) * x;
p.segments[x].point.y += 0.1 * (Y - p.segments[x].point.y);
}
}
};
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.0-0/dat.gui.js"></script>

<canvas id="myCanvas" width="400" height="200"></canvas>

Answer 2

定义一个包含 for 循环外部颜色的数组。

let colors = ['purple', 'red', 'blue', 'yellow']

在 for 循环中使用迭代索引(在您的情况下为y)从数组中选取一种颜色。

p.strokeColor =  colors[y % colors.length];

当行数大于颜色数组的长度时，请使用模块%。