hello my stream oh yes I am
[Music]
attracts me like no other function I
can't I can't get anything right
[Music]
I don't want to stop coding now this
song is dedicated to processing my first
love my true huh happy February
13th one of my favorite days of the year
I did you hear that rattle at least the
ukulele it has a weird rattle and so me
being the mechanically minded person
that I am I'm very mechanically you know
really good with tools and building and
putting things together that's sarcasm
you hear my voice
I found this screwdriver and I tried
tightening all these different screws
that I found all over this thing but I
don't know still rattles so if anybody
wants to submit other love ODEs to
processing or maybe to p5.js or other
types of programming things I will sync
those later on today's heart themed
coding training episode alright so
welcome good morning my name is Dan
and Buster the Kotick train this is a
live YouTube stream that now happens
every Wednesday at 10:30 a.m. Eastern
believe that I have an actual regularly
scheduled time so all of you been asking
just come here next week at this exact
time and I will be here except for when
I cancel or something happens there's
like a snowstorm or a mistake or like
beating came up that day that day
hopefully no I haven't I can't bring
myself to actually put on the top on the
YouTube banner like every went live
every Wednesday at 10:30 a.m. because
I'm afraid that will jinx myself but
that's what that's my plan so yeah
people are eric is asking shouldn't the
yellow colors fade to blue as time goes
on Oh
alexandros I think hey it's probably
from the nut or the action you should
check the trust rod I have no idea what
any of that stuff is I hope you're not
that's not like but that probably has to
do with parts of the ukulele so yes so
this is a this is the result of the
coding challenge that I did last week
and I don't remember where what the
settings here are somewhat arbitrary in
terms of the fading and let me in terms
of some of these values let me run this
again so I kind of wanted to continue
with this this week but I don't know
things didn't go well for me in the last
week after putting this code together
but I do want to talk about how I still
want to do some follow up videos about
that so let me begin by talking a little
bit about fluid simulation and where my
head is at with that so I want to want
to talk about a few things so this is
what you're seeing here is the result of
me porting code from my cache it's a
blog post called fluid dynamics or fluid
simulation or something like that for
dummies that code that blog post was
written based on the seminal paper from
2003 I think real-time fluid
Amyx for games from by jos stam and so
this is like kind of a 15th generation
version of that in processing and it
works in this nice way to create this
fluid like feeling I mean feels looks
the visual appearance here is much more
like smoke but with changing the way you
render the design changing with various
parameters of the design you could
probably create a variety of different
kinds of fluid like simulations however
this is not many people have gone before
me to create versions of this in more
thoughtful and sophisticated ways so my
original plan was just to port the code
which I did the next step I was going to
try to refactor the code and I started
working on that a little bit I want to
show you where I got to because maybe
some of you might have some suggestions
so I'm gonna go to github.com slash
Schiffman slash CFD the CFD stands for
computational fluid dynamics and these
were some like these were some like test
bits of code that I put together before
I did the actual live stream if you want
to find the actual code from the live
stream you can just go to here you will
see the video here this is on the coding
training comm this link will take you
ups this link will take you to the code
and then one person who this is exciting
we have one community contribution so
let's take a look at this community
contribution really quickly from Juan
Carlos Punk's Campuzano flow around
circle incompressible non viscous fluid
I love this so this looks like it is a
particle based fluid simulation which is
really where I want to get to with all
this stuff and you can see the path of
these dots kind of moving around this
circle can I move that circle I can move
the circle that's kind of cool
I might suggest it sort of surprised me
that it went the color of the background
when I clicked it so I might if I were
giving my quick off-the-cuff feedback
here I might consider a different color
change or when I click and drag but I
can let's try let's click on trace so
that's cool so we can see the trails of
these particles let's click on speed oh
it says drag circle right there
what does radius do Oh
that makes the radius of this
interesting only much smaller so let's
make that big let me drag it around cool
so that's great so I'd be curious to
look and III would want I would love
some documentation here about and I
wonder it's probably in the source code
if I click here some documentation about
what what what algorithms led you to
this particular simulation or did you
invent them yourself or what was the
sort of technique employed here that's
terrific
okay so but where I was getting to is
over here I started refactoring the code
and if we look at my code from last week
which is just again a port of other
people's code what you'll see is that we
go here to the fluid class what you'll
see is all of the data that's part of
this fluid simulation is a set of six
different individual arrays there is a
velocity vector associated with each
spot on the canvas each spot on that
grid of pixels and that velocity vector
is described by an X and a y this zero
notate the sort of previous velocity
vector so we always need to know
historically what was the velocity
before this moment in time and this is
very common a lot of different cellular
automata algorithms that involve data on
a grid and then also there's this idea
of density which which I might think
about renaming to die because it's the
amount of dye at any spot in the fluid
and that's how we end up visualizing
whether we're using we've mapped that
amount of dye to a hue or to a
brightness value and then s is the
previous amount of dye so I had this
idea that let me let me and I was gonna
do this live but I thought I would just
try the first steps of it which you can
see here and I am this is my fluid
refactor and if I go here I had this
idea okay
well what if I had like this idea of a
velocity object and it was actually a P
vector object and the velocity object
knew a current velocity in a previous
velocity so a I'm just like trying to
get some new variable
aiming to make the code a bit more
readable but also if and then if I had a
dye object which would just be a scalar
so the velocity object is a vector the
dye object-- is a scalar and then this
would allow me to have the fluid class
have just these two arrays like the
array of velocities in the array of dyes
and then I could start the code would
sort of like simplify into like this I
kept going down this road and this is
this doesn't work but then this is my
idea oh then I could apply the different
steps of this particular simulation
diffusion projection diffuse project
Advent and I would diffuse and project
the velocity and add back to project the
velocity and diffuse and add back the
density and then I started realizing the
whole way the code is written if we go
into those functions that perform these
operations is to operate off of a single
generic array so I guess I could
overload the fun of two different
versions of each functions whether
they're getting a vector or an array
then I started to get lost and I was
like I don't know the best way to do
this and that was like late at night
last videos but I got the live stream
about this tomorrow morning so I you
know I rather than take up all of
today's live stream trying to refactor
this code what I'm asking for you is
your suggestion so if you're watching
this right now and I want to think about
this have some ideas for me let me know
let me know because my goal is to
refactor it in a way that's more
readable maybe turn it into a library
maybe ported the JavaScript maybe
optimize it there's lots of
possibilities here but then I was sort
of thinking what am I doing here am I
really the person in the world who's
going to invent a new fluid simulation
like library and algorithm and organize
it I mean probably not to me maybe and
certainly with the help that I've found
with this wonderful internet community
of people who watch this channel I'm
sure there are lots lots of people
watching who really could thoughtfully
contribute this idea but there are many
other there are this is not a new idea
and in fact researching this a bit more
I found another library called pixel
flow it's last commit was pretty recent
so that does it oh no that's not pretty
that's a year ago last commit was a year
ago but you can see it has a lot of
functionality for this these ideas and
if you you can download and I actually
ran some these examples which are quite
oh here we go
which you can see are quite exciting and
amazing so this is an interesting
possibility for me to look into actually
just using a library where all of this
has already been sort of refactored and
reorganized in a way that makes it
useful for for like making the projects
there is also MSA fluid which is a
library that I used many years ago which
is the exact same algorithm that I
implemented but thoughtfully packaged
into a library but not currently
compatible with processing 3 I quickly
checked I think this would require a
small amount of work work that I could
actually to to update it to work with
processing 3 more easily so that's a
possibility but the I've been in touch a
little bit with Gabriel Y mouth let me
find Gabriel y mouth on Twitter
Gabriel y mouth is a researcher
specifically in fluid structure
interactions and based in the UK this is
the website and Gabriel y mouth has
created something called a lilypad
processing which is and and let me just
download this I'm gonna let's let's take
a moment because this will actually just
run right off the bat so I want to show
this to you because this is really
really phenomenal and why why why is my
zsh broken let me actually go to the
desktop and let me clone this repo real
quick let me open here and let me open
this up in processing i'm gonna go to
lily pad lily pad and i'm gonna run this
so look at this let me zoom into this
here we can see we've got a really
excellent and more dynamic and probably
accurate fluid fluid simulation
and there's so much there's so much to
this like this this quick demo this is
like scratching the surface of what this
example I don't know what to call it
example demo open source code project
does but to me and and there's and it's
really well organized thoughtfully in an
object-oriented fashion but for for me
to use it and to like there's just like
so much going on here and is probably
fairly well documented here
documentation on the solver guides are
contributing the project simple
instructions there's lots of
documentation here but what I think
might be useful would be to turn this
into a processing library and by that I
mean something that I can do actually
just through here import library add
library for example if I look for a
pixel flow is it here yeah pixel flow is
right here so I'm gonna I'm gonna find
pixel flow in the libraries I'm gonna
hit install I'm gonna install it and
then let me go find one of the pixel
flow examples so I can go over to
examples and I can go to contributed
libraries and go to pixel flow so we can
pick any of these let's just try fluid
2d fluid basic and then we can run this
and ah so look at this the package
control p5 doesn't exist which means
this is dependent on another library let
me quit this these by the way because
they're so sketch import library add
library I'm gonna add control p5 which
is an interface library which it's much
harder to do interface elements in an
elegant and flexible way and processing
in p5.js because you're in the browser
being able to manipulate text boxes and
buttons and sliders and and and and
create an interface there's so many more
possibilities given the rich set of
features that a browser affords okay so
let me now try running this again so
there we go okay so we can see this
is a similar idea of yet another fluid
simulation example so so this is where
I'm struggling with how to how to move
forward first of all I got a lot of
stuff a fluid simulation I'm so
fascinated by it I want to oh I want to
but
so one path which of my original path
was to kind of refactor my code make it
a little bit try to understand how the
algorithms work a little bit more and
explain those things that will take some
time and research on my part which is a
little atypical for how I do things
which is more fly by the seat of my
pants so that's one possibility the
other possibility would be to leave that
fluid video alone and go straight to
using a library whether it's pixel flow
NS a fluid or lily pad all three so
that's what I'm looking for thoughts and
suggestions about but I'm going to leave
that now I'm I'm like looking over here
and I'm seeing some would say he is not
looking at chat question mark so no I am
not looking at jack except for every
once in a while when I to look at the
chat okay so I want to put that aside
and today I want to focus on the heart
let me quit this
okay wait oh let's also go and go to the
DVD logo challenge since there were
several community contributions let's
take a look at some of these so let's
look first at bouncing DVD logo by Bruno
in 3d that's pretty great that's pretty
awesome thank you for submitting that
let's look at verlet DVD logo by Anurag
this is cool so look so add rope there
we go so now these are looks like on
Iraq who created this actually made an
entire verlan physics library Berlet J
yes I typically have used toxic lips yes
for my veux lip physics that's really
cool to see the thing about alternative
physics for this DVD video bouncing 90s
screensaver look beautiful let's see
what else do we got here
bouncing DVD with corner detection and
more oh look at this I love this
so it's counting the number of
collisions the number of corners the
corner threshold I guess is like how
close does it have to be the size is the
size of the logo the speed let's make it
go fast all right come on everyone
ah would hit the corner I missed it
[Music]
and then changeable speed track and hit
the corner detection by temporary pride
I like this press T to enable/disable
the track of the logo cool scroll the
mouse wheel to speed oh I love that I
can scroll the mouse wheel which speeds
it up or slows it down and background
switches if the logo hits the corner
logo color switches if the logo hits the
edge ah so we know if it hits the corner
I'd at the corner if the logo at the
edge wonderful okay so thanks for those
I'm really trying to spend more time
keeping this site up and so each coding
challenge has a card first of all thank
you to all the people who have
contributed to this website this is not
a project I made or designed it myself
this is a community developed project
let me just go to github here and click
on contributors and I you know rather
than rather than name people I can like
just sort of scroll here and we can see
a lot of people who have contributed to
this website so there's actually another
project which is a sort of like coding
train website 2.0 that's on the horizon
but what I my goal is to really have a
place for the community to be able to
share work that they're doing and for me
to also make sure I'm crediting all the
different sources and things that I use
so for each and YouTube description
works and the playlists work to some
extent but this is basically each
challenge has a card if I go here I'm
gonna go to the DVD logo one or actual
let me just go to this Fourier transform
one so if I go to the challenge this is
the video obviously but you can see
here's the code there will be on the my
goal is to have p5.js web editor and
processing code for each challenge and I
know that David Schneider a viewer has
made a processing version of this so
hopefully that'll get up on the site
soon you can download the code see it
live I might need it I don't know if
that's the right terminology but that
will just I'll give you a link to the
actual demo run
in the browser and then various other
things that are related to the video are
discussed here and this is the important
part that I wanted to highlight this is
where you can submit your own version so
right now there's no kind of elegant you
know web form type thing this is all has
to be done through a pull request which
can be somewhat daunting and a little
confusing how to do that but there are
these links will take you to
instructions on how to do that and don't
be afraid come we are welcoming and
friendly in the coding train github
repository if you've made something and
you have no idea how it's a minute open
up an issue say you need help try a pull
request don't worry if you get it
doesn't work it breaks there's a bug
just give it a try I hear this from so
many people
oh I'm no good at that github thing I
wish I could contribute something
sometimes you just have to get over that
first hurdle and you need people to be
there helping you get over that hurdle
and so Cody Drake there are lots of
other places that our wonderful
community is open-source communities
helping people to get started
contributing I hope that coding train
can be one of those so it's just my
little pitch to encourage you to
contribute okay I'm not using a timer
today I will use my Bell live demo yeah
live demo probably would make more sense
mark sheriff writes in the chat that is
a good question on you are been asked do
these live streams get saved in the
channel yes so let me take you to the
coding train on YouTube you can see here
that I'm live streaming now if you go
back I'm just gonna go to uploads this
is everything that's on the Chola I'm
logged in and you're seeing my unlisted
videos here we switch accounts just for
a second I meant to be on oh I don't
know
everything is all messed up all my
accounts and everything are now being
shown things are coming up unlisted
videos
view as okay wait now I'm gonna get ads
okay fail to the first fail of today
alright here's my chairs my videos this
is what you would get if you were not
logged in to YouTube and you would see
all these different videos what I'm
looking for is yes so these are
typically what the live streams look
like this is live stream number 100 the
last one what we're a little bit behind
so you can see these are some recent
live streams that haven't that don't
have like a thumbnail and and a title
with a number on them so a little bit
behind at that but the live streams
usually get numbered and then everything
else on the channel is mostly redundant
content edited out of the live streams
so as always anybody has a suggestion
for how I could organize this stuff
better you know a lot some people on
YouTube have separate channels one for
live-streaming one for uploaded content
I'm just kind of doing everything all in
one channel it's in one place anyway
there I'm joking there's nothing there
particularly private I will just mention
that I make I have some videos that are
for a course that I teach at NYU that
are unlisted because they're
specifically only for that course but
they're there just add administrative
videos my sort of technique for the way
that I do it is when I have content
videos for a course I have those public
on YouTube okay okay what am I trying to
do right so what am i doing today what
am i doing today ah so I want to let me
pull up the oh my goodness Simon Wow
so first let me talk about Simon Simon
is a viewer of the coding train I'm
gonna do Simon Tiger let me go back to
me logged in I'm a search for Simon
Tiger and we're gonna get Simon's
YouTube channel and we're gonna click
over here - Simon speaking of processing
Community Day and I'm gonna click over
here and then go to Mythology hard
of mathematics this particular video
then I'm going to close this close this
and close this so this is a very famous
pattern in mathematics called the
cardioid there is a video on the
mythology YouTube channel which is a
fantastic use of do Tube channel about
mathematics about using x tables to to
visualize this cardioid shape the
cardioid shape appears in the Mandelbrot
said it appears in diagrams of kind of
like patterns there's a an explanation
in this video of how you can see the
cardioid pattern and I in the top of a
coffee cup based on like the way the
light bounces off of it and reflects off
the coffee all sorts of fascinating
stuff here Simon
creates Ivan created a created a poster
I have which I have downstairs hanging
in my office I sure brought it up here
to show you visualizing all of the times
tables in in-processing inspired by this
particular video and this is Simon
giving a presentation about it at
processing community de Amsterdam so
these are my two inspirations I think
vihart also has some videos about the
cardioid and about general and generally
speaking vihart has amazing wonderful
one mind filling soul beautifying videos
about mathematics and different types of
things so I encourage you to check out
the work of thy heart if you don't
already I never look at the chat so slow
mode is not again not on again I know
why I'm forgetting to not put slow mode
on in the chat oh well we'll see if I
need to
we'll see if I need to we'll see if I
need to pull this car over kids
well of the car over so I would like to
do this and so in honor of I'm trying to
avoid saying Valentine's Day by just to
say Valentine's Day once in honor of
tomorrow I would like to make a heart I
would like to express my love for
processing and we're gonna do that here
by visualizing the times tables and get
this pattern and I there's a I would
like to recreate the animation I'll just
click over to it I'm gonna I'm gonna let
this play
this is masala Jers content not mine a
mythology are here I probably just gonna
let it play for a few seconds so I'm
gonna try to kind of recreate this
animation I'm gonna stop it now because
I want to be careful about repurposing
other content encourage you to go check
out the mythology video um but I want to
see if I can create my own version of
this animation ok we refresh this page
refresh this page there we go
cardioid there are lots of techniques
for creating the cardioid shape this
being the most common this is super
related to the epicycles video I
recently did I don't know if it makes
sense for me to make a video just
programming this way of generating it
but it's useful to see that and then I
could also get where's my Mandelbrot set
challenge and have that ready to go
let's see here here we go let's grab the
processing code so what I want see you
live let's do that so a little long
let's grab the processing code and see
what happens here
because why would I avoid Valentine's
Day the reason I would avoid valentines
day because it's a fake holiday to just
excuse corporation to sell greeting
cards loves is a real thing
I embrace hearts and puppies and
rainbows and all of those things but not
this candy scum rock commerce nonsense
it's my okay let's take a look at this
alright so in processing I should be
able to make this let's try to make this
1280 960 yeah so there you can see the
cardioid shape right here and then of
course what it's been another half an
hour
geez Louise got started doing something
get my ukulele out again okay why is
this let's just do this okay this this I
have this I have this okay
what's interest what's here what's what
machine what is what is machine learning
think I should watch next interesting
fascinating okay alright so this is
legitimately sometimes it's not
sometimes it's something that I've
programmed hundreds of times not hundred
times but several times before but maybe
not in years sometimes it's something
that I'm completely looking at for the
first time and try to code and sometimes
it's something that I like practice the
day before and then I'm recoding again
usually it's this which is like I kind
of understand how this works I watched
this video a couple times this seems
very similar to other things that I
programmed how hard could it be but I'm
about to attempt this for the first time
I have never tried to program this
particular visualization I'm definitely
going to need the whiteboard camera so
should I just say Valentine's Day
there's nothing wrong with saying
Valentine's Day I'm going to draw a nice
heart here
I'm going to attempt to draw the p3 logo
which kind of looks like a 1 and then it
has kind of like a 3 like that I really
like like live on YouTube drawing a
heart and like my own very poorly drawn
version of the processing logo
apparently I am ok here we go
so let's cycle the camera and let's get
started actually I think what I'll do is
I'll start with this and what's
Oh interesting this is kind of envelope
of a pencil of line so this is basically
the others as they say the same thing
okay okay
Oh whoops sorry you can't see me all
right I'm gonna start with this on my
screen all right here we go
Valentine's Day with Pete with
processing don't make me get out my
ukulele behave chat don't make me get
out my ukulele do I have a love song
here I have the lullaby that's not where
you love song this is kind of lovey
lovey dovey
all right okay maybe we won't do any
music well add some some very impressive
music in post
all right here we go
hello happy Valentine's Day from the
coding tree I'm gonna say it once I can
be serious for mine hello
there's something in my heart that I
love and here on this day February 13th
although you might be watching this on
February 14th there's some other day in
the future I want to express my love for
processing processing a programming
language and environment that started in
2001 created by Casey Risa and Ben fry
please read all about the history of
processing in the processing foundation
it's work right now
Crossing foundation org and I forgot to
blow my train whistle at least there's
no timer right Snape the ACE let's let's
move this along people hello I'm 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 process 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 it 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 mythology mythology has a
video called times tables Mandelbrot and
the heart the heart of mathematics
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 where there's been this worldwide set
of processing community days recently in
Amsterdam
Simon presented his work on creating
this very large poster about the times
tables across the community Amsterdam I
was just at processing Community Day New
York over the weekend and like my heart
is definitely full of like love and
wonder with all the things people are
doing with processing so this video is
dedicated to all the people who are
working on processing in p5 GS and
fellowships and and everything I love
you all
now everything's gonna go wrong because
I'm gonna start coding but you know so
this this shape um you know you can find
it in looking at the waves light
reflects around a circle
I mentioned the Mandelbrot set you can
see it right here as in this bulb of the
sort of like 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 then I think we're gonna if you
watch the end of the mythology or video
there's this like animation at the end
then I was just like wow that looks so
cool I gotta show it to you now but I'm
just gonna program it and hopefully
it'll be at the end of this video
somehow I'll program it so let me talk
about how this works okay so happy happy
almost happy February 13th to everybody
I love processing okay now let's say and
this is good timing because in my course
at NYU this week just today we were yes
yesterday we're talking about polar
coordinate so I'm gonna need to make
heavy use of polar coordinates for this
particular visualization so we're gonna
start with a circle and we are going to
divide this circle equally into parts
basically almost like a pie chart but
the way I'm gonna represent that is just
by spacing out equally spacing out a set
of dots so I think of the mythology
video he starts with 10 that seems like
a good number so and probably makes
sense from you start
here 0 1 2 wait a second I think it's
gonna work if I get the three over here
right three four five six blades and all
we have our first fail record scratch
this just just ignore me I'm over here
looking at something yeah okay oh that
makes it oh yes yes one two one two
three four ah okay okay okay let's try
that again
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 ten so one two three no that's three
one two three four one two three four
okay I did an okay job there so this is
my circle whoa my ukulele this really
shouldn't be here what you're saying
yeah there's gonna be some interesting
editing in this I'm okay everybody don't
worry that was it sounded worse I mean
if anything my glasses are might be
broken I didn't actually get my head
into glasses okay all right I have my
circle with the evenly spaced out dots
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
1 times 2 is what - so that connects
here 2 times 2 is what's 4 3 goes to 6 4
goes to up shoot I'm gonna have an
easier time programming this than
drawing it that's for sure
4 goes to 8 5 goes to 10 there's no 10
while we wrap around we use the modulo
operator so we use the remainder
basically if we keep counting like this
will be 9 10 11 12
so 5 goes to 10 6 goes to 12 7 goes to
14 and 8 goes to 16 9 goes to 18 etc etc
etc yes so you can see here that this
shape is sort of starting to emerge I
did a terrible job drawing this I feel
like there's a mistake somewhere
but whatever close enough you get the
idea so let's first start by just
creating exactly this all right Oh
matchy let's edit it - let me close
these other things out just because I
don't need them open I don't need this
let's let's save this on the desktop as
times tables and let me just add whoops
oh I don't want the debugger on let me
add void setup void draw let me say size
is 6 let's make it a square right 640
640 actually hold on let's just see what
that looks like that's pretty good
oh my god I'm not in the right camera
sorry everybody
so why it used to be I swear in an old
version of processing wherever I would
leave the window it would kind of
remember it and then when I would run it
again it would end up there but just
doesn't do that anymore it really makes
me crazy there's probably a way I could
modify like you can do like I don't want
to get lost in this but just give me a
second just curious
no this doesn't work anymore I'll have
to investigate that all right all right
all right so let me start writing some
code circle hmm okay so now what I need
is I need a number of points so let me
call this like this is the sir
what's this scale the devised or I know
what to call this total points just call
it total all right so and I'm gonna make
it a float let's keep it as an integer
for right now I'm gonna change it to a
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 well I let everything to be oriented
around the center so I'm gonna translate
to the center width / 2 height divided
by 2 and then this is where that polar
coordinate thing comes in I need to
figure out the way I'm gonna find all
those points is right there are how many
slices of pie here 1 2 3 4 5 6 7 8 9
oh 10 how convenient so each one of
these angles is 2 pi divided by 10 so
that's how much I need to that's where
each one of these points goes so I'm
gonna say
a delta this sort of like Delta angle
I'll just call it Delta equals 2pi
divided by total and then another
actually another thing that way I could
do is I could just use map so I could
say angle equals map I which goes
between zero and total to between 0 and
2pi
it might be an easier way then I'm
actually need this Delta and then I need
a radius so which is basically I need to
know like well how what is the radius of
this circle that I'm visualizing and so
for that let's just make the radius the
width of the window divided by 2 so
let's call that R which is the width of
the window divided by 2 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 pause for a second I
see that there's some super chats flying
by thank you so much when I finish this
coding challenge I will thank you more
properly thank you okay
all right and then the next thing I just
want to do is draw a point so I'm gonna
say I'm gonna make an ellipse fill 255
ellipse at X Y and oh oh thank you Ben
fry I'm going to call this circle
there's a circle function now 16 I love
using these ok so let's see what do I
get there we go look you could 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 this
the translate needs to come before
drawing this I just want to draw I know
it's a circle it's a circle at 0 0 R
times 2 right because the circle
function expects the diameter the radius
times 2 so now we can see there we go oh
I have my circle with all my points now
I need to do
my math thing all right so I'm gonna
have a value I'm gonna call this n so n
is going to be what is the x amount that
I'm going to multiply each number by so
there's total pot there's a lot of
different parameters in the system and
you can play with them to create all
sorts of different kinds of patterns
hopefully we'll see some of those by the
time I get to the end but right now I'm
going to make this a two times table to
try to get that heart that cardioid so
I'm gonna call that maybe I should call
that factor let's call that factor
let's I'm gonna put that up here int in
factor equals two and I I'm sure there's
a nice way I could do all this together
but I'm gonna do this as a separate loop
so now I'm gonna do this again I mean
obviously I'm just reap I I will
refactor this later as I like to say but
what I want to do is I want to say hey
is I like I want to go from point A to
point B which is I times factor those
are essentially my indices of like where
where I'm connecting the lines so 0 goes
from 0 1 goes to 2 2 goes to 4 and then
I need a function it actually this could
be really useful for me to write a
function that returns a P vector giving
me the giving me a given a P vector for
any given index so so get vector for any
given index and then so basically I can
say the angle is map that index but
which goes between 0 and total between 0
and 2pi and then the vector equals a new
P vector at and this should be a global
variable R I cannot set the width up
here because it doesn't know what the
width is so I'm gonna make this R here
and then I'm gonna say R equals with / -
I couldn't make that an argument to this
function but just gonna keep that as a
global variable make a new P vector R R
times cosine actually P vector class has
something in it
P
vector from angle angle that'll make the
vector pointing in that direction and
then I just want to multiply it by the R
to set it to be that and then right so
I'm using some vector stuff here which I
realized is now maybe a little bit
beyond the scope of if you were coming
to this video just without knowledge of
how the P vector class works in
processing or in p5 which is a p5 vector
it's just an object that has an x and a
y so it's a nice way for me to store the
X and the y together and I can make the
x and y components from an angle and
then I can scale that by multiplying it
by some radius so it's really it's
really got that sort of polar coordinate
thing built into it so when I multiply
it by r and say return R and then
actually since I'm here refactoring this
I could say right here P vector V equals
what did I call that function get vector
based on I and then I should be able say
V X V dot Y so I basically just took
that code and put it into a function
because I'm probably gonna need to do
this quite a bit I don't want to return
our I want to return V well this is
liking what I'm doing so far I think
this might actually work okay so now I
want to say get vector for I and then
get vector for I times factor but guess
what it's not just I times factor right
what so first of all why oh this should
be a peeve Ector this should be a PE
vector so it's not just I times factor
although I guess I could rewrite this
function it depends on where I want to
put this actually I'm gonna put it here
so I need somewhere to deal with the
fact that when I do 6 times 2 I get 12
but I really just want to because 12
divided by 10 is 1 remainder 2 so 12
modulo 10 is to the modulo operator
which I have a video thank you goal 11
about modulo is also linked now up there
somewhere in a corner of this screen
okay so now right here I could just add
that here modulo total okay all right so
I don't think I'd actually drew those
lines but this is still working that's
there now I should be able to
a line a dot X a dot y bx b dot y there
we go it's backwards well why is that I
mean it's not backwards oh because I
started over there interesting so a
couple things I could do I could just
call like the scale function to flip it
the other way
I mean what's backwards what's forwards
who knows I'm just saying in terms of
watching that mythology or video it was
oriented the other direction I also feel
like our she needs to be a little bit
smaller than the actual size of the
window so let's make our equal like
let's give it a little bit of buffer
like 16 pixels that's a little bit nicer
to see again my my visual talent skills
are so non-existent and I know people
are watching this word designers and
with artistic vision and you will make
something beautiful out of this and I
can't wait to see so ah ah aha I saw a
chat message to go by which is really
quite smart which is that I could just
hear if this is the angle right this is
the angle all I have to do is just if I
wanted to start on the other side I can
just add PI being 180 degrees so if if
I'm starting with the angle here which
if this is zero if I always just add PI
I'll get here if I'm here I'll get there
not type of thing and when I say PI I
mean the number pi not a delicious
blueberry vegan blueberry pie okay
have to blow my nose where my tissues
it's dripping
[Music]
okay all right let's give this a try oh
it looks right okay now now we're
getting somewhere
so but the mythology uses the number 200
I'm just gonna let's go to 20 and see
what we get Lou that's kind of
interesting let's go to 200 Wow there we
go
mwah what there is the Cardiac oh that
is like beautiful just on its own and by
the way what's interesting about this is
this is very similar if not precisely
the pattern you would see if there were
a light source here and reflected or
bounced around this particular this
particular circle so okay all right oh
it needs to be red it needs to be orient
the other way need to have like an arrow
through an example baby Cupid flying by
lots of things all right but I want to
make this animation so there's a there's
a bunch of different things we could do
for example this this could be a
variable so let's just look at that
really briefly just to see I'm gonna say
float I'm gonna make it a variable here
equals 200 or I'm gonna say sorry int
total equals map mouse X I'm going to
take the map function Mouse X goes
between 0 and width and I'm going to map
that between 0 and 200 and then I'm
going to convert that to an integer so
now as a whoops oh so then good point
this let's have this take a total and
then the get vector function should have
the total passed in maybe there's a
different way of doing it but now we can
see basically based on the number of
circles we can see as I move the mouse
left and right that increasing so that's
one way I could animate this I think
it's probably us to decide like a
different way of animating this which I
will get to in a second I think is
probably more interesting and it's
varying the factor like what happens if
this is a three times table by the way
we could just try that right now so let
me make this back to 200 and let's make
the factor 3
look at that interesting now by the way
I die I shouldn't do this but I'm gonna
try this let me go to the mandelbrot
code
okay now the mandelbrot code creates
this pattern why it creates this pattern
because of this formula Z equals Z
squared plus C why is there an M there
the kupets what if I change this to a
three that would mean oh that's gonna
change I can't do that so easily without
it I need a complex number library this
is about I thought like oh I could just
in my head I was like I could just do
this that's interesting okay I'll come
back to that later
maybe we should this is this is the math
for squaring the complex number and I
would have to like rewrite this entirely
okay so this won't this won't make it
nephrite thank you this won't make it in
the final edit for this I'm looking at
the chat okay all right
nice idea but I'll I'll come back - all
right
breaking news I'm being told toward from
the chat that this shape is called a
nephrite so this is an F roid and if I
would go to say factor for look what
I've got now so this and interestingly
enough we could actually make these
floating-point numbers let's just see if
I have to change anything in my code if
I do that I'm going to I think but let's
see so I'm gonna do this
alright so immediately we're stuck here
like oh these are no longer integers so
what if I make this a float and this a
flow list of everything B floats there
we go that work let's let's be sure
about this right so that was factor 3
let's try factor 2 point 5 yeah this is
looking like I should look so this is
actually doing these same exact math but
it's allowing for the spaces in between
so what if I have two point two that
could should connect to four point four
and we can do modulo also because seven
point one would connect to fourteen
point one modulo 10 would still be sorry
seven point one kick to fourteen point
two modulo ten would still be a point
four four point two so this works with
floating points and now we can create
that animation and so what I'm gonna do
is I'm going to make this the global
variable factor I'm going to start it at
zero and then I'm just going to slowly
over time say factor plus equals 0.01
interesting oh there's the cardioid
there's the nephrite isn't that lovely
and beautiful and amazing I just I just
love this now think of the possibilities
I have done the most basic thing to just
create this animation and at some point
it's gonna get it's like really crazy
stuff it's gonna start to
but there's so many other parameters
there's ways you could think about color
here I'm gonna make a JavaScript version
of this that will run the browser that I
will publish that you can look at which
is basically exactly the same code I
could look at this forever I hope you
enjoyed this dedication long-distance
dedication to my true love the heart of
mathematics and processing no wait wait
I don't want to go just yet I'd love
that it just keeps going it's like never
stops so what I want to do actually
before I leave
besides to make it all rainbow coloured
is I wanted to show you this is a nice
way to increase the factor but I want
I'm gonna make another video that's
about making a perfect gift loop and I
think this is an opportunity for us to
make a perfect gift loop so where would
be a part that matches up so one thing I
could do with this this this factor oh
so one thing I could do with this factor
is they like map it to a sine wave so
for example what if I have a variable
called T which is gonna be like I'm
gonna keep track of time and I also have
a variable called like DT which is like
my time step and maybe I'll just go up
by 0.1 and so what I want to do is
factor equals map the sine of T which
comes out to negative 1 and 1 between 0
and 200 oh yeah we go all the way up to
200 I don't know how high we should go
there but let's try it let's try it up
to 200 and then T plus equals zero point
one so this would now have the factor
value not just increase over time but
smoothly oscillate with like an easing
function a sine easing function there's
lots of other easing functions you can
use all the way up to 200 and all the
way back down to 0 which would be a
perfect loop so let's try that it's a
little bit too fast
well maybe 200 was too high let's have
it just go up to 50
still whoa okay so I have to figure out
what makes sense here five there we go
so you could do that hit five and now
it's coming all the way back down to
zero and back up to five so I don't know
that I've hit on this exactly right
let's make this go up to 20 let's have
tea go up even slower why does it
starting oh because sign no sign of zero
is zero
opposite over adjacent oh no no it
starts at zero so Oh weird I wanted to
start at zero so let's make this what
happens if I give it a negative number
I'm just curious
I was interesting
so I'm just seeing what's happening it's
going all the way up to 20
[Music]
let me just actually have a go too - oh
wait
yeah
interesting that's weird within what it
does with the negative so I don't want
the negatives so here's this is the
simplest hopefully the lot of stuff just
got cut out there I was confused the
issue was sign goes between negative one
and one you know all you need to do is
have time start at like poem hopefully
there was a little edit point there what
might what it wasn't doing what I wanted
to do because I wanted to start with
times table 0 but sign of 0
while it is 0 is then in if I'm mapping
between the range negative 1 1 it starts
at 1 so I could just change this to
cosine because that would start at this
is that would start at negative 1 or it
actually starts it sorry yeah no it
starts at 2 sine of sine of what is
negative 1 I should know this right let
me just show you how I figure this out
it's PI over 2 R like group right so why
did this not come on because so one of
the things I love about thing about sine
is like Y is sine as Y is sine of the
angle Y is sine of 0 0 degrees 0 well if
this is the angle sine is opposite over
adjacent or I could I could call this
the Y in this the hypotenuse or
something so Y divided by H and imagine
as this angle gets smaller and smaller
and smaller and smaller and smaller like
this
eventually the if the angle is 0 the
length of this side of the right
triangle sine Roy trying anymore
is 0 so even though the hypotenuse is
whatever it is 0 divided bat so sine of
0 is 0
now sign of what is 1 well if the the
angle
90 degrees right the angle were 90
degrees than that that side of that
right triangle basically which isn't a
right triangle anymore it would be equal
to the hypotenuse so it's 1 so 90
degrees is 1 so it must be like negative
90 would be negative 1 right so if I
start it at like if I just say print
line print line sine of negative PI
divided by 2 negative 1 right so that's
where I want to start so I'm gonna I'm
gonna make this have some continuity
here oh wait did it just work by
accident no I don't know what's going on
anymore why did it start at 0
use trig circle yes a units big circle
would be better
I always think in weird ways though trig
circle would tell me better
oh because you're so weird
just let me just I've ruined this video
it's going so well
this is what I want oh that's okay zero
everything connects to zero I actually
wanted to start at one as I want it to
be it doesn't actually matter I was I
was thinking that zero makes everything
you see nothing but I'm totally wrong
about that when the factor is zero
everything connects back to zero when
the factor is 1 you see nothing so in a
way I actually want to start at 1 which
is no no no applause please I want to
start at 1 which is pi divided by 2 or
but how come that oh that's starting at
2 so negative 100 it's actually perfect
I had it right all along it just was
like such a high number whatever I
should have gone gone with this let me
just go back I'm gonna like ignore that
I thought this will like an interesting
idea you think it's just it happened so
fast at the beginning so in a way I
wanted to this is not the sort of like
oh because it starts at 5 when it's zero
to two it's always in the middle so I
want T actually to very specifically I
see I get it now I get it now I always
want if I always want it to start at one
I always want to start it at whatever
sigh whatever this number is / - I
always wanted to be 10% of the in this
case so if we're 20 I would need this to
start it - this is so silly what I'm
doing I don't think I'm right now I'm
mostly just alright so let me think
about this more for a second so this
could actually I could actually have
this be a number so I always want the
starting point to be whatever so I can
just do arcsine right so for example if
I were to say let me just figure this
out for a second if this were factor max
factor is 20 right then what I want is
and this would be max factor this is no
longer a global variable T should start
at arcsine of Max Factor / - right
I'm trying to think about this
sign of T 0 to 1 1 to 20 oh that's a
smart way of doing it yes it would be so
much easier if I just multiplied Max
Factor by sign or if I add one cosine of
T plus 1 that's a good solution you know
I was doing so well and then I then I
went off I'm too many tanned that's an
interesting idea let's try that
no map okay hold on I can work this out
so many ways to do it on 0 to 2 and 1
Damien no that's not gonna work use
frame that set location in the draw
function that's interesting hold on I
want to make this start always at
wherever it's going up to this is so
silly
it's lonely do it this way because this
will be an easier way to think of it
factor equals sine of t plus 1 times max
factor
and then this is the same thing I had
before but if I'm just getting rid of
the map function to think this through
all I could do from C that's actually a
really good idea right because the map
function doesn't care if I say map
sine of T with a range between 0 and 1
and I always want to start it whatever
whenever it's 0 I want it to be 1 Max
Factor yeah there we go yeah that's
that's what I want yeah ok I don't know
why I couldn't couldn't think of that so
what did I have before yes
okay sorry sorry for that digression
everybody lost my mind there for a
minute it's very hot very stressful to
do this in front pool I bought all right
I'm I'm back I I went off on like a hold
down a whole rabbit hole of like
figuring out something which was
actually quite simple which is that I
was wondering why it wasn't starting
what I wanted it to do I wanted to start
I wanted to start like this if I put
this at two I want it to start where the
factor is one
I want the factor to be one because I
want it to sort of start in this loop
with it always at with with you just
seeing the outer circle and if
everything is multiplied by itself then
zero connectors are one we have no lines
but if I increase and this works if I'm
going between zero and two because sine
of 0 is 0 and in this mapping function I
end up with 1 but if I were to change
this to 0 to 3 then it's starting
somewhere else so that's not what I want
and actually a trick that I can do with
the map function is I could just sort
even though the range is really negative
1 to 1 it's gonna figure out what to do
even with something negative so I can
actually make tell it the range is from
0 to 1 and then but whenever sine of T
is 0 it should always equal 1 and then
go up to like 20 that should work
although it's really fast if this is
just like way too fast
still pretty fast but that's because I'm
going so high let's just go to five I
just want to see like a smoother
animation there we go this is what I'm
looking for so you can see start at zero
and it's sort of like coming up to four
of those little bulbs and then back down
to zero and then back up
so Oh tea is supposed to increase by DT
ah whoops yeah I don't know why I made
this DT variable and then didn't use it
oh there we go
I was also a mystic DT that whole time
so I could control it and we could
probably make this 20 now yeah and we
could sort of see there we go this is a
little bit better so I just wanted to
see it's sort of like smoothly breathing
animation that Luke's so it's going to
go all the way up and back down I know
this video was going so well at the
beginning and became a bit of mess here
at the end but I am really excited to
see what kinds of things do you create
from this the heart of mathematics the
cardioid shape thank you for watching
and I'll see you in a future coding
challenge goodbye
[Music]
so really slows down is it good up there
isn't it in fact sweeping negative 5 to
5 ah I think you're right
hmm
all right let's let's do let's let's
understand how this works I should
really do this in like right if sign
whoops if I get the value one sorry if I
get the value zero zero
this should print I should see a 1
that's exactly what I want if I see the
value 1 I should see a 5 what if I get
met do negative 1 negative 3
yeah so I this isn't really right the
problem is
so there's a nicer way to do this which
is I could just say all right I could
have T start at negative PI divided by 2
and map sine of T
yeah that's what I want what's wrong
with me this is what I want or I could
use cosine because cosine will start at
zero I don't need to go back down to
zero
cosine of zero is no cosine zero is not
negative one so yeah okay well we redo
that again ah this is even like simpler
than what I had
sorry Mathieu negative cosine oh you you
smart people in the audience I'm gonna
do it cosine starts at one I know so I
could map it from 1 to negative 1
there's so many ways there's like a
hundred thousand different ways I could
do it it's actually not that complicated
I've just lost in my own thoughts here
which is the thing that seems to happen
a lot ok all right there's a weird edit
point this is actually working the way I
want it to work but it's not starting at
the right spot like let me just run this
again it kinda like starts in the middle
and I want it to start where I wanted to
start where the factor is 1 because I
want all the points to connect to
themselves which is what I don't see
anything because I don't see any lines
because every line is drawn from the
point to the point so actually there's a
really simple way to deal with this
which is that sign I'm at T starts at 0
and sine of 0 is 0 so like the factor is
actually starting at 5 here because if
I'm in the middle of the range that I'm
about I know I'm just gonna change this
range I don't I don't care about the
range between 0 and 1 actually for the
purpose of the animation so I start the
range at 1 and then sine of what is
negative 1 it is negative PI divided by
2 so I gotta just start at negative PI
divided by 2 which will mean sine of 0
will be at negative 1 and then you
should see this there we go
so it starts I want this to loop all the
way up to this number of Bowl however
I'm going up to 10 and then all the way
back down to 0 so now I have some stuff
that I could play with in terms of like
oh I could have this go up to 50 I could
change DT to be like twice as fast and I
don't know it's way too fast probably to
like get the effect of the animation
yanks but you get the idea
sorry for how crazy that looked let's
make this do this like even slower see
it start to form so this will now be a
nice slow animation all the way up until
50 I'll take this out I am excited to
see what you make out of this what
happens when you think about the
geometry in a different way you think
about rendering this in a different way
you think about color you think about
multiple dimensions you think about
different styles of animation what if
you like we're actually like draw all
the lines as there's so many
possibilities here I hope you explore
this and make your own version of the
cardioid to express your love for
somebody on this day on our every day of
the year
thanks very much and I will see you in a
future coded challenge yeah three pie
divided by two equals negative one but
it's the same it's the same thing it can
be negative right all right now with
colors I'm gonna let everybody make
their own version of this let me just
quickly put this in the web editor so we
have it but I actually kind of this
didn't like the looping of this didn't
work the way I kind of imagined it would
so I think I might actually prefer to
just leave it at I mean this I think
this actually was a nicer animation to
be perfectly honest
hey Espen Larsen joined as a new member
Espen Larsen is the creator the singer
the composer of
no I'm not leaving that was just the end
sine squared from 0 to PI that's
interesting all right sorry this is like
way too much fun to watch I feel like I
want to do this actually I want to do
this
oh it's slow interesting uh why is it
slow let me sorry I just I can't help
myself
let me just like play with this for a
little bit just a little bit longer
before I go into the next coding
challenge I feel like these circles are
which ones are unnecessary will I get
just as much value out of like fewer
lines
I just want to I just want to give it a
little a little something
and what happens if I do this with
hardware acceleration there we go all
right let's take a little break and let
this play I'll do some thumbnails okay
so let me let me do some thank yous I'm
here where where is this thank you to
Israel
ah hoo ho sorry thanks for your passion
I learned a lot with you thank you to
otaku's thank you welcome to new member
akre technologies and new member Espen
Larsen
[Music]
so let me just say so
membership wise there is a join button
on YouTube I also have a patreon if I'm
constantly thinking about whether I'm
gonna keep the patreon or not but I
don't have a lot of benefits for people
who join as members I do mail you a
sticker or not a cigar a bunch of coding
train stickers you can see some of them
here and and then I sometimes do live
streams where I'm trying to like test
out an idea or fix something that will
just be for members only that's pretty
rare wouldn't count on that and then we
have a slack channel so again I should
mention that if you if you have recently
joined as a Youtube member but you don't
have a slack invite check the community
tab and there's it's probably just I'll
post me much I post a new one the only
way I can get you a slack invite us
through a Google Form I forgot another
way to do it
so so to ekor technologies and Espen
sandal Larsen hopefully I can get you
your slack invite soon okay the song by
the way is manfred writes you've got to
make this song long longer there
actually is a full version of the song
on Spotify that you can find but and I
will ship the stickers anywhere
internationally it's very inexpensive to
send something in the I mean it just
costs a dollar or two so I'm very happy
to send you the stickers wherever you
are in the world the thing that I have a
problem with is I don't get to it very
quickly and so sometimes you have to bug
me a little bit about that and I
apologize for that you shouldn't have to
but um you know if yeah so okay
it's just by the way what's interesting
is it just still going I should really
put what the factor number is this would
be interesting too let's just do this
for a second
text factor
number four minute number format by the
way is a function and processing that
will control the number of decimal
places you show and so we can go like
this whoops Oh text is a little weird
and PGD will this work
whoops oh I forgot because I am so now
we should see that's the factor up in
the top left so we'll see that's kind of
interesting to see what number it is by
the time it gets to different patterns
so you can see that's five usually the
number of bulbs is one less than number
six all right so what else am I gonna do
today it is noon I've got another hour
so in me here oh oh I want to do the I
definitely want to do the next thing I
want to do is the gift loop thing okay
so if to think about this
I just like letting this run can I let
it run in the background while I do
other stuff yes
so let's look for hold on I've gotta
find some messages sent to me from goal
on 11 just sit here no oh it's cuz it's
not with the G this is good and this is
good okay I'm looking for this I
[Music]
also looking for Saskia
where's the best way is it tumblr yeah
okay and what's this
No
this and then there was something else
when I'm looking for gift loop gallery
okay
interactivity and computation if loop
gallery I think this is what I'm looking
for okay awesome oh-ho I love this
that's really great
I love all these okay
okay so I think I am ready for the next
coding challenge where are we now we're
up at factor equals 75 Simon and Simon's
poster I wonder how many go up to Max
Factor then reverse the sign of DT and
you get back to zero and then reverse
again yeah whoa it's interesting how it
sort of comes back to what it was of
course at the beginning okay all right
right
yeah a slider would certainly be an
option okay so let me just I just want
to put this back yeah
I'm just getting the code into a place
where I can release it fine all right
great okay
okay
[Music]
let me just look at
let's look at Golan's code for a second
so I want to make like a simpler version
of it but it's super good to see so
let's look at this one if I run this
alright so this is what it's doing so
the technique here the technique here is
to have a counter that basically goes
from 0 to 1 that's like a percentage
complete of the loop it looks like and
there's a you specify like the total
number of frames so like if I change
that to 500 it's really the same thing
but it's just running slower because
there's like more frames if I change
this to 50 we'd see it like this ok
and then then this will start recording
it so if you're recording it you compute
always computer percentage and then you
oh you call like a render function with
that percent that's pretty interesting
and then it takes a percent between 0 1
and then there are two different
graphical techniques for example like
this spinning thing and Hutt's % times 2
pi that makes sense and then
transformations a percent times 2 pi
times negative 0.25 interesting linearly
moving percent plus 0.5 modulus one map
percent for 0 to 1 okay that's like
linear sigmoid aliy moving pink square
function double exponential sigmoid Oh
fascinating
oh I see there's all these different
easing functions mmm how much do I want
to get into all this traveling sine wave
% that's super interesting ok ok alright
so easing functions
yeah
so like different easing functions you
could use
[Music]
got it okay okay I think I have used
cosine square what's that
okay so I think I'm ready to give this a
start
[Music]
all right
all right let's let's get this going
okay hold on erase this
I really want to adjust my Mandelbrot
code to being able to do to be able to
do the complex numbers to like the third
power the fourth power that should be an
interesting thing to do so maybe I'll
get to that at some point let me just
check the chat here oh my goodness I
forgot to record this to disk it's fine
we'll have to get it down from YouTube
but I need to do some green screen
thumbnail shots later
oh sorry Matt shoot what's here's a hint
for you what's this I don't know what's
going on here oh this is something
happening in the chat that's not look
the quality on this live stream was
hopefully okay because I'm gonna have to
when I edit this together it's gonna
when Matt gets it it's gonna have to be
the YouTube archive that gets edited
because I forgot to hit record to disk
use a tan to to get angle and modulus to
get length and maybe the chat is
discussing something that has nothing to
do with me right now I need to to to
move along I'm saying lag was it lagging
before hopefully it'll be fine hopefully
it will be fine all right
anyway I'm recording this to disk now so
everything else from now will be
okay what I want to know is it was not
lagging during the challenge okay great
okay great all right well we can always
fix some things in post by like
overlaying the visuals if we have to but
I'm gonna move on all right okay I get
that as lagging theirs let me just check
the my yeah bad it's so that I don't
know
it says the stream status is currently
bad I don't know what to do about that
all right
all right here we go
hello I am here today to do a coding
chit chat oh my god I think I have to
minimize the chat yeah try it slow mode
I don't know hello I am here today to
make a coding challenge about making a
perfect well whatever I make won't be
perfect but you might make something
perfect gift loop so what does it gets
loop why am I talking about gift loops
so one way that artists who work with
computational media and computer
graphics are distributing their work and
and and expressing themselves is through
posting gifts to various different
online platforms an artist I would like
to highlight is Saskia freak who has
been making daily animated artworks for
quite a long time in fact maybe there
have been at least 1500 of them which is
mind-blowing and you can see a whole
variety of them here on her tumblr
there's some other I think she would a
medium article about this process
they're amazing a very famous gift
artist that I have referenced in
previous videos if I did a whole coding
challenge trying to recreate his cube
wave is cube wave is bees and bombs so
bees and bombs creates looping gifts
through algorithms and math and graphics
in all sorts of astonishing mind-blowing
ways so I encourage you to check out
bees and bombs also tumblr to see all of
the kinds of gifts that he has created
I'm goal on Leben at Carnegie Mellon
University professor Carnegie Mellon
University gives an assignment every
semester in his course interactivity and
computation to create a gift gallery and
so these create a gift and this is a
gallery of gifts that students made in
his course just this past fall and Golan
has a lecture about loops throughout the
history of art you know all it's very
easy to think as we work on programming
computer and make algorithms visual and
happen in javascript in the browser with
your open GL shaders WebGL magic that
this is the first time any doesn't
happen but this kind of work has been
happening for years and years and
predates the dawn of computers
themselves so this is a wonderful set of
historical references to different kinds
of Luc's that people have been making
and of course here's the iconic
Muybridge galloping horse that you can
see here so I encourage you to check out
all of these resources read about loops
and in fact you don't even need to watch
this video you can go right here to gold
ons Luke templates which has templates
for Java
I'm sorry processing Java p5.js
JavaScript and Python processing as well
so what I'm gonna do though in this
video is I'm gonna make my own I'm not
worrying about making something artistic
or innovative or beautiful I'm just
gonna try to show the process from start
to finish of writing code in processing
rendering it out to files and then
compacting that up as a gift that you
could post I'm also gonna come back and
do a follow up video there's a new p5
JavaScript gift library that some
students of mine worked on last semester
in a course about open source and so I
will come back and show that in a future
video as well so let's get started so
what is the driving principle of making
a loop so if you look at Golan's code
examples the core idea is to have to
have first a total number of frames so a
gift an animation is just rendering a
whole bunch of images in sequence at
some framerate for your eye to see and
it appears like animation and if
whatever it is in the last frame or
really what would be the last frame the
sort of like frame before the last frame
matches up exactly with the first one
then you have a loop so in other words
if I'm drawing a circle here and then it
goes to here and then it goes to here I
don't need that many frames and then it
goes to here and then maybe it
disappears I have a blank frame then in
theory the next frame I want to see it
would be it entering the screen that
but instead I go back and show the first
one so this will look like it's a loop
that's going on forever
whereas reality is just starting at the
beginning and the last frame matches
that and so as it goes back to the
beginning
it appears infinite so this is the idea
so one couple things we need to do we
need to keep track of like what is the
total frames we want so we're going to
need some sort of variable like total
frames like in this case I want to have
one two three four five and I'm really
going to use the number six because I'm
not gonna I'm gonna read this is zero
zero one two three four five
wait hold let me think about this if I
don't want to render out the last frame
but the idea has six anyway Oh
everything's gonna be okay
just take a break take a deep breath
[Music]
am I supposed to look at the chat now
and probably everybody saying aye why
does he look at the chat I can tell
that's what's in the chat I didn't have
to look at the chat to know everybody
the chat is that just me look at the
chat I'm gonna go look at the chat oh no
I knew it I knew it I knew what this
would happen I knew enough to pull this
car over I'm pulling this car over
[Music]
Giff with a G some people like to say
good and some people like to say yeah
but I like to say good but I don't mind
and if people say
because we can all where's my dad
where's my pen the G is silent if I
think that's a good way pronounce it if
I lost my pen my marker and I have to go
I have to go be a human being somewhere
else in the world today how come I lost
that marker I have a sweater I have like
a keyboard I have oh here's a marker is
this the marker I was using maybe all
right I don't want to get lost in the
details of the total here let's just say
the idea is that the animation itself
has six frames 0 1 2 3 4 5 into that's
the frame count and then I might not
include the last frame 1 actually stitch
it together because the last frame like
is really back to the first frame again
but the point is the total number of
frames need the total number frames and
then I also want to have a variable
called percent and the idea is that
percent will always be the current frame
count will be in the current frame the
current frame number divided by the
total number of frames and what you'll
see in Golan's example let's do the same
thing is if we have the the ubiquitous
processing draw loop draws looping over
and over we could actually put our code
somewhere else like maybe I'll write a
function called render and we would just
call that function render passing in the
percent so this is a fun
that knows how to render some kind of
design based on what percentage of the
way through the design it is and as long
as the design is his is thought of in a
way where the end matches the beginning
then this is going to work out all the
other stuff about like saving frames and
all that kind of is it recording is it
not recording that could be in the draw
loop okay this is way too much
explanation because it's in essence like
quite a bit quite a bit more simple but
there's something to say that it was the
king of yeah why there's two more things
I want to say about this one is Golan
writes in his instructions as student
sketch on paper first so I really
recommend you you do that if this is
something you want to create try working
this out with crayons markers charcoal
pencil that's a really helpful going
into that sort of like analog drawing
process will really help you think
through your ideas number two is what
are the kinds of algorithms that move a
value from one number to another number
and in fact maybe like by the wrap back
around and there are all sorts of
different kinds of ways of doing this um
probably yours if you've watched any of
my videos before you might be thinking
of the sine function the sine function
is an excellent function to use for a
gift loop because if it's start as a
sine function if I were to graph the
sine function right it sort of it where
it starts it and it repeats it's a
repeating pattern over and over again
you could also use and then there's a
ton of different kinds of easing
functions so there's this lovely website
called easing functions easiness net
which is an easing function cheat sheet
and I highly recommend you explore some
of these other easing functions to think
about how you might move a value through
this loop and if you go to Golan's code
I'll just click on the click on the
processing one for a second you can see
like even in the code here there is a
this like double exponential sigmoid
easing function so anyway that's a
that's a like exports you can do
separately from this video let's just
get the basic
mechanics working so for example I'm
gonna go back to processing actually let
me make a new sketch where do I have a
sketch already whatever like a new
sketch what I call it gif gif loop
[Music]
sometimes I just like start to MI at two
hours yet once I get to two hours like I
stopped being so I like reading the chat
sometimes all right so I have a blank
processing sketch now and I'm going to
go set up I'm gonna draw I'm gonna I'm
gonna let's let's make it a square like
400 by 400 let's make the background
zero ah but no no no no let's make
another function called render and this
function is going to take a value like
percent and what I'm gonna do is I'm
gonna say render percent I'm gonna say
the percent is the by the I'm gonna I'm
gonna make my own variable called
counter divided by the total frames so
this means I need to say like okay well
I want to have a hundred and twenty
total frames in this gif I want to have
a counter equal to zero and now here
what I'm gonna do let's just do
something like say the ellipse an
ellipse is at % x with this would be a
linear function now at height divided by
2 and which is like 20 by 20 so we can
see now if I say counter plus plus and
I'm going to say afloat
let's just see if this works for a
second so this is the idea that I have a
total number of frames I have a counter
that's gonna go up and I really want it
after I I want to start the counter at
zero and then count up by one after
render and this the idea here is that a
much more complex sophisticated design
with all sorts of different kinds of
easing equations could be in here but
let's just see if this works I have some
brackets out of place what so I have
some weird extra slash here so let's see
what happens there we go so we can see
it's moving across it's almost like the
ball is moving because it's being drawn
based on a percent now how do i how
would I determine how I want to render
this so if I'm record like I'm just
gonna have mine start recording right
when the program starts so if you look
at goal lines examples a bit more
sophisticated you press a key it starts
recording but here what I'm going to do
is I'm just going to say right here save
frame gif - pound pound pound pound
which are hash PNG and I'm gonna I'm
gonna make a folder called output so
what this function does is it saves an
image to the directory output associated
with this processing sketch as a PNG
those hash symbols or pound symbols
indicate to processing that you don't
you want the file name to be numbered
based on the frame count hmm I'm gonna
do this a different way oh because I'm I
want to use my own counter this is going
to use the automatic frame count which
is probably fine but what I want to do
is I'm gonna say plus number format
counter 4 + PG so I'm gonna add the
counter number in here manually I think
that's gonna be all about this number
format function says use four digits no
matter what I guess I can just use three
because I know I'm going to have a
hundred 20 frames only need three dot
PNG and then what I could say is if
counter equals total frames
I'm gonna just basically say exit here
so I'm gonna tell the program to stop so
let's run this okay now let's look it I
have a folder called output I look in
there and we can see there we go I have
all my images so these there are tons of
ways now I could take this and stitch it
together as a gift let's actually do
that really quickly so for example I'll
pause for a second
sorry I'm looking at the chat okay I'm
trying to say if I want to do this I'm
not gonna do the stitching now okay so
I'll show you how to do the stitching
later in fact this new p5 library
actually will just create the gift for
you too but it's kind of nice to have
them as separate images and we do have
this question of like do I have it
matching up correctly like we should see
the last one should be 119 and it's
there so you know my algorithm is
perhaps like not the best like really
like this percent times width
isn't really like a perfect loop so
that's something I might need to improve
but let's let's make something that I
know will be a perfect loop so for
example one thing that I could do now is
I could say alright let's let's use
rotate so I'm going to say angle equals
percent times 2pi and i'm going to
translate to the center of the window
I'm going to say wrecked mode Center I'm
gonna say no stroke I mean no fill
stroke weight too and then I'm gonna say
rectangle at zero rotate by some angle
rectangle lets you square square at zero
zero with a side length of 100 so let's
look at this what just happened no fill
o stroke to 55 and this should have a
fill of 255 so now we can see this is
spinning now in theory that's gonna
match up perfectly because that rotation
at 2pi equals the rotation at zero and
I'm rendering the very last frame right
before percent would be one in which
case it would actually be 2pi so this
should match up perfectly
so let's now I'm going to comment this
out let's do this one more time let that
spin stop now let's actually make it a
gift all right so I need to look
up really quickly I need to look up
really quickly how I would um what's the
let me just look oh I think it's on
Golan's homework assignment like some
recommended websites like easy gift or
something
I guess I could just Google one I just
want to find like a reputable gift
stitching website gif I mean you could
do it in Photoshop but I don't want to I
don't wanna use Photoshop gifts tip it
open source gifts somebody's going to
recommend one for me
Oh posted assignments okay let me look
prices ins I'm sorry I'm looking at a
different computer right now tips for
making gifts gift maker dot me let's try
gif maker dot me
giffy I like but the giffy tool just
lets you capture it so let's let's go to
gif maker dot me
yeah let's just do this okay all right
so I picking just this website that was
recommended on Golan Levin's page gif
maker dot me you can also make a gift
for the Photoshop their countless all
include some other resources of how you
can do it but what's nice about here is
I can click this upload images and I can
go to the desktop to this gift loop and
oh whoops
hold on that's this sketch oh I didn't
even save it oh my god I'm such a loser
hold on hold on let's delete that and
let's go to the desktop let's run it
[Music]
and I can click upload images I can go
to the desktop I can go to my processing
sketch called gif loop I can find this
output folder and then I can just do
select all hit open and it is uploading
all the images oh I'm putting my gift
out of the oven it's ready ding yes all
right and now you can see look I have
this control panel which lets me do
stuff and change the animation speed and
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla create gif animation
what do I do now
download the gif and then I go here let
me find it oh it's so slow so let's uh
there must be animation speed does that
make it faster or slower laughter like
look at this
no slower oh yeah oh I see
so hold on so we can see the gift here
it's actually like running really really
slow
that's because if these animation speed
is set at 200 milliseconds in between
each frame so if I change this to like
10 maybe even just like 2
unless maybe too fat let's make that 5
there's a 10 there we go so we can see
that looks good now can you see is that
a perfect loop looks like a perfect loop
to me so now I should be able to do
create gif Craig if Craig if and then
hit download the kif sorry was there and
then if I look at it in finder know what
let me just why it does not work you the
gift
no it's still so slow
why
[Music]
why am I not able to get that speed
[Music]
if i refresh this is it
let's try that again the Skippy cricket
hold on hold on so there's the gift
maker on giffy which I use but I thought
oh let's do this alright I'm ready to
make my gift now and so what I'm gonna
do is I'm gonna use a giffy has a gift
maker here at goofy calm slash create
slash gift maker and I can add multiple
images to create a gift slideshow oh I'm
making a slideshow I have no idea so I'm
gonna do this by the way I'm arty my
finder is already pointed to this folder
but basically I just need to find my
processing sketch which is here on the
desktop under gif loop I saved
everything into output and then so now
if I click here and do command a4 select
all and open it is now uploading all my
files look at this oh this is so cool so
now I could see all of the images and I
could probably I could delete some I
could I could change them so I could do
something like editing here and then if
I want the whole thing to be one second
interesting so like I could change this
is it giving me like a preview that's
the preview oh this is very very slow oh
I want each image to be one second I do
not want that so if I want like 30
frames per second then I want each image
to be oh I just have to use the slider
well is that like the only options I get
I can only do ten frames for a second
seriously it doesn't let me have any
more control over it than that
that's not good I guess that's kind of
reasonable to do but I want to have more
a faster frame rate well let's at least
see if this works continue to decorate
Oh 15.9 duration exceeds a master
maximum of 15 seconds well no so this is
the disc gift makers no good apparently
we need to the old website was better
alright let's go back to that no wonder
goal on didn't recommend this one
alright here we are
can I just drag and drop it by the way
just curious if it lets me do that no
that would be nice wouldn't it
[Music]
all right I found this website thank you
to the recommendation from Golan gif
maker dot me there are so many different
ways you could make a gift you can do it
in Photoshop there I will include reach
links to other websites that allow you
to do this ugh if he has one though it
has some limitations I just found out
because I just tried it and what I need
to do here is click this upload images
and basically I want to take this folder
and upload all of the images I saved out
to that website so I am now going to
click upload images and luckily my
browser is already into that folder oh I
wonder why but you would have to
navigate to find it I'm gonna hit
command a which does select all open and
then now I wait for these things to
upload
[Music]
oh it uploaded and now I take my gift
out of the oven and present it to you
here all right so we can see that it's
going it's very very slow so if I want
it to be that's because it is the
animation speed is 500 milliseconds
which I assume is the amount of time for
each image and I believe 30 frames per
second would be like 16 is that right so
if I do that we can see how that looks
right so that's like 30 frames per
second and then I want to do create gif
animation click that please wait a
moment then I'm just gonna click view
the gif it opens up a new tab that's
still really slow right
that's not 30 frames per second why is
this not working
all right let's try downloading it see
if that helps so now I've downloaded the
gif it's not 30 frames per second is it
just that I and it's just like when it's
smaller it looks so much faster 16 is 60
yeah 16 is 60 sorry yeah he had sixteen
point seven seven probably ffmpeg yeah I
should do I was just trying to avoid
like ffmpeg cuz it's like a whole thing
people have to install gizmo calm easing
is that for making gifts or that's for
easing change the animation speed before
you upload the image last time I use ten
yeah I guess I could use Photoshop I
just I wanted to use something that
everybody could use not everybody will
have Photoshop and not everybody all
right let's try easy gift / maker that's
another one use the gift comm slash
maker try number 15 million all right
let's try this
okay let's try this
alright I can't get have things make my
oven joke one more time alright you can
use yeah we're trying to do something
that you don't have to install and you
don't have to pay for although these
things have like we're doing on ads on
them but
all right we'll try this okay all right
so now that I've made all those images
and save them to the output folder I'm
going to try stitching them together as
a gif
I'm using this website called easy gift
comm it's must be easy cuz it says so so
I'm assuming this is gonna work great
but there's lots of other ways you can
use Photoshop you can use ffmpeg there's
all sorts of different tools software
tools you can use to stitch images
together into a gif but let's see what
happens if I select Choose files luckily
for me it's already going straight to my
output directory but you'd have to find
that on your through the fear your
through your finder or whatever operates
that's music I'm gonna do select all I'm
gonna click open and then I'm going to
say upload and make a gif and this is
gonna work right look so we can see well
look at this we can see all of it the
delay is 20 so 20 milliseconds would be
I guess that's like somewhere between 30
and 60 frames per second and somewhere
here I should be able to say oh I can
change the delay time so 60 frames per
second would be like 16.7 let's just
leave it at 20 loop count loop forever
I'm not gonna worry I'm not gonna
crossfade frames what's interesting that
it has that effect let's try this make a
gif oh but have to wait now it's baking
the oven
very slow
oh that's in 1/100 of a second that's
not milliseconds okay it says right
there on the page in 1/100 of a second
one one thousandth of a second is a
millisecond so like 32 milliseconds of
delay is like maybe around 30 let's make
this three we want three one hundredth
of a second let's just try that let's
see what happens I mean you might want
it slower but I want it to kind of like
look like how it looked in processing so
let me click this again there we go look
there's my gift
there's my gift is it perfectly looping
sort of hard to tell but let's now I
should be able to download it I can
probably just like right click and do
save image as and say put it on the
desktop and then I can look at it here
and there it is yay okay so you get the
idea look what to showed you next I
don't know if I really want to show you
much more make a gif calm pictures to
give
okay now all right so you know
ultimately the creativity of what you
design is really the is is really the
thing that I'm hoping that you will
discover in yourself to make something I
mean I've just made a rotating square
but I think in order to be able to
explore your creativity you're gonna
need the tool you're working with to be
a bit more flexible because right now
the way that I set this up is it kind of
runs it once and then quits but I really
want to be able to watch the thing loop
and if and then like change the code and
run it again and change the code and run
it again and then when I'm ready kind of
hit record so let's do that this way
what I could do that through an
interface but I'm just gonna make a
boolean variable called record and I'm
gonna set that equal to right now I'm
gonna set that equal to false okay so
what I'm gonna say here is if um I'm
gonna say float I'm gonna say float
percent equals zero and this is very
similar to Golan's
if record then I am going to use this
counter that I have and and then I am
also going to do all this stuff like
saving the frame otherwise I am just
going to say percent equals float the
actual frame count I mean I could always
use the counter this is silly I should
just always use the counter but frame
count modulus total frames divided by
total frames and so this should really
be this is a little bit goofy but I'm
gonna put the percentage around here the
parentheses around there okay
so let me give myself a little bit more
room to look at this code this is a
weird I gotta I gotta explain this for a
second and why why why there we go okay
so what I want to do here is I want to
have the frame count always cycle back
to zero and I want to which I use the
modulo operator and I want
then I want to divide that by total
frames but I want to convert that into a
float and so I don't need these extra
parentheses or this parentheses yeah no
yes
this is what I want sorry about that
this is what I want I want to do frame
count modulus Topher this is so silly
I'm just gonna use the counter for
everything there is a built in frame
count variable and so really uh so it's
really just about what I'm using the
modulus or not
so now that recording is false this is
just going to play the loop forever and
ever again and I know that if I ever
want to now record it right if I like my
design I can go and delete what was
there before which I don't have to it'll
overwrite it and I can hit I can change
recording to true and then I can run it
it will do the recording and then it
will quit out so there you go you know
what there's a mistake here I am
recording the last frame and I don't
want to let's look at the let's look at
the output here
yeah 1:20 I don't want 120 because 119
is the frame right before the starting
frame the way that I've coded this so
this say frame has to be here so that's
a quick fix let me delete that again let
me run this here goes record it's going
to draw that last one but that's fine
now we should see the very last four
shouldn't it exit before it does that
didn't
all right well let's do it this way
let's just check if it gets to the end
if it gets to the end so frame before
the last one then quit and now here we
go
ah that works I can see just based on
where it stopped okay great so this is
why why I want the last frame to match
up before the first one okay great
so there's so much other stuff we could
do I could use like a sine wave again I
would encourage you to look at different
easing functions and try all sorts of
different kinds of designs and your only
limitation for yourself is that the end
matches up with the beginning but
matching up can mean a variety of
different things because something can
leave the window and then enter again so
there's as long as the as long as
there's a visual continuity your gif
will loop so I will come back I will
show you also how to do this in p5.js in
the browser with a special new p5 gift
library that I've been testing thanks to
the creators of that library and I'll
come back to show that to you in a
future video and please share your gift
loops we're gonna have them all over the
place I don't know coding trained gift
loop know what what should it be just
share them just look at this video's
description I'll explain how to share
them good bye thank you
it was 120 still there uh hold on and I
just didn't delete it let's see let's
see I'm pretty sure I deleted it I feel
like I need to do this whole video again
know then that weird it's even though it
exits exit is like it must be
asynchronous or something because it's
it oh you know what it must say it must
say it says exit when you get to the end
of draw so draw it's probably more like
an indicator like if I really did I
wonder if I did like system exit zero or
something yeah that worked
interesting interesting so the
processing exit function let make sure
that draw finishes that's an interesting
little tidbit make sure that draw
finishes where system not exit actually
forces the exit gift train but it's like
a gift
please share your gifts with me hashtag
gift train it's like a gift in the rain
see you next go to challenge good bye
yeah I see what you mean this this is so
flawed in so many ways but I'll decide
if I need to come back and do this again
all right let's make some more hearts oh
it's one o'clock let's make a few more
hearts oh I could say we returned that's
a good idea let's make some more hearts
so many hearts let's make some more
hearts
we can make it a gift loop all right
okay
all right everybody
[Music]
all right here we go it's time to finish
up for this week
oh I wanted to talk about the date of
course I never get to it I really have
to work on that oh my god oh my goodness
oh my goodness all right do I need I'm
not so sure that I need the board but in
case that I do I guess I should erase I
think that gift flute video is like kind
of useless but we'll see you sometimes I
think that and then I just I'm in my own
head because and actually maybe there's
a lot of stuff that's like new concepts
for people okay all right I'm here to
make some mathematical hearts look at
these formulas if you plot these
formulas you get a heart I mean what
could be better than that this one here
is might be my favorite although this
one here is kind of interesting look at
this so we could try any of these but I
actually want to try something a little
bit different here I mean I'm looking at
this and I know what formula are there
so what I'm about to is no in no way
magic whatsoever but I want to try to
get a little bit of an intuition for why
that crazy formula makes a heart shape
and how you might basically design your
own parametric equations to generate
different patterns so there are a
variety of different techniques for this
oh look rotated cardioid and we could
just graph the cardia I just with like
one minus sine of theta
oh so many ways it could make the
cardioid but let's let's let's go to
processing my happy place my love my
true love processing can I put like
emojis in the in the comments
hold on
heart emoji Matt you you're gonna edit
this part out let's just see if I do
copy mmm no I cannot put emojis in the
comments it's so sad how do you what did
we do before there were emojis like this
right okay
now that we've gotten that out of the
way that was a very important I'm gonna
go back to the curb thing so first thing
that I want to do is this is going to be
a lot easier if I think of everything as
oriented around the center of the window
so I'm gonna translate the corner of the
origins in the top-left then translate
to the center by the way this channel I
shouldn't call it the kodi train I
should just call it here's another
example of things you can do with polar
coordinates based like every video I
make it's the same but maybe that's the
theme for this week so now what I want
to do is I want to loop around all of
the points of a circle you'll see you'll
see why it's like I want to basically I
want to say float on a four float a
which will answer angle I'm gonna start
at zero I'm gonna go all the way up to 2
pi and I'm gonna go buy some increment
I'm gonna pick that arbitrarily oh there
might be reasons why I want to pick
different increments at some point so
I'm gonna have every angle from 0 to 2pi
and I'm also going to make up a variable
called R which is kind of like radius
let's just go 200 right now and I'm
gonna say once again here we go
sing it with me it's the polar two
Cartesian coordinates song auto-tune and
the Internet will fix that for me R
times cosine of the angle y equals R
times sine of the angle what I want to
do here is I'm gonna say no fill and
Stroke 255 and begin shape because what
I want to do is create my own custom
shape based on all of these points
oriented around this circular path
hopefully this will all start to make
more sense to you so then I can call
vertex X Y and then I can say and shape
and I can run this and you have this a
circle
I have made a circle the circle and and
by the way if I were to change this
increment value to something much higher
you can sort of well let's make it like
much more extreme you can see here like
I'm I'm actually just moving around the
edges of a circle and if I thought more
carefully about like two pi divided by
six then I might have a hexagon all
sorts of possibilities like that right
two pi divided by six there we go nice
little hexagon there but this is not
what I'm doing I am just tracing the
contours of the circle now here's the
thing I can start to futz with these
equations for example what if I wanted
to pinch a little bit
hold on pause for a second you can put
an emoji in JavaScript
sorry I'm seeing some comments of other
equations yeah this is the one that I'm
doing the system 1 Simon
okay sorry
all right
so what if what I wanted to do is like
pinch the shape a little bit so
interestingly enough what if I say like
cosine of a times cosine of a let's see
what that does
Oh weird so you could see what that's
doing I'm squaring the value so it's
kind of squishing it a little bit long
the x-axis but of course everything is
on the right side because if I square
negative I get a positive but I could go
to the third power so why don't I say
power of cosine of the angle to the
third power
look at this so you can see that even
just doing that gets me this diamond
like quality so that could that's really
working for the bottom of the heart in a
way that's the bottom of the heart but I
need to change the top so I need to
think about what I'm doing with the Y so
again I'm just kind of this is vary in
many ways like similar to my Fourier
transform epicycles videos there's like
conceptually tied here in that I'm
messing with the oscillating values as I
move around this kind of circular path
now let's do something else like let's
say well what if I take sine and I
multiply the Y value what if I kind of
multiply itself by sine of the angle but
have like the frequency doubled so if I
do this right well that's interesting
look what kind of shape I get there hmm
what if I multiply it by like a much
more extreme amount like five whoa look
at that
so things are starting to happen and
probably actually what would be much
smarter for me to try to visually
demonstrate this I have to think about
this would be to animate the process of
this and actually show the separate X
and wha X's and Y's moving in similar to
the Fourier transform videos but I'm
going to kind of move from here and I'm
looking over here because I'm I have the
actual formula from that Wolfram page
that I started with you can sort of see
here okay ah look if I have and this is
actually using sine 4x + cosine 4 but I
think that's just gonna like put it on
its side
probably but let's let's let's um so
let's put some more stuff in here to
like think about let's look at this so
five times starting with 13 times okay
so changing the amplitudes as well so if
we do this times a times well let's just
give train yes spen it is gift tree I
probably should have just put the
formula in I don't know why I'm doing it
this way I thought this would be
interesting classic villain mustache the
chat is saying that instead of a heart
I've made a classic villain mustache all
right I think it's time for me probably
just to put the formula in I'm sort of
interesting to explore the different
possibilities here but ultimately if I'm
seeing this equation what I want is
third why these interesting numbers
right well I'll get to that in a second
but let's do cosine of T or - minus - I
don't want to multiply this stuff
together losing my mind here so I want
to subtract out ah yes so as I'm getting
to the top depending okay so this makes
sense so let's let's actually put this
stuff in let's change this to cosine
let's change this to sign right no let's
change this to sine sorry let's change
this to cosine because I already have
done that and then I'm going to say
cosine and this is like I've got a 2 a 3
and a 4 2 minus a 3 minus a 4 so you can
see what's going on here but I need to
see you could see that it's now actually
a little bit more squished at that at
the bottom then at the top and so what
might be interesting here is to think of
you know this as well if this is our and
then maybe I want R times 2 times this
oh look at that because now when it
comes to
I you can start to see the heart oh but
it's upside down so I kind of want
negative one times the whole thing
because of the way the processing
coordinate system is we can say look
I've kind of getting a heart there but
I've gone to extreme so I should
probably get rid of this our thing let's
just make r1 and use the actual numbers
so we the actual numbers in the formula
are 13 5 2 so I can say 13 5 whoops 5
times
whoa 13 5 2 and then a cosine of for a
just has is not multiplied by any factor
so now if I do this
let's put parentheses around what am I
doing here got too many parentheses here
this there we go I look there's the
heart and then now I could scale it up
by a factor I mean I could just use the
scale function but I could have you know
basically scale it up by 10 and then I
could say negative R times that and
there we go so now you have made the
heart let's animate it this was very
silly my whole like trying to walk into
this formula really I just want to like
look it up but let's animate it let's
have it trace the path of a heart
because that'll be really nice so what
I'm going to do now is I'm going to
create a an ArrayList of P vector
objects so if I were doing this in
JavaScript this would be a much simpler
just plain array and then what I'm going
to do is I am going to not have this
loop anymore but rather have a global
variable called a and I am going to do
this same exact thing but I am going to
say here that the for loop sorry the for
loop will be for every P vector V in the
heart
draw vertex at V X V Y and then what I'm
going to do is each time through draw I
am going to make a new vector I'm going
to say heart dot add new P vector at
some X&Y and then I'm going to increase
the angle by a little bit so here we go
okay with math I'm so happy my artistic
talent is non-existent but let's at
least make the stroke weight a little
thicker let's let's add a fill someone
give me a nice red color but I feel like
it should be like a little bit more a
little darker and a little pinkish so
let's try that and let's make sure I add
clothes here so it closes the shape whoa
oh no no no no I do not want clothes I
specifically do not want clothes yes
that's what I want and now we are making
this heart so I challenge you to go and
look at these other formulas and try
them I'm Simon Tiger has shared with me
a ton of other formulism of maybe I'll
see if any of those I want to try but
you find a formula and make your own
heart could you do it in 3d I bet you
could make a 3d heart all sorts of stuff
and share that with me coding hearts
hash tag coding hearts coding love for
this wonderful any day of the year we
could be making we should be making
hearts all day of the year
no reason to just do it in February when
it's cold outside
almost like
snow and sleet and everything anyway I
love you thanks for watching the coding
train and I'll see you soon
it looks a little messy at the bottom
how dare you yeah it does how dare you
insult my heart they think it's probably
cuz I have just too many points down
there yeah that's better
combining this with the fourier stuff
would be good
[Music]
here here everybody our is a height
divided by maybe like it's four hundred
before he got ten so divided by forty
let's try that oh this would be a good
gift loop let's make the gift loop
everybody hold on okay we're gonna make
this a gift loop it's winter it's a
snowflake yes I see that you have some
3d formulas in yours Simon that is
fantastic I don't think I'm gonna get to
those today but I really appreciate your
your your suggestions you should make
them and you should make a video about
all your different heart formulas
alright hold on hold on okay so hold on
it's time for coding train
I made this ridiculously terrible video
about how to make a gift loop and you
should really just go look at Golan
Levin's amazing resources and different
artists that I mentioned saskia freak
and bees and bombs who are doing
wonderful things then I made this video
which I actually kind of love that makes
a heart in-processing just using like a
nice little math formula look at that
each time to make a gift loop of the
heart for Valentine's Day there I said
it's Valentine's Day this is what we're
doing alright so first that I need is
for this to always end where it started
so I have an idea for doing that which
is that if what I'm doing is I'm adding
these I'm adding the vertices of the
heart over and over again when I get to
the end all I want to do is start
deleting the ones from the beginning so
I should go back to that idea of percent
so let me actually open up my other
so I'm going to open up the gift loop
code this is my design so what I need is
this at the top I'm gonna go have too
many things open oh oh my goodness
I need this at the top then I need all
my drawing stuff in I should leave that
in there I mean oh my Dino I'm standing
from the code but I'm just copy pasting
from the last one and we get all my
drawing stuff and I'm gonna put it in
the render function and now the percent
the percent is going to tell me what to
do with a so that angle I'm gonna have
to change legs so let's just first do it
this way a equals map percent which goes
between 0 and 1/2 between 0 and 2pi so
right now if I run this with record and
let me let me close this this should
just be I've got my gift loop we just
move everything out of the way I've got
my gift loop here and I want record to
false I don't want to record yet so now
if I run this we can see it's making the
heart oh oh right and then done okay so
that's the right idea but it's not
looping because ultimately I mean
there's a bunch of things I could do
because I could say if I record it I
mean in a way I'm getting a loop but I
want it to like shrink back down to 0 so
I need the size so basically I want % I
want this to be like actually 1% is
between 0 and 0.5 halfway through I want
to draw the heart so I'm going to say
this is weird but if % is greater than
0.5 is less than 0.5 less than or equal
to 0.5
there's probably a better way to do this
but I'm going to do it this way right
now I'm going to add points
otherwise I want to remove the number of
points that I've added and I think it
actually is just gonna work if I just
say heart dot how do I get delete
something out of I think if I just
delete 0 that'll be like the oldest one
as I get so let's try that that removes
them all what's going on here oh but I
still need to draw I always need to draw
it ah so I'm always drawing it no matter
what but I'm adding points for the first
half and removing points for the second
half there we go there's my loop okay so
now guess what I should make to add some
colors and things oh it should beat
people are saying it should beat of
course it should be okay okay we're
gonna have we're gonna add beating to it
okay so there's no reason why the size
the size is being controlled by this
thing are here so I should say map okay
hold on the Wow oh wow no that's a
totally separate thing while I'm drawing
it ah so hold on so let's so actually
let's take this out let's take this so
this should this will make it small
right right so that makes it small so I
can control the size here just while I'm
drawing it because I could say R times R
times great so now what I want is the R
to be so I want an angle to be mapped
but the percent between 0 and 1 and
maybe between 0 and like 2 pi but like
times 4 like I probably want it to like
beat like 4 times within just the 1 so
I'm going to map that and then our
equals
map of sine of that angle which goes
between negative 1 & 1/2 between like
height divided by eighty to height
divided by forty so I think this would
like map the Sun whose size to a sine
wave and the angle is getting mapped
from the percent and so this would be
and it should be a perfect loop of it
beating okay I feel like I need to add
more color and stuff to this and kind of
off-center all right so let's see if
this is a perfect loop I have no idea if
it's a perfect loop its we if something
was weird about it oh something is weird
it's not deleting all the points this is
crazy this is actually kind of a nice
effect but I'm not deleting all of the
points I did and am I just getting like
some left over hold on let's make our I
think I thought the math would just sort
of work out let's let's take out the
beating for a second whoa
oh yeah it's not you could see there's
like an extra point each time so it
actually kind of works the first time
but I think I need to remove else remove
the heart and then I think actually here
if where do I check I guess if percent
is it gonna get to exactly one point oh
let's say greater than or equal to I
mean then heart dot clear
no it's still getting an extra point
Oh weird why is that point in there that
doesn't else heart remove wait I have to
think about this first I came close look
at that 3d heart the point four percent
equals 0.5 yeah
right right this is flawed I mean I
think it'll actually work when I record
it because it's just doing it the first
time but I would like it to actually
loop
I'm just thinking about this here
otherwise remove let's just just be sure
this is the issue all the way down to
three all the way down to four yeah it's
got extra points in it so why if I the
why they're not the same number of
frames oh it's as simple as that it's as
simple as that guess what the problem is
I'm adding an extra I'm adding that last
vertex twice because I have less than
equals there so this is actually as
simple as just getting rid of that
equals there I just want to use percent
is less than 0.5 I'm sure somebody in
the chat already said this but now you
can see this loops perfectly so now what
I can do is I can change let's make sure
there's nothing in output let's delete
whatever is there before I can change
record to true I can run this and now we
should see if I look in output if I look
at all the images and I scroll through
them and let's just look at the very
last one you can see yep
it's kind of that's the end of it so now
I can go and I'm like edit this part out
but I'm gonna go to where we can speed
this up and I'm gonna go to what was the
website I used easy gif maker yes so I'm
gonna go to this website easy gift com
I'm going to choose some files I don't
need to I'm gonna wear tonight where is
this now or these the hearts yes those
are the hearts I mean hit open and
upload and make a gift
it's got those files I am now going to
change the delay time to let's just make
it three that seemed good from before
three one hundreds of a second make a
gif my cat is there making the gif
making the gift oh the beating the heart
beating cute so I'm gonna go from where
I hear so let me also add the heart
beating back in I'm gonna add where was
that so now I'm gonna add the heart
beating back in where I had our change
and that oh I uh
what time is it all right perfect
let me add the heart beating back in so
I had that from before where I had are
mapped to the result of a sine function
and so if I do that I'm pretty sure this
is the perfect loop still is that
beating too fast slower beating people
are saying so it's a slowdown the
beating I'm gonna just do 2 pi times 2
is that better I think that's pretty
good anyway you can work on you can make
your own version of this this is fine
for me right now I gotta end this video
I am now gonna change record to true I'm
going to hit run it's going to finish
that I'm gonna look in the folder and I
can see I have all the images there I'm
just going to check the last one which
looks like that and the first one yeah I
think this will match up perfectly which
basically the first one is empty so I
think coming all the way down to zero
and back up will work so I'm gonna go
the website that I used whoops hold on
so the website that I used before
although there's a variety different
ways you can make a gift stitched out of
a bunch of images is this gif maker easy
gift calm slash maker so I can click
Choose files and I can go to my output
directory where I have all those I can
hit command a select all the files and
then click upload and make a gift so
it's now uploading all those images and
we can see them all here now I could do
all sorts of things to futz with them
and I'm curious to add this crossfade
frames let's try adding that Oh better
bad idea I don't know let's make the
delay time 3 100 of a second that's more
like 30 frames per second and then it's
not exact and then I'm gonna click make
a gif and then the cat is going to wait
for my gift
oh and Mike if it's ready yeah now I can
just do save image as and I'm gonna I'm
excited to tweet this heart and I'll
tweet it later there we go
this is done there's my no that's not it
where'd I put it hard kiss there it is
thank you everybody
I love you I hope you enjoyed this
special about using special this vid me
up about using Matt to draw a heart
curve and then animating it as a
infinitely looping gif and I I just
can't wait to see all of different I
just want to be flooded with heart gifts
just flood me with art gifts make three
big good 3d make them rainbow colors put
stars in them and cupcakes and whatever
you can think of I'll see you in a
future coding challenge good bye MA oh
wait what's uh what's the difference
[Music]
okay
oh I love that 3d heart picture okay
all right everybody yes finally kid Gopi
says baa Raghava choked claw that's how
I feel as well finally I can go drink I
forgot to bring water with me today so
I'm excited there's a bunch of videos
that can come out and I will see you in
Ojai Cody garden with CJ in the chat
everyone should check out Cody garden or
CJ's channel oh let me do some anymore
thank yous that I might have missed okay
let's thank you to all the other people
watched art gift train and I don't know
I think I'm done for today I will be
back next Wednesday I'm gonna check my
calendar but this is my plan now if
you're watching this right now I am
going to try to have at least for the
next few weeks every week so the way
that I work until someone tells me not
to do this this way anymore is I do a
livestream every Wednesday at 10:30 I do
a bunch of things during the livestream
and then a wonderful Matua Blanchette
who works as the editor for the coding
train takes everything from the
livestream and chops it into separate
smaller videos which then get uploaded
into different playlists where there's
coding challenges or courses I actually
made a video yesterday that was not
livestream it's like a little extra
beginner lesson about create graphics
and p5 so I might even upload that this
afternoon but I just want to highlight
I'm really I think I'm like a little bit
stuck here data and api's Schiffman
github please come and look let me just
go to oh no it's on coding train github
I am planning I should pin that repo
here it is already pinned I am hoping to
make a new playlist and I've been
getting suggestions and discussions
about what I might include in this think
it's probably gonna be approximately 10
to 15 videos and I want to cover really
about I'm working with data and API is
in JavaScript so things I haven't
covered before or things that I covered
before that are kind of out of date now
from with for a total beginner but the
focus won't necessarily be p5
so I will also teach about the fetch
function and also look at data API is in
node and I will use p5 to do some
drawing stuff but I'm at some point I
gotta make an outline but if you have
suggestions or things that would be good
bite-size beginner and data sets I'm
looking for cuz I want to look at
something with like a CSV data set a
mapping data set and maybe a news API
these are the kind of things I want to
look at okay thank you everybody I will
see you next Wednesday or on the various
uploads that come I'm so thrilled to
have this strange thing happened to me
in my life that I am here making videos
on YouTube about coding with and and
getting to be completely ridiculous if I
feel like it which nobody seems to have
complain about too much I get complaints
a lot of people are like you should you
should take yourself more seriously
and/or like what kind of like whatever
substance are you using to be this weird
way that you are and I can assure you
that it is just a mild chemical ginger
tea tea and caffeine I do I do drink a
lot of things with caffeine in it
alright good bye
I am going to sing you out with s new
member s Ben
oh wait wait wait wait
Matt Chia always says give me some green
screenshots of four thumbnails because
look it's my invisible computer this is
what people this I'm really just going
for clicks right clickbait clickbait
expressions alright that's good enough
goodbye everybody