on The Coding Train--

Choo Choo, don't have my train whistle,

called Coding in the Cabana.

Here I am, seated in the cabana.

I've got a camera here.

I've got a camera here.

And what I'm going to attempt to tackle for you today

is something known as the Maurrer Rose.

I don't know if that really worked.

I've made a lot of scratching sounds.

All right, so I have, before, on this channel

made a coding challenge.

In fact, I believe I have it right over here.

Coding challenge number 55--

mathematical rose patterns.

And this is something I do quite often,

I take this idea of a Cartesian plane--

let's try the pink marker, why don't we?

And if we have a point that's at, like, an x location,

and we have a point that's at a y location,

and I think of this as x, y, I can also

think of this point as a distance

from the center, or radius, and an angle.

That's known as a polar coordinate.

And of course, I have all these videos about polar coordinates.

I have a song about polar coordinates.

I didn't make it, but somebody made it using my voice.

And it is a huge topic, many mathematical patterns

and algorithmic art emanates from thinking

in terms of polar coordinates rather than

Cartesian coordinates.

So what is a [? burrough ?] rose?

So this idea was actually first suggested

in July of 2016, which is over three years ago, amazingly

enough, by Ruby Childs, linking to both star rose pattern

and Maurrer Rose pattern.

Oh, look at this.

We're going to have to do this.

I've been doing the the Maurrer Rose,

but look at this one, wow.

We're going to have to come back to the star rose.

And look at these Maurrer rose patterns.

So here we are.

This is the code from coding challenge number 55,

mathematical roses.

And this is demonstrating creating a rose pattern

with two parameters-- two variables, really, D

and N. These sliders are tied to those variables.

And as I change the values, we see different polar roses.

And here's a very, very simple one.

So this is an example of a rose, or rhodonea curve--

a sinusoid plotted in polar coordinates.

And we can see, look at, these are

a variety of different patterns you can

get with this very simple idea.

The idea being that we want to move an angle, right?

Right here.

An angle again along a path, a circular path,

all the way around.

And as we're doing that, the radius is going to change.

So if the radius is going in, you know,

I can get sort of patterns like that.

That was the worst drawing ever.

I'm so sorry.

I'm not using this chalkboard-- not that I draw well anyway.

A Maurrer rose does a bit more.

It consists of 360 lines successively connecting

the above 360 points.

So we've got a little bit more going on.

We've got this polar coordinate, sin of n times k--

it's kind of like we had before--

comma, k.

So this being the radius, this being the angle.

And the angle is 0D, 2D, 3D, and D is a variable in the system.

So I think I kind of understand it.

So n, the two values are N and D.

And K is just indicating this iteration that's happening.

So let's see if I can recreate this pattern right here.

So I could start with this code.

I'm going to kind of start over, just

to kind of do the whole thing from a blank p 5 sketch.

So let's just get that polar circular path to start.

So I'm going to say stroke 255.

I'm going to translate to the middle.

I'm going to-- by the way, I had some beautiful roses

in the garden up there.

I'll show you some footage that I took a week ago.

They're not there anymore, but that's kind of

inspired me to do this idea.

Stroke 255, for let a equal 0.

a is less than 2--

whoops, am I using a 0?

2pi, a++.

And then x equals r times cosine of the angle.

y equals r times sine of the angle.

If I have an r, let's just say r is, for right now, 150.

And let's use angle mode degrees.

Let's just be simple and set the angle mode to degrees.

Most computer graphics systems treat angles, by default,

in the measurement of radians, the unit

measurement of radians.

And a lot of my videos do that.

But P5 allows you to say degrees.

And since the Wikipedia page has different patterns

with the angle in degrees, this might be more helpful to us.

So now, if I say beginShape, endShape,

this allows me to create a closed path.

I could even put close down here.

I don't know if I need that.

I want to say no--

I don't want to fill up the path.

And then, what do I want to say?

Oh, vertex.

So this is the start.

It was probably similar to that previous coding challenge.

And we run this.

I don't see anything, because [INAUDIBLE]

to change the background.

Let's put on auto refresh right now.

a++.

Well, if I'm thinking in terms of radians, right?

Radians all the way around the circle once is 2pi.

But in degrees, it should be 360 degrees.

Now, there we go.

There's our circle.

