• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

201
Views
Make random curvy lines or segments for paths on Canvas

Here is the code that I tried:

var myPath = new Path();
myPath.strokeColor = 'red';
myPath.strokeWidth = 5;
myPath.dashArray = [20, 5];
myPath.add(new Point(1800, 120));

function onFrame(event) {
    if(event.count%10 == 0) {
        var angle = Math.random(0, 1)*Math.PI;
        var all_points = myPath.segments.length;
        var last_point = myPath.segments[all_points - 1];
        myPath.add(new Point(last_point.point.x + 40*Math.cos(angle*(180 / Math.PI)), last_point.point.y + 40*Math.sin(angle*(180 / Math.PI))));
        myPath.smooth({type: 'geometric', factor: 2});
    }
}

I was thinking this would choose a random angle between 0 and Math.PI and then plot the points from the last point. However, it just draws a line at 45 degree going back and forth. I did a console.log() for the angle and it is always something random between 0 and Math.PI.

I want to achieve something similar to this: https://codepen.io/speaud/pen/ExxzrL

Here is what I have so far. My idea was to get a random angle and then gets sin and cosine values for that angle and add them to the last point in the path. This would move the path randomly in a certain direction.

I was hoping that it would create nice curvy non-intersecting paths but the path goes over the same place multiple times also making it smooth with the smooth() function changes its previous course a little.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Math.cos and Math.sin get angle in radians but in your code you convert them to degrees

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error