►
From YouTube: Maslow's Particle System - Matt Hayes, Hash
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
Hi
hello,
thank
you
for
coming
to
my
talk,
maslow's
particle
system.
It's
gonna
be
a
little
bit
about
Abraham,
Maslow,
pictured
here
and
a
lot
about
particle
systems.
You
probably
know
Abraham
Maslow
from
his
number.
One
smash
hit
the
hierarchy
of
needs,
but
he
also
has
this
absolute
banger.
Maslow's
hammer
also
sometimes
called
the
law
of
the
instrument.
You've
probably
heard
it
paraphrased
when
all
you
have
is
a
hammer.
Everything
looks
like
a
nail,
but
this
full
quote
here
is
from
this
book
the
psychology
of
science.
A
It's
a
truly
lovely
book
in
which
he
makes
a
kind
of
a
plea
to
the
psychoanalytical
community
for
a
more
holistic,
more
humanistic
approach
to
the
cycle,
psychoanalytical
project,
but
also
to
science
in
general,
I
think
and
I'm
gonna
read
this
little
excerpt
that
I
think
is
kind
of
eerily.
Prescient
I
have
been
disturbed
not
only
by
the
scientists
and
the
dangers
of
their
denial
of
human
values
in
science,
along
with
the
consequent
amoral
technologized
of
all
science.
A
So
that
is
a
very
lofty
and
philosophical
introduction
to
what
is
really
going
to
be
a
pretty
silly
talk
about
using
particle
systems
as
a
way
of
getting
a
very
high
performance,
very
natural
feeling
interfaces
and
also,
hopefully,
bringing
some
joy
to
your
users.
So
this
is
me
my
name
is
Matt
Hayes.
You
can
find
me
as
mystery
command
on
the
Internet
pretty
much
everywhere.
My
pronouns
are
he/him
and
the
slides
will
be
available
online
and
the
repository
for
all
the
code
that
we're
going
to
look
at
will
also
be
available
online.
A
So
this
is
my
little
sort
of
chat,
bot,
messenger,
app
I
can
type
a
message
here
and
it
shows
up.
I
can
tell
it
to
say
hello,
and
it
will
say
hello
back,
I
can
say
b-movie
and
it
will
begin
reciting
the
b-movie
one
line
at
a
time,
every
two
seconds,
I'm
just
going
to
use
this
to
sort
of
fill
the
window
with
some
messages.
I
can
also
say:
congrats
and
I
get
this
cool
fireworks
particle
effect
and
then,
if
I
send
it
some
love
I
get
this
other
cool
sort
of
sentiment.
A
You
know
like
what
you
would
see
if
you're
live-streaming
a
Facebook
event
or
something
like
that,
so
really
sure
what
to
call
it
we'll
get
to
that
later.
One
thing
I
do
want
to
point
out
here
is
that
this
scrolling
window
of
messages
is
its
own
kind
of
particle
system,
where
I'm,
using
the
bounds
of
the
window,
to
filter
messages
that
get
shown
or
not.
A
This
is
sometimes
referred
to
as
virtualization
or
when
doing
but
modeling
it
as
a
particle
system,
gives
us
a
pretty
efficient
and
like
easy
to
reason
about
way
of
approaching
the
problem.
So
that's
what
we're
gonna
build
us,
we're
gonna,
sort
of
tour
and
just
get
back
to
my
slides
here,
nice.
A
little
bit
of
history
about
this
talk,
the
reason
that
I
took
inspiration
from
Maslow's
hammer
as
is
sort
of
a
little
self-criticism.
I've
been
thinking
about
particle
systems
and
using
and
reusing
them.
Since
some
time
around
2007
2008
I
saw
sevlie
de
Lisle.
A
Give
this
talk
a
s3
particles,
a
thousand
percent
extra
free
and
I
think
it
was
flash
belt
in
2008.
I
was
recently
out
of
art
school
and
had
found
my
way
into
the
advertising
world
and
was
building
a
lot
of
banner
ads
and
micro
sites
and
looking
for
ways
to
add
this
pop
and
pizzazz-
and
this
was
really
inspirational
to
me,
just
as
like
a
kind
of
clean,
clear,
concise
way
of
organizing
the
problem.
A
The
first
implementation
I
ever
did
was
an
ActionScript
class
called
bedazzler
and
what
it
would
do
is
take
a
color
and
a
time
duration,
and
it
would
just
sort
of
scan
the
Flash
movie
for
pixels
of
that
color
and
then
put
a
little
sparkle
on
them
and
kind
of
bedazzle
it.
For
some
silly
banner
at
I
gave
a
talk
about
the
similar
kinds
of
things.
A
This
was
more
sort
of
canvas
based
and
just
looking
at
how
to
break
up
some
of
the
some
of
the
parts
of
these
kinds
of
systems
in
4j
s
in
2016,
I
was
working
at
Yahoo
and
then
in
2017.
I
was
working
at
tumblr
and
I
got
the
opportunity
to
give
another
version
of
this
talk
at
Liberty
j/s,
where
I'd
had
a
little
bit
more
sort
of
practical
experience.
A
Putting
some
of
this
stuff
to
work
in
some
experimental
UI
for
tumblr
in
that
talk
is
the
first
time
I,
really
kind
of
introduced
sort
of
more
practical
applications.
Some
of
the
feedback
I
got
from
the
first
talk
was
it
was
really
fun,
but
I
need
to
like
do
work
so
in
this
second
iteration
I
focused
a
lot
on
a
Google
developers,
article
called
complexities
of
an
infinite
scroller,
where
I
kind
of
looked
at
it
as
a
one-dimensional
particle
system
and
that
same
kind
of
the
inspiration
from
that
is
also
in
this.
A
This
app
that
we're
gonna
tour
and
then
late
last
year.
Actually,
after
the
Liberty
j/s
talked
some
feedback,
I
got
was
I,
think
you're
kind
of
building
up
towards
an
entity
component
system,
and
that
really
set
me
off
in
the
direction
of
entity
component
systems,
unity,
the
game
engine
came
out
with
a
thing
called
project,
tiny
and
I.
A
The
first
is
just
a
handful
of
interfaces,
the
main
one
being
the
the
particle
right,
I'm
going
to
use
valet
integration
if
you've
ever
like
looked
into
physics
of
any
kind,
it's
just
a
way
of
modeling
physical
behavior
without
needing
to
track
velocity
and
acceleration.
So
you
you
wind
up
mostly
doing
addition
and
subtraction.
So
it's
a
little
bit
cheaper.
A
It's
not
quite
as
realistic
as
toiler
or
semi,
implicit,
euler's,
cheap
and
very
stable,
so
makes
it
a
good
candidate
for
for
these
kinds
of
like
fun,
silly
particle
systems,
because
it's
using
vectors
for
position
in
previous
position.
We
know
the
Veck
interface
and
the
field
here
is
a
little
bit
hand
wavy.
What
I
really
need
is
some
kind
of
like
world
state
or
global
context.
A
There
are
sort
of
conditions
under
which
you
want
to
emit
a
new
particle
and
conditions
under
which
you
want
sort
of
deactivator
or
clean
one
up,
and
those
generally
depend
on
some
sort
of
world
contexts.
You
might
in
some
other
implementations,
see
this
described
as
a
world
or
as
a
universe
or
as
global
state.
Then
we
have
an
object,
pool
and
a
property
initializer.
A
This
we
will
get
to
you
sort
of
midway
through
the
tour
of
the
code,
but
it
is
just
a
sort
of
more
memory
efficient
way
of
keeping
a
keeping
track
of
a
fixed
size
list
of
particles
and
recycling
them
when
we're
done,
instead
of
sort
of
just
throwing
them
away
and
letting
the
garbage
collector
clean
them
up
and
then
effects
and
the
command
pattern.
The
command
pattern
comes
from
design
patterns,
the
Gang
of
Four
book
in
the
book.
A
They
call
it
a
a
reified
method,
call
they're
kind
of
approaching
it
from
a
Java
or
C++
sort
of
background,
and
in
JavaScript
all
functions
are
reified.
We
have
these
sort
of
first-class
functions,
so
really
the
command
pattern
here
is
just
functions
that
we're
gonna
pass
around
callbacks.
Essentially,
so
this
example
is
an
update
er,
which
is
you,
which
is
basically
an
implementation
of
that
ver
la
integration
scheme.
A
We
get
the
current
velocity
by
subtracting
the
previous
position
from
the
current
position
and
we
add
the
current
velocity
to
the
current
position
that
to
the
current
position
to
get
the
next
position,
we
cache
the
old
position
and
move
on
and
my
actual
implementation,
there's
sort
of
a
gravity
vector
that
we
also
add
in
there.
The
two
other
kinds
of
effects
that
we're
really
going
to
make
use
of
here
are
kind
of
create
or
activate
effect
and
a
remove
or
a
deactivate
effect,
and
we'll
see
that
in
a
minute.
A
So
let's
look
at
some
code
if
I
check
out
one
dot.
Oh
I
really
just
want
to
show
you
that
this
is
a
pretty
vanilla,
create
react,
app
setup
I'm
using
the
typescript
template.
Oh
and
I
am
adding
some
semantic
reliefs
related
stuff
just
so
that
I
can
get
these
these
releases
as
tags
in
github
and
I
get
this
nice
change
log
that
uses
my
commit
messages
to
sort
of
move
things
along,
but
other
than
that.
It's
it's
pretty
much
straight
up,
just
to
just
a
react.
A
A
A
A
That
kind
of
represents
the
window,
and
here
here
you
see
the
actual
sort
of
filtering
right,
so
we
have
a
kind
of
an
update
effect,
that's
being
called
as
part
of
this
onscroll
event
whenever
the
whatever
the
messages
window
Scrolls-
and
we
have
this
kind
of
cleanup
effect
happening
here,
which
is
just
really
just
this
messages
that
reduce
that
filters
out
messages
that
are
that
have
been
rendered
but
are
now
outside
of
the
windows
bounce.
So
moving
on,
if
I
go
to
1.4,
you
can
see
where
I
am
implementing
this
fireworks
thing.
A
So
here,
I
have
a
new
state.
Key
called
is
showing
fireworks
and
it
just
conditionally
renders
this
fireworks
component
the
fireworks
component.
If
we
look
all
the
way
down
at
the
render
is
a
canvas
and
if
we
just
quickly
look
at
the
CSS,
it
starts
out.
I
had
opacity
zero
and
has
an
opacity
transition
of
0.4
seconds
or
400
milliseconds.
That's
going
to
come
in
handy
for
transitioning
in
and
out
when
we
render
this
fireworks
thing
yeah,
so
there's
an
effect
that
fires
the
first
time
it
renders
right.
A
It's
got
no
dependencies,
it
just
gets
a
ref,
it
just
grabs
the
canvas
ref
and
then
creates
a
state
variable
for
the
rendering
context.
It
also
does
measurement
and
width
stuff
and
then
sets
the
opacity
to
once
so
0.4
seconds
after
its
rendered.
It
is
fully
opaque
and
then
this
effect
fires
when
and
the
context
changes,
and
it
really
sets
up
our
frame
handler.
So
we
just
kind
of
step
through
this.
We
capture
the
frame
ID
so
that
we
can
cancel
it.
A
A
Here
you
can
get
with
option
P,
it's
great
I
love
it!
Here's
our
particles
array!
This
is
pre,
object,
pool
optimization!
It's
just
a
list.
We
have
some
some
configuration
state
here,
a
P
function
which
generates
a
new
particle
or
emits
a
new
particle,
some
vector,
math
stuff,
an
update
error,
which
is
the
Verl,
a
integration
thing,
I
described
and
a
render
call
which
draws
them
into
the
canvas
context.
A
If
we
look
at
that
do
I
say
congrats
yeah,
it's
okay,
I
mean
I,
think
this
is
sort
of
as
far
as
I
can
push
it
with
the
performance
characteristics.
We
have
as
you'll
probably
note
here,
we're
just
creating
new
objects
every
time
and
we're
in
the
sort
of
create
emit
sort
of
step.
We
are
just
pushing
them
on
to
this
list
and
then
we're
pushing
the
ones
we
want
to
keep
on
to
a
new
list
and
throwing
the
whole
list
and
and
everything
we
didn't
want
to
keep
way.
A
Yeah
so
in
1.5
I,
add
a
similar
kind
of
a
sentiment
again.
I
didn't
wasn't
really
sure
what
to
call
it
and
it's
very
similar
to
the
fireworks
display.
I
guess:
let's
look
at
this
too,
because
we've
just
made
some
updates.
So
so
here
I've
moved
some
of
the
interface
stuff
out
into
a
little
Lib
folder,
so
I
can
focus
on
just
the
sparks
and
particle
effect
here.
I.P
has
become,
create
spark
and
I
have
an
update,
spark
and
a
render
spark
and
then
I
moved.
A
These
create
many
kind
of
functions
into
their
own
functions,
but
it's
it's
pretty
much
just
like
moving
it
out
of
out
of
being
in
line
and
in
the
frame
callback.
So
so
yeah
here
you
see.
The
kind
of
setup
here
is
the
create
render
and
remove
some
optimizations
right.
That
are
kind
of
obvious
at
this
point
is
that
each
of
these
do
something
with
many
calls
is:
is
iterating
over
a
list
every
frame.
A
In
fact,
the
render
sparks
is
iterating
over
the
entire
list
and
then
then
we're
reducing
over
the
entire
list
in
the
very
next
call,
and
if
we
look
at
the
sentiment
thing
that
lets
us
get,
that
part
effect.
It's
a
very
similar
setup
right,
it's
a
lot
of
copy/paste,
but
we
have
sort
of
unique
opacity
and
scale
properties
on
the
on
the
heart.
A
So
this
sort
of
limited
in
terms
of
the
number
of
particles,
the
effect
and
the
performance
I.
If
we
sort
of
throttled
this
up
very
much
from
where
it
is,
you
would
see
a
significant
amounts
of
sort
of
jank
and
lag
in
the
system
whenever
the
garbage
collector
kicks
in.
So,
let's
see
if
we
can
clean
that
up
here,
let's
look
back
at
our
our
fireworks
here.
A
So
now,
inside
of
our
frame
handler,
we
have
a
single
spark
stat
for
each,
so
we're
only
going
to
loop
over
the
list
of
sparks
once
and
as
a
matter
of
fact.
If
we
are
looking
at
a
spark
that
is
currently
not
active
and
we
should
emit,
we
will
do
the
kind
of
activating
step
and
otherwise
we'll
bail
early,
and
then
we
do.
A
This
is
kind
of
the
new
deactivator
or
the
remover
step
and
if
we've
deactivated
a
spark
in
this
step,
we're
just
going
to
return
so
that
we
avoid
the
update
and
render
steps
and
kind
of.
Similarly,
in
the
sentiment
thing
we're
just
going
to
loop
once
over
all
of
the
hearts
and
bail
as
early
as
possible
throughout
and
I
think
also
at
this
point
yeah
we
have
the
pool.
So
if
I
go
back
here,
I've
moved
the
particles
out
to
their
own
module,
so
they
kind
of
have
their
own
domain.
A
So
you
see
here,
we
have.
The
hearts
are
a
pool
of
heart
interfaces.
There
is
a
fixed
number
of
50,
they
get
their
UUID
once
at
the
beginning
and
it's
kind
of
preset
their
values
and
then
the
activate
and
update
step
are
really
what
kind
of
like
resets
them
at
the
beginning.
You
know
if
they're,
if
they're
sort
of
moved
out
of
the
frame
they
get
become
inactive
and
eligible
for
redrawing,
and
then
the
update
step
adds
gravity
and
moves
everything
along
a
similar
set
up
in
the
fireworks
display.
A
A
You
see
we're
not
getting
too
much
jank
at
all
and
I'm
running
a
screen
recorder.
So
this
will
like
a
lot
going
on
and
it's
highly
amenable
to
kind
of
tuning
to
whatever
performance
characteristics
you
might
be
targeting
so
I.
Think
1.7
is
where
I
add
the
b-movie
enhancement
and
I'm
actually
I
fixed
a
couple
bugs
this
morning.
So
let
me
check
out
my
extra
credit
branch
and
now
we're
we're
back
at
the
kind
of
full
full
featured
app.
A
And
we
get,
you
know
pretty
solid
performance
with
just
a
little
bit
of
a
little
bit
of
organizing
our
code
and
in
a
sort
of
set
of
particle
system
like
patterns,
okay,
back
to
slides,
we
are
almost
so
we're
to
go
from
here,
as
I
mentioned,
we're
creating
a
lot
of
vectors.
Those
vector
math
operations
are
immutable,
so
they're
returning
completely
new
vector
objects.
Every
time
I
run.
It
might
be
an
optimization
to
create
a
pool
of
vectors
and
do
a
similar,
activate/deactivate
sort
of
thing.
A
An
optimization
I've
made
in
previous
incarnations
of
this
of
this
presentation,
which
is
kind
of
overkill,
for
what
we're
doing
here
is
a
fixed
time
step
a
fixed
time
step
will
let
you
split
the
update
and
the
render
steps
from
each
other
make
it
so
that
the
update
step
can
kind
of
play
catch-up
if
the
render
step
takes
too
long,
which
means
that
the
animation
is
smooth,
even
if
the
rendering
is
not
yeah.
You
can
ask
me
more
about
that.
A
If
you
have
questions
another
thing,
that
would
be
really
interesting
to
me
to
explore
and
I'm
still
kind
of
working
on,
is
message
passing
and
how
you
do
kind
of
interactivity
and
events
in
in
a
system
like
this,
especially
as
it
broadens
out
into
an
entity
component
system
high-level
overview
of
what
any
component
system
means
is.
If
we're
thinking
about
particles
as
kind
of
rows
in
a
in
a
table
like
one
column,
is
the
exposition.
One
column
is
the
Y
position
when
column
is
previous
X,
previous
Y,
active
and
so
on.
A
An
enemy
component
system
would
be
a
way
of
organizing
the
code,
so
you're
dealing
with
columns
and
kind
of
running
almost
like
queries
on
this
database
of
particles
to
get
a
certain
set
of
like
columnar
records,
and
it
is,
it
is
very
efficient
from
a
memory
layout
standpoint
might
be,
might
be
neat
to
explore
in
this
sort
of
virtual
machine.
That
JavaScript
gives
us
also
I
think
this
is
functional.
A
You
might
have
noticed
that
a
couple
of
instances
were
passing
a
particle
instance
and
like
some
extra
state,
along
whether
it's
the
field
or
the
rendering
context
that
is
starting
to
feel
to
me
like
this
reader,
a
monad
pattern.
Functional
programming
is
very
new
to
me.
As
I
mentioned,
I
came
from
art
school,
so
I
have
a
pretty
non-traditional
path
into
engineering,
but
a
one
really
exciting
possibility
is
that
if
you
have
a
functional
system
that
is
associative
and
closed
over
composition,
it
is
parallelizable.
A
I
maybe
we
could
push
all
these
particles
into
multiple
workers
and
just
have
them
emit
sort
of
operations
or
positional
updates,
or
do
something
like
that
to
you
know,
run
potentially
you
know
ten
times
more
or
something
like
that
and
then,
similarly,
on
the
rendering
side
right,
where
the
real
expense
there
is
the
draw
calls
thinking
specifically
of
the
fireworks
display.
It
would
be
a
cool
optimization
if
we
could
batch
all
of
the
particles
of
one
color
draw
their
rectangles
and
then
fill
one
time,
I
think
that's
it
and
finally,
black
lives
matter.
A
It
would
be
weird
and
maybe
even
irresponsible,
to
start
a
talk
with
the
humanization
of
science
and
Abraham
Maslow
and
not
in
these
unprecedented
times
mention
that
black
lives
matter.
If
you
find
yourself
thinking,
please
keep
politics
out
of
JavaScript.
I
have
to
say
that
silence
is
also
a
form
of
political
speech
and
that
inaction
is
action
in
the
off
chance
that
me
talking
about.
It
is
the
thing
that
pushes
you
over
the
edge
into
action,
the
equal
justice
initiative
seems
great
and
they
accept
recurring
contributions,
so
you
can
set
up
a
monthly
donation.
A
Black
lives
matter
card
on
black
lives
matters
card
are
both
great
highly
circulated.
Just
in
case
you
haven't
seen
them.
This
Twitter
thread
from
Victoria
Alexander
is
a
sort
of
anti-racist
reading
list
broken
up
into
beginner
intermediate
special
topics.
Biographies
I
mean
it's
so
stupendous
list.
There
I've
read
some
of
those
books
and
they
really
moved
me
and
I
added
all
the
rest
of
them
to
my
reading
list.
On
a
more
personal
note,
this
dismantling
racism
org
has
a
page
on
white
supremacy
culture.
If
you
like
me,
grew
up
in
an
almost
exclusively
white
community.
A
Maybe
rural
or
suburban,
maybe
in
the
Midwest
and
remember
wondering
well
what's
what's
my
culture,
I
I
regret
to
inform
you
that
there
is
a
strong
chance
that
at
least
part
of
your
culture
is
white,
supremacy,
culture
and
I
highly
encourage
you
to
do
some
soul-searching
about
that.
And
finally,
if
you're
into
indie
games,
Humble
Bundle
is
doing
a
fight
for
racial
justice
bundle
100%
of
proceeds
go
to
some
great
charities.
A
I
have
no
affiliation
with
Humble
Bundle
whatsoever,
I
just
like
indie
games
and
think
it
would
be
cool
if
we
lived
in
a
just
society.
That
is
my
time.
My
name
is
Matt.
Hayes
here
are
the
slides.
Here's
the
repo,
if
there
is
anything
I
can
do
I
mean
I
kind
of
only
know
JavaScript,
but
if
I
can
review
your
code
or
make
some
kind
of
connection
for
you,
I'm
happy
to
try
and
help.
Thank
you
very
much
and
I
look
forward
to
the
rest
of
the
conference.
I
hope
you're
having
a
great
one.