So this is a good start.

Now, I think, if I just go back to the Wikipedia page

and look at the formula, I basically

want to replace how this loop is working,

and how I'm calculating the radius and the angle.

So let's see if I can understand this.

So if I come back here, k--

so it looks like I can do k going from 0 to 360.

And maybe technically, I actually want to go to 361.

So let's make this loop k.

I think this is going to be--

I think this is going to work pretty quickly.

So that's k.

Then the angle is n times k.

What's n?

Oh n is-- and k is this.

Oh, I need a d.

Sorry.

OK.

I've got this.

So this is not actually k.

Let's just call this i.

There is no indication-- i is standing in for 0, 1, 2, 3.

So I need a parameter n.

Where-- what are the things?

All right. n is 2, d is 29.

All right.

Let's go back to the code.

Let's actually put those on the top.

Let n equal 2.

Let d equal 29.

There we go.

This is going to make my life a lot easier.

And so now, what I want to say is k.

k equals i times d.

k equals i times d.

And then r, sorry, r is sine of n times k.

r is sine of n times k.

OK.

And then the angle, the angle is just k.

So I can just change this to k.

And I believe, if I zoom in right over here,

there's the Maurrer rose pattern.

But it's so tiny.

I need to expand it out.

So one thing I'm just sort of curious to do

is I could try saying something like scale.

And we can start to see it's--

I'm sort of like using scale to grow it.

But the line is so thick, the line thickness.

There you are.

The line thickness grows with the scale function.

So more likely, I could think about the stroke weight.

But really, what I want to do here

I think is just expand out [INAUDIBLE] by like 150.

And there we go.

This looks like exactly like this more rows pattern.

And in theory, if I were to just say things like n equals 6,

d equals 71.

n equals 6, d equals 71.

Boom.

I've got this pattern, which looks precisely

like the pattern in the Wikipedia page.

Look we did the Maurrer rose.

Ding, train whistle, all that stuff.

Let's add a few more things to this sketch.

One is I like the way these visualizations

show the plane sinusoidal pattern--

if I'm saying that correctly-- along with the Maurrer

rose in different colors.

So I think the way that I would do that is by just saying,

let me add a second pass.

And I think the difference here is, if k is just i.

Well, I can't see because I need a different color.

Now let's make it blue.

Yeah, and stroke weight 2.

Get a little brighter with some alpha, maybe.

Make the stroke weight 4.

And then this should just have a stroke weight of 1.

So now we're kind of seeing-- and I guess I don't, maybe

I don't want the alpha there.

We're sort of seeing--

we can see the original, though.

So this is the pattern that I did, I believe,

in the first mathematical roses video.

And it's just, the k is just the actual angle.

So I'm going around the polar path one time, from i to 360.

And I think I don't need this closed here, because that's

what I have, 361.

But the difference is the Maurrer

rose has a multiplier for--

for that angle itself, k.

And so it kind of, there's this extra, like, layering thing

that's happening as the lines connect

across a further distance.

I don't know if that explanation made a lot of sense.

But you know you could imagine, right,

if I were to make d, I know how we could do it.

Ah, I know how we could demonstrate this really well.

D slider-- not d Snyder--

d slider equals a slider that has a range between,

let's say, like 1 and 180.

I'm just sort of making that up.

And let's start at 1.

And then, actually, the value of d should be d slider.value.

So now, we don't see it.

And if I start to increase it, you

can see the pattern starting to emerge there.

And based on-- if I get all the way up to 100.

So I guess there was sort of a sweet spot in there, which

was 71.

All right, so that's pretty interesting.

And now you could imagine, I could also add--

make a slider for n.

I kind of like doing things, however, maybe a little

bit more automatically.

So I think you could use [INAUDIBLE]

to adjust n and d, open simplex noise, you could use.

You could try using a sine wave itself

to oscillate those values.

I might try doing something like just setting them at zero.

And then what I would do here, in draw,

is do something like n plus equals 0.01,

and d plus equals 0.01.

Let's just see what happens there.

Whoa.

And we start to see something happen there,

which is pretty interesting.

And maybe, what I want to do is have

d go up a little bit faster.

I don't know why.

I'm thinking that's meaningful.

But you can imagine-- so I'm not doing this with any thought.

But this, you could imagine creating