Paper.js How can I make colorful strokeColor?-CodePudding

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'].

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

CodePudding user response：

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>

CodePudding user response：

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.