# Creating a rose drawing with sine function and other trig functions

**URL:** <https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315>\
**Category:** Coding Questions\
**Created:** [December 16, 2020, 9:28pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315 "2020-12-16T21:28:30Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 16, 2020, 9:28pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/1 "2020-12-16T21:28:30Z")

</div>

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)

```auto
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!

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 16, 2020, 9:57pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/2 "2020-12-16T21:57:52Z")

</div>

cos and sin expects radians

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

see this:

```auto

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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 16, 2020, 10:14pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/3 "2020-12-16T22:14:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 16, 2020, 10:34pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/4 "2020-12-16T22:34:26Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 16, 2020, 10:39pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/5 "2020-12-16T22:39:09Z")

</div>

ohhh thank you I’m trying things out.

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 17, 2020, 8:03am UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/6 "2020-12-17T08:03:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 17, 2020, 11:37am UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/7 "2020-12-17T11:37:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 17, 2020, 12:06pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/8 "2020-12-17T12:06:00Z")

</div>

well i made a program that draws rose curves

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9a5373b455d672bd4936084802cf0f06771ddb8d.png)

does this help?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 17, 2020, 12:16pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/9 "2020-12-17T12:16:40Z")

</div>

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e85aab1a95f043ff8c7f7a82af0cdc36662fd67d.png)

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 17, 2020, 12:41pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/10 "2020-12-17T12:41:24Z")

</div>

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?

> [@CodeMasterX](#):
>
> ` float r = br * cos(4*theta);`

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 17, 2020, 12:49pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/11 "2020-12-17T12:49:39Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b80fdacd4a5012b1762fdcde5e116a734241f0f3.png)

edit: hope this helps

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 17, 2020, 12:54pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/12 "2020-12-17T12:54:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 17, 2020, 12:55pm UTC](https://discourse.processing.org/t/creating-a-rose-drawing-with-sine-function-and-other-trig-functions/26315/13 "2020-12-17T12:55:00Z")

</div>

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