CODEWITHSUNDEEP
javascriptvectordrawingpaperjs
sqwk
sqwk

Reputation: 2699

Paper JS: Wavy Line, Brush Along a Path

I am trying to draw a wavy line using Paper.js. At the moment a wavy line is drawn, but the waves are highly irregular, especially in the corners.

Also I am relying on the simplify() and smooth()methods, which means that the path only becomes round after finishing the drawing.

For small waves this is not a problem, with large ones it becomes fairly obvious. (increase the minDistance and maxDistance, as well as waveSideStep)

paper.setup(document.getElementById('papercanvas'));
let wavePath;
let waveEndAngle;
this.wave_ = new paper.Tool();
this.wave_.minDistance = 5;
this.wave_.maxDistance = 5;

this.wave_.onMouseDown = function(event) {
  new paper.Layer().activate();
  wavePath = new paper.Path();
  wavePath.strokeColor = '#000';
  wavePath.strokeWidth = 10;
  wavePath.strokeCap = 'square';
  wavePath.strokeJoin = 'round';
  wavePath.add(event.point);
};

this.wave_.onMouseDrag = function(event) {
  let waveSideStep = Math.sin(wavePath.length / 10) * 10;
  wavePath.add(new paper.Point(
    event.point.x + Math.cos(event.delta.angleInRadians + (Math.PI / 2)) * waveSideStep,
    event.point.y + Math.sin(event.delta.angleInRadians + (Math.PI / 2)) * waveSideStep));
  waveEndAngle = event.delta.angle - 90;
};

this.wave_.onMouseUp = function(event) {
  wavePath.smooth();
  wavePath.simplify();
  paper.view.draw();
};
canvas {
  width: 100%;
  height: 100%;
}
canvas[resize] {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-core.js"></script>
<canvas id="papercanvas" width="600" height="600"></canvas>

Is there a better way to draw a wavy line?

Alternativly, is there an easy way to repeat (and bend) a value onto a path, similar to the way brushes are used in Illustrator?

Upvotes: 1

Views: 601

Answers (1)

arthur.sw
arthur.sw

Reputation: 11619

Interesting tool :-)

I don't have enough time for a full answer, but here is my advice:

  1. Create a trajectory path which is just a highly smoothed/simplified version of your mouse trajectory (give a high tolerance when smoothing)
  2. Compute a simple wave around this trajectory curve, this result can be smoothed/simplified at each step (in the onMouseDrag function)

That's it.

Upvotes: 1

Related Questions