字幕列表 影片播放
(train whistle blows)
- Hello, I am here.
It's February 13th,
I am feeling the love.
I would like to express my love for processing.
My first programming love,
my one true love, processing.
And I'm going to express it by creating this.
This is a famous shape in mathematics
called the cardioid,
if I'm pronouncing that correctly,
cardioid like heart, it's kind of like a heart
and today there might be some other videos
after this one where I make all sorts
of kind of heart patterns.
But I just want to make this pattern.
Now, if you want to learn more about this shape
and where it appears in mathematics,
I want to point out to you
this wonderful YouTube channel called Mathologer.
Mathologer has a video called times tables Mandelbrot
and the heart of mathematics and my heart is with
mathematics and processing
and code and all that sort of stuff.
Now I should also point out that
rendering an animation of these times tables
in processing has been done before
and most notably by Simon Tiger
and one of the things I love
about processing this year
is there's been this world wide
set of processing community days.
Recently in Amsterdam, Simon presented his work
on creating this very large poster
about the times tables
at Processing Community Day Amsterdam.
I was just at Processing Community Day New York
over the weekend and my heart
is definitely full of love and wonder
with all the things people are doing with processing.
So this video is dedicated to all of the people
who are working on processing and p5.js and fellowships
and everything.
So, this shape, you can find it in looking at the ways
light reflects around a circle.
I mentioned the Mandelbrot set.
You can see it right here
as in this bulb.
This first bulb
of the Mandelbrot fractal set is a cardioid shape.
And it's kind of amazing that it appears in this context
of time tables.
So, and I think if you watch the end
of the Mathologer video there's this animation
at the end and I was just like "whoa! That looks so cool!"
I kind of want to show it to you now,
but I'm just going to program it in
and hopefully it will be at the end of this video,
Cause somehow I'll program it.
So let me talk about how this works:
Happy February 13th everybody, I love processing.
Okay.
Now, let's say, and this is good timing,
because in my course at NYU this week,
just yesterday we were talking about polar coordinates,
and I'm going to need to make heavy use of polar coordinates
for this particular visualization.
So we're going to start with a circle.
And we are going to divide this circle equally
into parts basically, almost like a pie chart.
The way I'm going to represent that is just by equally
spacing out a set of dots.
I have one, I have two. Now I need eight more.
So I need four along the top and four along the bottom.
This is for me to get 10.
So
One,
two,
three
No that's three!
(laughs)
One, two, three, four,
one, two, three, four.
So now, let me number them:
Zero, one, two, three, four,
five, six, seven, eight, nine.
So I want to do times tables, meaning I want to multiply
each one of these numbers by two and whatever number I get,
then I want to connect it to that.
So, two times zero is what?
Zero, so that's just here.
One times two is what?
Two, so that connects here.
Two times two is what?
It's four.
Three goes to six.
Four goes to eight.
Five goes to 10!
There's no 10,
well we wrap around, we use the modulo operator,
so we use the remainder.
Basically, if we keep counting,
like this would be nine, 10, 11, 12.
So five goes to 10,
six goes to 12, seven goes to 14, and eight goes to 16.
Nine goes to 18 et cetera.
So you can see here,
that this shape is sort of starting to emerge.
So, let's first start by just creating exactly this.
Alright, so, let me start writing some code.
Circle! Hmm..ok so now what I need is a number of points.
So let me call this the, what is this? The scale?
The divisor? I don't know what to call this.
Total points!
(typing)
- Just call it total.
Alright. So, I'm going to make it a float,
and let's keep it as an integer for right now.
I'm going to change it to float in a little bit.
You'll see why.
So now I'm going to,
I need to do a loop,
and draw all those points.
I want the center of my visualization,
I want everything to be oriented around the center
so I'm going to translate to the center
width divided by two, height divided by two.
And then this is where that polar coordinate thing
comes in.
I need to figure out,
the way I'm going to find all those points,
is, right there are how many slices of pie here?
One, two, three, four, five, six, seven, eight, nine
oh 10! How convenient.
So each one of these angles is two PI divided by 10.
So that's where each one of these points goes.
So I'm going to say,
this delta angle,
I'll just call it delta,
equals two PI divided by total.
And then, another way I could do this is to just use map.
I could say angle equals map I,
which goes between zero and total, between zero
and two PI. That might be an easier way.
Then I don't actually need this delta.
And then, I need a radius, which is I need to know,
what is the radius of this circle that I'm visualizing?
So, for that, let's just make the radius
the width of the window divided by two.
Let's call that r, which is the width of the window
divided by two.
And then I want to say x equals r times cosine
of the angle.
Y equals r times sine of the angle,
and I will refer you to my video about polar coordinates
to understand these particular formula.
And then the next thing I want to do is draw a point.
I'm going to make an ellipse, fill 255, ellipse at x,y...
Oh! Oh!
(bell dings)
Thank you Ben Fry! I'm going to call this circle.
There's a circle function now. 16. I love using these.
There we go, look. You can see there's my 10 dots
around the circle.
Now I probably want to be able to see that circle,
that would be nice too, so let me say, stroke 255,
no fill, ellipse and the translate needs to come before
drawing this. I just want to draw,
ah no! It's a circle, it's a circle!
At zero, zero, r times two right?
Because the circle function expects the diameter,
which is the radius times two.
So now we can see. There we go!