Drawing a flower-like shape

p5.js Coding Questions
1

Hi, I want to draw shapes like this.

image

The function called “seed1” is supposed to take care of one of the curvy triangles, but when I call this function within the draw(), the second and third triangles look smashed (maybe it has something to do with the coordinate or angles passed for seed1).

Thanks much in advance for your help! :slight_smile:

function setup() {
  createCanvas(400, 300);
  background(150);  
  noLoop();

  angleOffsetA = radians(3);
  angleOffsetB = radians(10);
}

function draw() {
  noStroke();
  fill(255, 150);
  translate(width/2, height/2);

  for (var i = 0; i < 3; i++) {
    push();
    rotate(i * TWO_PI/3);
    translate(-20, -20);
    seed1(10, 5, radians(90), 0, 0);

    pop();
  } 
}
const k = 1;
let n = 0;

function seed1(dotNum, dotSize, angle, x, y) {
  //pop();
  if (dotNum >= 1) {
    //push();
    dotNum = Math.round(dotNum);
  
    for (i = 0; i < dotNum; i++) {
        ellipse(x + (dotSize*i), y, dotSize, dotSize);
      }
      var newX = x + cos(angle) * dotSize;
      var newY = y - sin(angle) * dotSize;
      n += 0.03;
      seed1(dotNum - (1 - exp(-k * n)), dotSize, angle - angleOffsetA, newX, newY);
  }
}
2

Hi @k5221,

I copy pasted your code in the p5 web editor and two things :

  • there’s a missing bracket, make sure to post a code that works :wink:

  • I have this error :

    ReferenceError: n is not defined

at seed1 (/sketch.js:33:7)
at draw (/sketch.js:17:10)

    Because n is not defined

3

Hi @josephh,

Thank you for your reply. I’m sorry for the code. I edited my post and now the code is at least working. I would appreciate if you could help me look into it!

1 Like
4

Thanks for the fix, I think that your error is that you need to reset n before each call to the seed1 function. That’s why you had strange results :

const k = 1;
let n = 0;

function setup() {
  createCanvas(400, 300);
  background(150);
  noLoop();

  angleOffsetA = radians(3);
  angleOffsetB = radians(10);
}

function draw() {
  noStroke();
  fill(255, 150);
  translate(width / 2, height / 2);

  for (var i = 0; i < 3; i++) {
    push();
    rotate((i * TWO_PI) / 3);
    translate(-20, -20);
    
    n = 0;
    
    seed1(10, 5, radians(90), 0, 0);

    pop();
  }
}

function seed1(dotNum, dotSize, angle, x, y) {
  if (dotNum >= 1) {
    dotNum = Math.round(dotNum);

    for (i = 0; i < dotNum; i++) {
      ellipse(x + dotSize * i, y, dotSize, dotSize);
    }
    
    var newX = x + cos(angle) * dotSize;
    var newY = y - sin(angle) * dotSize;
    
    n += 0.03;
    
    seed1(
      dotNum - (1 - exp(-k * n)),
      dotSize,
      angle - angleOffsetA,
      newX,
      newY
    );
  }
}

image

(when you ask a question, make sure to give the details about how you did this and the result you want to have : it had recursion and you want a curvy flower shape like this :wink: )

1 Like