Paper.js How can I make colorful strokeColor?

Question

I have a problem. I can't make a colorful strokeColor. I tried to do like that

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

But nothing helps. Here's an example.

Here's a demo. https://codepen.io/aqua908/pen/rNvyyJj

Answer 1

You are doing fine, only choose different color every time, say according to 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

Define an array containing the colors outside the for loop.

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

In your for loop use the iteration index (in your case y ) to pick a color from the array.

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

use module % when the number of lines is greater than the length of the colors array.