Sprouting Flower Problem

Get Coding Help!
1

Hi,

I am doing the sprouting flower exercise. As pointed out in the instructions, i am working on one part at a time. Like, i have started with drawing the flower head, pistil and now i am struck at the stem part. The error i am getting is that The first stem isn’t correct. I have gone over the instructions time and again but don’t know why i am not able to get over the error. There is some thing i am missing that i am not able to figure out.

let canvasSize = 100
let topStem = 90 //top left y co ordinate 
let stemHeight = canvasSize - topStem
let stemWidth = stemHeight / 10
// since stem is centered around x axis as given, center of stem = (50,90)
let leftStem = 50 - (stemWidth/2) //top left x co ordinate
repeat(61){
  rectangle(0, 0, 100, 90, "skyblue") //sky  
  rectangle(0, 90, 100, 10, "green") //ground
  rectangle(leftStem, topStem, stemWidth, stemHeight, "green")
  topStem = topStem - 1 //since the flower center has to move up by 1
  stemHeight = stemHeight + 1
}

Few key points i want to verify if i have taken correctly from the instructions

The stem should start at the center of the flower and reach the ground.

Does this mean that the (left,top) co-ordinates of the rectangle are same as the center co-ordinates of the flower?

Everything is centered on the horizontal axis.

Does this mean the center of the stem (rectangle) is equal to the center of the flower and we have to then calculate the (top, left) co-ordinates of the rectangle like i have done in the code i pasted above.

Went through the instructions and working out on this for a while now. I know there is something i am missing, but i dont quite know exactly, it is that sort of feeling :sweat_smile:

2

No. The top middle of the stem is the same as the flower center.

Yes.

Use the scrubber to see what is happening. What is the height of the stem the first time it is drawn?

Note the instruction,

The stem should start at the center of the flower and reach the ground.

3

So, the first stem is related to the first flower head. So, center of the first flower head is (50,90). This is because 50 is the center of the horizontal axis and according to the instructions, the flower head is centered around the horizontal axis. Also, since the flower has to be on top of the ground, its y center coordinate is 90.

Center of first flower head is (50,90)

Now, stem is at a distance of 10 from the bottom of the ground. This is because the first flower head is exactly on top of the ground and 10 is the height of the ground.

So, we get height of first stem = 10

This means that width of first stem = height of first stem /10 = 1

Like we discussed above, (top, left) of stem = (49.5, 90), since we know the width and center point of the stem

Using all of this for the first stem, i am calling the rectangle function as

rectangle(49.5, 90, 1, 10, “green”)

Still i am getting an error. Like you said i am focussing just on the first stem and not the entire repeat loop.

Using the scrubber, what i noticed is that the stem is still in the ground, but since height of stem is 10 and first flower head is on the top of the ground exactly, stem will be in the ground right.

Please help me with this

4

This part isn’t right. The stem should touch the ground (grass), not extend across the entire ground.

5

So, the center of the first flower head is exactly on the ground top at (50,90). So, in that case for the first stem, height is zero right. Because, the center is on ground top, there is literally no distance right between center and ground top for the stem to grow. But, if we take height as zero, we are getting this error,

image
image390×105 5.71 KB

6

If the height is zero, there’s nothing to draw. What if you started at 1 instead?

7

Tried it just now with 1. Visually it looks ok, but i am still getting the same error of First stem isn’t right

let topStem = 90 //top left y co ordinate 
let stemHeight = 1
let stemWidth = stemHeight / 10
// since stem is centered around x axis as given, center of stem = (50,90)
let leftStem = 50 - (stemWidth / 2) //top left x co ordinate
repeat(61){
  rectangle(0, 0, 100, 90, "skyblue") //sky  
  rectangle(0, 90, 100, 10, "green") //ground
  rectangle(leftStem, topStem, stemHeight / 10, stemHeight, "green")
  topStem = topStem - 1
  stemHeight = stemHeight + 1
}

