Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

181
Views
Algorithm for drawing a "Squiggly wiggly" pattern

I'm looking to have an algorithm that can randomly draw a "squiggly wiggly" pattern as per the picture.

enter image description here

It would be nice if it were progressively drawn as you would draw it with a pen and if it were based on speed, acceleration and forces like a double pendulum animation might be.

This would be for javascript in the p5 library.

Is there some way of producing this that a) looks hand drawn and b) fills a page, somewhat like a Hilbert curve?

Very interested to hear ideas of how this could be produced, regardless of whether there is some kind of formal algorithm, although a formal algorithm would be best.

Cheers

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

0

I can think of two solutions, but there could be more as I'm not very good at coding in general yet.

First of all, you can use perlin noise. With the code

var noiseSeeds = [];
//This changes the noise value over time
var noiseTime = 0;
var x = 0;
var y = 0;

function setup() {
    createCanvas(400, 400);
    //This will help for making two separate noise values later
    noiseSeeds = [random(100), random(100)];
}

function draw() {
    //Finding the x value
    noiseSeed(noiseSeeds[0]);
    x = noise(noiseTime)*400;
    //Finding the y value
    noiseSeed(noiseSeeds[1]);
    y = noise(noiseTime)*400;
    //Increasing the noise Time so the next value is slightly different
    noiseTime += 0.01;
    
    //Draw the point
    stroke(0);
    strokeWeight(10);
    point(x, y);
}

You can create a scribble on screen. You would have to use createGraphics()in some way to make this more efficient. This method isn't the best because the values are generally closer to the center.

The second solution is to make a point that has two states - far away from an edge and close to an edge. While it is far away, the point would keep going in relatively the same direction with small velocity changes. However, the closer the point gets to the edges, the (exponentially) bigger the velocity changes so that the point curves away from the edge. I don't know exactly how you could implement this, but it could work.

about 4 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 Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!