►
From YouTube: Nannou: creative coding with Rust - GitHub Universe 2020
Description
Presented by Alexis André, Artist/Researcher, Sony Computer Science Laboratories, Inc.
Alexis André is an artist, researcher and designer aiming at redefining entertainment. In this golden age of computation and data overflow, why is our entertainment still designed to be consumed in a passive way? A few media are offering interactive experiences, but none of them are designed specifically for you. In this live demo, Alexis will create a sketch from scratch for participants to experience what it's like working with nannou and Rust.
For more from GitHub Universe 2020, visit https://githubuniverse.com
As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub
Thanks!
Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github
About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com
A
Good
morning,
everyone,
so
my
name
is
alexandra
and
I'm
going
to
be
your
host
for
this
session
and
today
I'm
going
to
be
talking
about
nanu
and
that's
a
creative
coding
framework
that
has
been
written
in
rust,
so
I'll.
Try
to
keep
this
interactive
in
the
sense
that
I'll
try
to
do
a
live
demo
of
working
with
the
framework
so
that
you
can
get
a
feel
about
how
it
feels
to
actually
work
with
rust
and
this
wonderful
framework.
That
is
new.
A
A
A
So
if
you're
not
familiar
with
creative
coding,
it's
the
use
of
computers
and
technology
to
create
interactive
pieces
of
art,
installation
or
whatsoever,
and
you
might
have
heard
of
processing
or
open
frameworks
or
even
cinder
for
what
matters.
So
you
have
a
lot
of
different
frameworks
out
there,
but
the
only
one
that
I
know
of
and
where
you
can
do.
A
lot
of
interesting
thing
in
rust
has
been
nanu.
A
So
nano
has
been
developed
by
the
wonderful
people
behind
mind,
buffer,
a
design,
studio
and
they're
doing
like
awesome
installation
using
the
framework.
Personally
myself,
I'm
using
only
for
doing
graphics
so
far,
and
you
can
even
look
at
the
homepage
of
the
project
and
you
can
see
a
lot
of
my
sketches
here.
I'm
not
part
of
the
team,
I'm
just
maybe
a
heavy
user
of
the
framework.
A
A
So
that's
going
to
be
it
for
the
introduction
and
let's
jump
into
the
live
code.
So
if
you're
not
familiar
with
rust
I'll
try
to
keep
things
as
simple
as
possible,
but
if
you're
familiar
with
rest,
please
tell
me
where
I'm
wrong,
because
I
will
obviously
make
a
lot
of
mistakes
along
the
way,
so
we're
going
to
use
cargo.
Obviously
the
package
manager
for
rust
and
we're
going
to
ask
cargo
to
create
a
new
binary
application
for
us.
I've
called
it
universe
because
I'm
completely
lacking
any
originality
here.
A
A
You
want
to
use
the
number
version
and
then
you're
good
to
go
so
that's
wonderful
and
when
you
try
to
run
your
project
using
cargo
cargo
will
fetch
all
the
dependencies
all
the
libraries
that
you're
using
and
compile
everything
for
you
just
a
quick
note
here
on
my
machine.
I've
set
up
a
cache
of
all
the
libraries,
so
that's
why
it's
super
fast.
If
you're
trying
to
do
the
same
on
a
fresh,
install,
it
will
take
a
few
minutes
here.
A
So
if
I
just
print,
if
I
just
run
the
basic
hello
world,
it's
not
interesting.
So
I'm
going
to
cheat
here
just
once,
I'm
going
to
take
the
template
application
source
file
that
is
available
from
the
new
framework
and
I'm
going
to
put
this
into
my
main
file.
So
let's
look
a
little
bit
about
how
you
would
use
nano
in
an
actual
setting.
A
So
I'm
going
to
try
to
create
something
interesting
within
the
time
frame
that
I
have
so
I
might
go
a
little
bit
fast
on
some
points,
but
I'll
try
to
explain
as
best
as
I
can
how
this
works
so
in
our
main
function
here
we're
going
to
just
create
a
new
manual
application
that
will
start
by
making
model
and
a
model
if,
if
you're
familiar
with
the
model,
view
controller
design
pattern.
This
is
what
nano
has
been
designed
with.
A
So
now
that
I
have
this
in
my
main
file,
if
I
try
to
run
this,
we'll,
hopefully
get
something
that
looks
like
this-
and
this
is
the
beauty
of
using
a
framework
like
nano.
Nano
is
taking
care
of
all
the
heavy
lifting
for
you
in
the
back
end,
it's
using
the
latest
graphics
technology,
so
it's
using
here
metal
via
web
gpu.
So
if
you've
heard
of
web
gpu
you're
in
good
shape,
it's
basically
the
future
of
the
graphics
api,
where
you're
trying
to
use
the
gpu
to
their
fullest
and
you're
not
held
into
the
past.
A
You
also
have
window
management.
You
have
event
handling.
Everything
is
done
for
you,
and
the
nice
part
about
nanu
is
that
nano
is
not
hiding
a
lot
of
stuff
behind
a
complex
structure
that
you're
not
able
to
access
to.
So
if
you
really
want
to,
you
can
get
to
the
gritty
inner
working
of
the
framework,
so
we're
going
to
try
to
modify
some
interesting
parts
here.
So
I
have
here
my
background
color.
So
I'm
going
to
say
it's
black.
A
A
A
So
that's
how
you
define
ranges,
I'm
going
to
define
the
angle
as
my
I
value
here,
that
I
need
to
recast
as
a
float,
because
it's
not
a
free
operation
to
cast
a
variable
into
a
different
type,
so
I'm
dividing
it
by
10,
multiplying
it
by
tau.
You
should
never
use
pi
by
the
way
side
note,
and
I'm
just
saying
if
you
remember
your
basic
classes,
I'm
now
asking
nanu
to
draw
10
circles
that
are
laid
out
over
a
circle
and
we
should
get
something
like
this.
A
A
Of
course,
nano
can
give
you
the
time
as
the
amount
of
time
that
has
been
elapsed
from
the
beginning,
but
I
prefer
to
use
actually
the
number
of
frames,
because
when
you
do
heavy
stuff,
it's
easier
when
you
are
just
rendering
frame
by
frame-
and
I'm
just
going
to
add
the
time
value
to
my
angle
here
and
so
far
so
good.
The
compiler
is
agreeing
with
what
I've
been
doing
so
far
and
that's
the
power
of
first.
A
If
the
compilers,
if
the
compiler
agree
with
you,
then
you're
you're
good
to
go
you're,
pretty
much
sure
that
your
code
will
run
very
fine.
So
that's
that's
really
the
basics.
How
do
you
work
with
the
framework?
You
just
have
a
lot
of
those
functions
that
are
designed
to
be
written
in
this,
where
you
add
more
stuff
at
the
end
of
whatever
you're
doing,
and
then
we're
trying
to
go
from
here
to
a
little
bit
more
complex
example,
where
I'm
going
to
add
a
little
bit
more
interesting
pieces
here.
A
So,
in
order
to
do
this,
I'm
going
to
define
a
new
structure,
I'm
going
to
define
something
that
I
will
call
call
sinks
because
yeah
it's
going
to
be
interesting
to
just
work
with
things
and
I'm
defining
those
things
are
just
having
a
position
for
them.
So
they
have
a
position.
So
I'm
using
this
vector
2.
A
A
So
here
in
my
constructor,
I'm
just
declaring
a
new
struct,
defining
its
position
to
be
p
and
in
rust
when
you're
not
using
the
semicolon
at
the
end
of
a
logical
line,
then
it
returns
that
so
that's
how
this
function
is
returning
my
sin.
So
now
I
have
my
structure
here
that
is
defined
and
the
compiler
is
not
complaining.
So
if
I
were
to
run
this,
I
will
get
my
circle
again
and
since
I'm
not
doing
anything
with
my
syncs
right
now,
this
is
still
the
same.
A
So
we're
I'm
going
to
use
my
model
here
to
store
a
lot
of
those
things.
So
let's
say
that
in
my
model
I
want
to
have
a
dynamic
vector
of
my
scene.
So
that's
how
you
would
define
a
vector
of
type
thing
in
rus
and
when
I'm
just
initializing
my
model.
I
also
need
to
put
my
things
here
and
I
need
to
define
what
syncs
is
so
I'm
just
just
going
to
say
that
same
is
going
to
be
a
new
empty
vector.
A
A
A
The
things
and
when
I'm
declaring
things
here,
I'm
saying
this
is
by
default
an
immutable
variable,
so
rust
is
saying
you're
trying
to
mutate,
something
that
should
not
be
mutated
and
that's
where
the
safety
that
people
associate
with
trust
is
coming
from.
The
compiler
will
complain
a
lot
about
what
you're
trying
to
do
and
will
guide
you
to
make
it
safer
in
a
sense.
So,
in
order
to
solve
our
issue
here,
we're
just
going
to
declare
things
as
immutable
and
then
everything
is
fine.
A
It
works.
We
can
still
go
on
and
combine
things,
so
I'm
gonna
represent
my
model
now,
so
I'm
gonna
get
rid
of
my
for
loop.
Here,
I'm
not
going
to
draw
this
bunch
of
circle,
I'm
going
to
iterate
over
my
list
of
things,
so
I'm
going
to
start
by
asking
an
iterator
over
my
list
of
things
and
I
need
to
rename
the
variable
name,
because
if
you
are
not
using
a
variable
in
rust,
rest
will
will
also
complain
that
you're
not
using
the
variable
and
that's
a
potential
for
errors.
A
So
if
you
want
to
get
rid
of
this
warning,
you
need
to
use
an
underscore
in
front
of
your
viable
name.
So
that's
why
you
have
here
an
underscore.
So
if
I
erase
this
and
the
compiler
is
happy,
it's
able
to
find
a
scene.
So
I'm
going
to
draw
an
ellipse
right
now
and
I'm
going
to
put
it
at
the
position
of
my
thing,
I'm
going
to
say
it's
gonna,
be
a
smaller
one.
Let's
say
five
points
and
I
want
it
to
be
white
again.
A
And
now
I
should
get
if
you've
been
following
along
just
one
point
in
the
middle
of
my
screen
and
that's
fine,
that's
what
we
wanted
and
it's
boring.
Yes,
it
is.
The
whole
thing
starts
by
being
boring
and
then
we
add
more
until
it's
interesting,
so
we're
going
to
add
a
lot
of
those
things.
So
I'm
going
to
try
by
adding
a
constant
here.
A
A
bunch
of
new
things
all
over
this
the
place.
So
if
I
were
to
run
this
right
now,
I
will
have
2
000
sinks
at
the
center
of
my
screen.
So
it's
not
really
interesting.
So
we're
going
to
spray
those
things
evenly
over
the
wall
screen.
So
for
this
we're
going
to
use
the
random
function,
so,
let's
say
random
will
return
me
a
float
between
0
and
1.
So
I'm
going
to
center
this
and
I'm
going
to
multiply
by
the
size
of
my
screen.
A
A
First,
you
can
have
multiple
definition
of
the
same
thing,
but
when
you
need
to
specify
you
need
to
be
really
explicit
about
which
version
you
want
to
use,
because
when
you're
saying
random
it
doesn't
mean
that
you
want
to
float,
it
could
be
a
bull,
it
could
be
an
integer.
It
could
be
anything
else,
so
you
need
to
use
this
slightly
non-familiar
syntax
for
me
at
the
beginning,
to
ask
for
this
specific
version
of
random
that
you
want.
So
this
is
going
to
ask
for
a
float
that
is
between
0
and
1..
A
So
if
we
run
this,
we
should
be
fine,
because
the
compiler
is
not
complaining,
and
then
we
got
our
bunch
of
points
that
are
shown
all
over
the
place.
Boeing
again
we'll
get
to
the
interesting
part
soon
enough.
So
I
hope
you've
been
so
following
along
so
far,
I'm
just
creating
a
lot
of
things
here
in
my
model
and
in
the
view
function,
I'm
trying
to
display
them.
So
now
we're
going
to
add
movement,
we're
going
to
try
to
work
with
the
animation
parts
of
what
makes
creative
coding
interesting,
especially
for
myself.
A
So
when
we
are
looking
at
our
code
right
now,
you
might
think
that
in
your
loop
here
you
could
be
able
to
just
do.
Okay,
I
want
to
move
the
position
of
my
things
just
by
a
small
vector
and
but
the
compiler
is
saying
yeah
now
you
can.
You
can
do
this.
This
is
not
how
you
are
asking
the
code
to
do
we're
asking
to
mutate
our
sin,
we're
asking
it
to
change,
but
we
don't
have
a
mutable
reference.
A
We're
not
allowed
to
mutate
this,
because
when
you
ask
for
an
iterator
you're,
not
asking
for
a
mutable
one,
so
you
would
ask
for
a
mutable
one
by
using
the
item
function.
But
the
problem
is
our
model
right
now,
when
we
look
at
in
the
declaration,
definition
of
the
view
function,
we're
only
having
an
access
to
immutable
reference
to
worldview
to
our
model
and
that's
by
design
the
people
behind
anu
are
following
the
model
view
controller
pattern
and
you're
not
allowed
to
mutate
your
model.
In
the
view
function.
A
A
So
it's
going
to
be
cleaner
in
a
way
where
everything
that
is
related
to
modifying
our
model
is
going
to
be
in
the
update
function
and
everything
that
is
about
showing
it
is
going
to
be
in
the
view
function.
So
I'm
going
to
clean
my
view
code
so
that
it's
back
to
showing
the
ellipse
and
in
my
update
function,
I'm
just
gonna
ask
to
mutate
my
things
and
make
make
it
make
them
move
just
slightly
to
the
right
and
then
now
I
have
points
moving
to
the
right.
A
It's
super
boring
again
but
we'll
get
to
to
the
interesting
part,
and
I
hope
you
understand
why
rust
is
interesting
to
work
with,
because
it
will
put
a
lot
of
safety
checks
for
you
when
you're
writing
your
code.
So
let's
say
we
do
not
want
to
work
with
this
weird
slightly
displacement
to
the
right.
Let's
say
we
want
to
move
things
randomly,
so
I'm
gonna
grab
my
random
code
here
and
I'm
not
gonna
move
by
that
much
I'm
just
gonna
move
by
just
a
few
and
just
one
pixel
one
point
wise
per
step.
A
A
A
So
when
we're
talking
about
pure
randomness,
it's
not
really
interesting,
because
randomness
is
boring,
so
we
want
something
that
has
more
meat
than
just
pure
randomness
and
we're
going
to
use
for
this
noise
and
noise.
It's
basically
like
gold
in
form
of
a
mathematical
function.
So
I'm
going
to
define
the
noise
function
here,
I'm
going
to
use
protein
noise,
that
is
that
is
named
after
ken
perlin,
the
professor
at
the
nyu,
and
he
actually
won
an
academy
award
for
his
work
on
this.
A
So
I'm
adding
the
noise
to
my
model
and
since
noise
is
not
by
default,
included
in
the
scope,
I'm
just
putting
everything
that
I
need
in
scope
using
the
use
keyword.
So
now
I
have
noise
and
noise
is
a
mathematical
function
that
will
return
me
a
smooth
random
value
when
I'm
trying
to
ask
for
something.
A
So,
instead
of
moving
my
points
around
randomly,
I'm
gonna
move
them
along
the
value
of
this
noise
function.
That
is
there.
So
I'm
going
to
get
my
noise
generator
and
I'm
going
to
ask
for
the
value
of
the
noise
field
at
the
position
of
my
scene.
So
I'm
going
to
ask
to
create
a
new
vector
here
that
takes
the
position
of
my
things
and
since
I
want
a
two-dimensional
displacement,
I'm
going
to
use
three-dimensional
noise.
So
that's
a
trick.
A
You
can
always
get
interesting
results
because
you
have
more
dimensions
to
play
with
the
compiler
is
complaining
again,
because
the
noise
crate
that
nano
is
using
is
expecting
doubles
instead
of
floats.
So
this
is
going
to
be
dirty
so
put
on
me.
Excuse
me
for
doing
this
right
now,
but
for
the
sake
of
time,
I'm
going
to
do
the
dirty
fix
here
by
just
converting
everything
to
doubles
as
we
need
to
and
converting
them
back
to
float
afterwards.
A
So
now
I
should
be
getting
points
that
are
moving
not
completely
randomly,
but
just
along
this
noise
function
that
we
asked
for,
and
it
looks
the
same
so
this
is
a
huge
easy
to
make
a
mistake
in
the
beginning.
It's
because,
when
you're
dealing
with
noise,
noise
is
not
designed
to
work
along
huge
spaces,
noise
were
designed
to
work
along
very
small
spaces.
A
So
here,
when
we're
talking
about
the
range
of
positions
that
we're
looking
at
so
sure
is
going
over
the
wall
screen,
it's
too
big
noise
has
been
designed
to
work
with
very
small
ranges.
So
again,
I'm
gonna
do
a
very
crude
fix
to
scale
everything
down
to
something
that
works
with
the
noise
function
that
we're
using
and
then
suddenly
we
have.
A
If
I'm
not
on
the
first
frame
of
my
animation,
that
is,
if
I'm
not
starting
fresh,
I
will
not
erase
the
background
before
drawing
the
following
frame.
So
this
might
sound
complicated,
but
it's
really
easy,
I'm
just
just
drawing
over
the
previous
drawing
all
the
time.
So
suddenly
we
see
those
lines
that
are
moving
around
and
we
see
history,
we
see
the
past.
So
we
get
a
feel
about
the
what
was
happening
before
and
it
starts
to
look
interesting
as
an
image
by
itself,
but
the
animation
part
is
is
lost.
A
So
in
nanu
you
would
use
something
like
this
to
define
a
black
rectangle.
That
is,
if
you're,
following
along
I'm
using
a
very
transparent
black-
and
this
looks
like
this
now
so
I
am
drawing
over
my
animation
with
something
that
is
almost
black
all
the
time.
So
I
get
this
fade
to
black
effect
for
free.
A
Basically-
and
this
is
where
nanu
shines,
because
nanu
is
using
a
float
precision
for
colors,
but
not
for
the
wall,
color
itself
for
every
channel
for
each
channel
of
a
color
information,
you
have
a
floating
point
precision
all
the
other
frameworks
that
I
know
of
are
not
able
to
do
something
as
pure
as
this.
So
yeah
yeah
go
go
here
so
now
you
can
see
that
the
interesting
part
of
this
is
the
beginning.
A
I
hope
it's
not
that
choppy
on
your
on
your
side,
but
it's
really
showing
the
beginning
is
where
we
see
the
noise
and
getting
here
in,
and
that's
the
interesting
part,
so
we're
going
to
try
to
do
this
in
the
remaining
minutes
that
I
have
I'm
going
to
try
to
show
the
lines
and
not
just
the
actual
position.
So
I'm
going
to
change
my
things
here
to
not
be
just
one
point
going
to
be
a
list
of
points,
so
I'm
going
to
create
a
list
of
points
here
that
is
going
to
be
empty.
A
A
So
I'm
going
to
take
the
last
position,
it's
going
to
be
the
same
position
and
I'm
going
to
use
the
head
of
my
list
for
this
and
I'm
going
to
say
that
the
new
position
is
going
to
be
the
last
position,
plus
the
same
displacement
that
we're
using
and,
of
course
I
need
now
to
refer
to
this
last
position
and
not
the
position
of
my
thing,
and
I
also
need
to
push
back
my
new
position.
So
I'm
going
to
insert
it
at
the
end
of
my
list-
something
like
this.
A
So
what
I'm
doing
right
now
is
I'm
just
adding
this
new
position
to
the
list.
So
the
same
will
hold
the
gr
ever
growing
list
of
position.
So
I'm
going
to
represent
this
using
the
polyline
function
of
nano
that
is
designed
to
do
exactly
this.
So
it's
going
to
take
a
list
of
points
and
it's
going
to
show
it
to
you
so
excuse
my
pretty
fast
explanation
of
what
poly9
is
doing.
A
Poly9
wants
to
hold
the
positions,
so
you
cannot
actually
give
the
positions
and
of
the
things
directly
to
the
point,
because
rest
will
say:
no,
no,
you
cannot
move
things
around.
So
I'm
cloning
all
the
information
here
and
then,
if
I
try
to
render
this,
we
see
a
bunch
of
lines
that
are
being
drawn
on
the
screen
and
if
I
don't
stop
here,
you
might
guess
that
this
will
crash
eventually
because
I'm
just
adding
more
and
more
points
all
along
the
way.
But
this
is
interesting
because
we
see
the
structure
of
the
noise.
A
We
see
some
things
that
are
interesting.
We
start
to
see
where
the
noise
is
driving
our
points
around
and
it
gives
you
a
feel
about
the
structure
of
what
we're
using.
We
have
interest
points
and
everything,
so
I'm
going
to
do
one
final
trick
just
to
spice
things
up
and
I'm
gonna
speed.
Basically,
the
drawing
here
you
can
see
in
our
update
function
we're
just
going
one
step
forward.
A
I'm
gonna
say
screw
this:
let's
go
for
50
steps,
I'm
going
to
say
I
want
you
to
go
50
steps
forward
and
we're
going
to
draw
this
all
the
time
and
I'm
also
going
to
reset
my
thing
every
time
I'm
going
into
a
new
frame.
So
in
order
to
do
this,
I'm
going
to
clear
my
positions
list
and
I'm
going
to
add
a
new
position
at
random.
So
I'm
going
to
define
a
new
vector
and
I'm
going
to
use
the
same
code
that
I
was
using
to
create
the
things
in
the
first
place.
A
A
Suddenly
it's
going
to
be
completely
different.
We
have
a
grayscale
representation
of
our
noise
field
right
now
and
if
you
have
the
time
the
code
is
going
to
be
available,
of
course,
on
github,
please
try
to
execute
the
code
on
your
machine,
so
you
can
see
the
animation
in
its
complete
glory,
and
this
is
this
is
what
you
can
get
when
you're
trying
to
represent
something
as
complex
as
just
one
mathematical
field
along
the
way.
A
I'm
gonna
add
a
final
trick
just
to
convey
the
point
that
when
you're
working
with
creative
coding
or
something
like
this
you're
allowed
to
do
a
lot
of
weird
stuff,
that
might
not
make
a
lot
of
sense.
So
let's
say
I'm
gonna
change
my
parameter
here.
My
scale
parameter
here,
so
I'm
just
gonna
add
the
time
I'm
gonna
take
the
cost
of
the
time
I
need
to
use
doubles
because,
because
rust.