Also, is it that if we start at 1, the y co-ordinate of the center of the circle also moves up by 1 to 89

8

With this code, what’s the y value for the top and bottom of the first stem? Does it meet at the requirements in the instructions?

9

since we take height of first stem as 1, the top left y co-ordinate of the rectangle is 89 and the bottom y co-ordinate of the stem is 90. Yes, it meets the instructions that the stem must just reach the ground and start at the center of the flower.

It works now

let topStem = 89 //top left y co ordinate 
let stemHeight = 1
let stemWidth = stemHeight / 10
// since stem is centered around x axis as given, center of stem = (50,90)
let leftStem = 50 - (stemWidth / 2) //top left x co ordinate
repeat(61){
  rectangle(0, 0, 100, 90, "skyblue") //sky  
  rectangle(0, 90, 100, 10, "green") //ground
  rectangle(leftStem, topStem, stemHeight / 10, stemHeight, "green")
  topStem = topStem - 1
  stemHeight = stemHeight + 1
}

Thanks for the help

1 Like
10

The stem is perfectly good but just wanted to clarify a few more additional details for this same exercise

  • The leaves sit halfway down the stem.

Does this mean that the center of the leaves is at the midpoint of the stem or does this mean that top of the stem to top of the leaf is half the length of the stem??

Little confused with this

Also, apologies for typing again in a solved thread. Since, they were a few additional details regarding the same exercise i thought to type them here

11

That’s a good question. Is there a quick and easy way to test which one it is?

12

Yes

  • The leaves sit halfway down the stem.

This instruction gives us bit of a clue. If we observe, we notice that the point at which the leaf is attached to the stem, that is nothing but the center of the ellipse (leaf). Visually noticed it. Tried a lot drawing diagrams and all but this is the best way i could identify this.

1 Like
13

  • The xRadius of the leaves is 50% of the radius of the flower.

  • The yRadius of the leaves is 20% of the radius of the flower.

Since our instructions say that the radius of the first flower head starts from 0. So, that means both the x - radius and y - radius of our ellipse(leaves) will be zero for the first leaf. This means it will not be drawn

ellipse(50 - ((stemHeight / 20) + (r / 2)), topStem + (stemHeight / 2 ) , r / 2, r / 5, "green") 
//r is the radius of the flower head
//stemHeight represents height of the stem
//topStem represents y-co-ordinate of the top left of the stem

As seen above. since radius of the first flower head is given to be 0, so radius of the ellipse will also be zero and thus no ellipse will be drawn for first iteration

image

This is the error i am getting. I know that for our stem we took, height = 1. But, since radius of ellipse is dependent on radius of flower head which starts from zero, how do we go about this??

14

The stem also starts at zero. In fact, everything starts at zero. But if they are zero, there is nothing to draw. How did you solve that problem with the stem? Is there one small thing you can change so that solution applies to all other parts of the flower?

15

Do note that the instructions say

On each iteration of the loop, the center point should move up by 1 (before drawing).

1 Like
16

Got it, like @glennj pointed out i went back and read this specific instruction again

On each iteration of the loop, the center point should move up by 1 (before drawing).

I realized that this instruction was what you were trying to make me think towards with this question

Is there one small thing you can change so that solution applies to all other parts of the flower?

The one small change we can make is change variables at the start of the loop and then call the functions for drawing different parts of the flowers.

Since, you are changing variables in the loop before drawing, your radius and stem height and all are now not zero when you are actually drawing the parts of the flower

Thank you @Isaac for patiently shaping my thought process by asking a lot of questions throughout our conversation. Thoroughly enjoyed this conversation and solving this exercise

2 Likes
17

Thank you @glennj for bringing this instruction to my notice. This has to be the single most important instruction for this exercise. I have managed to solve the exercise.

2 Likes
18

That’s wonderful. I admit, I was hit with exactly the same problem until I re-read the instructions slowly and carefully.

1 Like