Creating a rose drawing with sine function and other trig functions

Processing Coding Questions
1

Hey its me again…
I’m trying to create a rose drawing using a for loop(compulsory) AKA a polar curve but i cant point out whats wrong with my code.(this is not an assignment this is personal study)

int STEPS=100;
final float K=200;
float radius=100;
float xc;
float yc;
void setup() {
  size(500, 500);
  xc=width/2;
  yc=width/2;
}
void draw() {
  //background(0);
  stroke(255);
  strokeWeight(5);
  for (int i=0; i<STEPS; i++) {
    float percent =i/(STEPS-1);
    float t=percent*(2*PI);
    float x=cos(K*t)*cos(t)*radius+xc;
    float y=cos(K*t)*sin(t)*radius+xc;
    line(xc, yc, x, y);
    xc=x;
    yc=y;
  }
}
Pointers will be greatly appreciated!
2

cos and sin expects radians

also, Java has a bad habit to make some floats to int

see this:



int STEPS=100;
final float K=200;
float radius=100.0;
float xc;
float yc;

void setup() {
  size(1500, 1500);
  xc=width/2.0;
  yc=width/2.0;
}
void draw() {
  //background(0);
  stroke(255);
  strokeWeight(5);
  for (int i=0; i<STEPS; i++) {
    float percent = (float) float(i)/(STEPS-1.0);
    float t= (float) (percent)*(2.0*PI);
    float x=cos(radians (K*t))*cos(radians (t))*radius+xc;
    float y=cos(radians (K*t))*sin(radians (t))*radius+xc;

    line(xc, yc, x, y);

    xc=x;
    yc=y;
  }
}
3

I’ve tried your suggestion but it jut brings up a “scribble” like drawing on the canvas. :frowning:

4

My post was just meant as a hint

  • radians is important, float is important

otherwise I don’t know the formula

but you will solve it!

5

ohhh thank you I’m trying things out.

1 Like
6

there are many formulas on wikipedia. If you find one that is interesting copy it down. It usually has a few parameters that have to be calculated. I suggest you go on youtube > the coding train > and search for a few drawing videos (a program draws a certain shape). Once you finish watching you should have at least a rough idea of how to do it!

I suck at it but yeah. Btw what was the formula for the rose?

7

the formula was already given and is written in the for loop, and thank you for the suggestion I’m a big fan of the coding train but none of the videos i saw really helped They were mostly basic shapes or whole drawing using ps5.js

8

well i made a program that draws rose curves

int k = 200, br = 200, xc = 300, yc = 300, n = 200;

void setup() {
  size(600,600);
}

void draw() {
  background(0);
  stroke(255);
  
  for(int i = 0; i < n; i++) {
    float theta = TWO_PI/n*i;
    float r = br * cos(4*theta);
    line(xc,yc, r * cos(theta) + xc, r * sin(theta) + yc);
  }
}

image
image599×626 58.2 KB

does this help?

9 
int k = 200, br = 200, xc = 300, yc = 300, n = 500;
void setup() {
  size(600,600);
}
void draw() {
  background(0);
  stroke(255);
  
  float px = br * cos( cos(0))+xc, py = br * sin( cos(0)) + yc;
  for(int i = 0; i < n; i++) {
    float theta = TWO_PI/n*i;
    float r = br * cos(4*theta);
    float x = r * cos(theta) + xc, y = r * sin(theta) + yc;
    if(i != 0) {
      line(px,py,x,y);
    }
    px = x;
    py = y;
  }
}

image
image600×626 16.8 KB

10

thank you for this solution. i’d like some clarification on some aspects if you dont mind.
for instance, can i ask what the variable “br” is and why you multiplied 4 by theta in this line?

11

br = base r (radius). its so the code is shorter and more dynamic. * 4 is because the pattern wants it. (*4 makes 8 paddles. * 7 makes 14, 16 makes 32 (2n)

image

edit: hope this helps

2 Likes
12

oh you used another formula, i understand now. thank you for your help! greatly appreciated!

13

no problem. As long as it helps : ). Good luck

1 Like