►
From YouTube: Processing in the browser - Lucky Nkosi
Description
At the core of user engagement and experience is the visual aesthetic of any software. While css, html and JavaScript give us the core tools we need to create our visuals, creating complex visuals encompassing geometrical features is often challenging for inexperienced developers; In comes the Processing Foundation with P5.js.
In this talk, we’ll be looking at a few ways visuals can influence and drive user decisions. This talk will introduce the audience to the Processing foundation’s P5.js library with a practical tutorial on how to create astounding visuals with ease and provide sources for further exploration of the library. If you’re interested in effective data visualisation, building video games, and creating interactive experiences in the browser, this talk is for you.
This talk was recorded at the Jozi.JS meetup group on 20 June 2019.
https://www.meetup.com/Jozi-JS/events/261100011/
Disclaimer: The opinions in this talk are those of the individual and do not necessarily represent those of this channel, the meetup group, or its sponsors.
A
Processing
in
the
browser
at
this
point,
you're
probably
wondering
who
on
earth
this
guy
is,
if
you
are
my
name,
isn't
Angela
King
go
see,
I'm
a
software
engineer
here
at
PVD,
I
work
with
Mike
and
Jerry
in
a
unit
called
ATC
I'm,
not
entirely
sure
what
we
do
on
paper.
They
say
we
do
research
and
development,
we
do
consulting
and
we
do
some
training
or
we
facilitate
something
called
learning,
but
they
haven't
fired
either.
One
of
us
yet
so
I
think
we're
doing.
A
Okay,
I
studied
adverts
and
because
I
seem
to
really
really
really
have
a
high
tolerance
for
pain.
I
went
back
and
studied
some
more
so
I'm,
currently
pursuing
an
honours
degree
in
game
design
from
Wits
University.
But
the
most
important
thing
for
you
to
know
about
me
is
that
my
twitter
handle
is
at
end,
like
e
underscore
cosy,
feel
free
to
follow
me.
Let
me
know
what
you
think
of
this
talk,
so,
let's
get
to
it
on
tonight's.
Show
we're
going
to
be
discussing
just
how
beautiful
these
slides
actually
are.
A
I
mean
just
look
at
all
these
colors
right.
We're
going
to
talk
about
the
importance
of
good
looks
we're
going
to
discuss
just
how
difficult
it
is
to
actually
get
good
looks.
What's
the
point
of
me
telling
you
all
of
this,
if
I'm
not
going
to
show
you
how
to
actually
get
good
looks
and
to
do
it
with
ease
right
last
definitely
not
least
I'm
going
to
tell
you
one
more
time
to
follow
us
on
Twitter
right,
because
that's
very
important,
let's
get
to
it.
A
How
beautiful
these
slides
are
so
I've
got
these
as
a
free
template
created
by
all
PPT
comp
on
free
PowerPoint,
template
design
com
feel
free
to
go
to
the
website
and
get
some
awesome
stuff.
I
decided
to
give
them
a
shout
out,
because
these
slides
up
beautiful
now
before
I
start
I
need
a
favor
from
all
of
you,
everyone
that
is
Twitter
while
I
speak
I'd,
like
you
guys
to
tweet,
but
specifically
tell
us
what
you
think
about
this
meet
up
tonight.
Much
thought
of
the
beer!
Don't
talk
about
the
pizza
issue.
A
Tell
us
what
you
thought
of
the
talks
and,
at
the
end
of
my
talk,
I'm
going
to
show
you
guys
something
really
really
awesome
with
all
of
your
tweets
and
all
of
your
tweets
remember
to
mention
hashtag
Josie
Jess,
you
can
mention
the
account
you
can
mention
me
as
well.
If
you
want,
but
don't
forget,
the
hashtag
and
I'll
show
you
something
really
awesome
right
at
the
end
see
now
you
want
to
stay
for
the
end
right.
A
A
That's
what
is
very
important
to
me
because
of
my
game
design
background.
If
you
ask
10
people
in
the
room,
what
gamification
is
chances
are
you'll
get
about
three
four,
maybe
five
different
answers
in
essence,
gamification
is
gamifying
processes
in
order
to
make
them
seem
like
fun
like
banking
right,
but
we
do
this
so
that
we
can
create
meaningful
engagements
with
the
people
who
use
our
systems.
We
do
this
so
that
people
can
come
back
and
use
our
systems
again
and
again,
so
that
we
can
make
more
money.
A
A
This
has
been
embraced
in
all
sorts
of
industry.
Education,
banking,
actually,
Peabody,
helped
one
of
the
banks
a
couple
of
years
ago,
design
a
kids,
banking
app.
It
was
actually
a
game
to
teach
kids
how
to
bank
and
manage
their
finances.
They
actually
even
used
a
game
development
engine
called
unity3d.
We
even
seen
this
in
the
entertainment
space,
traditional
entertainment,
like
films,
are
taking
game
development
elements
to
try
and
create
much
more
engaging
experiences.
A
Let's
talk
about
another
buzzword,
big
data,
I'm
sure
you've.
All
heard
a
lot
about
big
data,
and
you
all
know
what
it
is.
It
has
all
these
points.
The
key
point
for
me
is
the
value.
How
do
we
extract
value
from
all
this
data
that
we
have
being
presented
to
us?
The
one
thing
that
these
two
buzz
words
have
in
common
is
that
a
big
part
of
this
value,
be
it
from
a
game
or
the
process
of
gamification
or
bid
from
Big
Data?
A
Is
that
a
lot
of
it
hinges
on
what
your
user
ends
up
seeing
you
could
write
the
cleanest
most
efficient
code,
but
if
your
UI
is
crap,
people
won't
use
it,
and
the
system
that
isn't
used
is
a
failed
system,
because
we
build
software,
not
for
computers.
We
build
it
for
people.
So
take
a
look
at
this.
This
is
how
much
data
we
generate
in
a
day.
How
many
of
you
actually
read
the
slide
when
I
put
it
up.
A
A
Presenters
V
is
actually
very
important,
but
anyway,
mics
might
give
a
talk
at
the
last
year's
EJ's
about
what
should
the
web
do,
and
he
said
that
it's
our
responsibility
as
web
developers
to
start
thinking
about
these
things.
Where
do
we
want
to
see
the
web
going
while
we
do
that,
the
people
who
use
our
applications
on
the
web
have
already
decided?
Actually
they
want
the
web
and
the
browser
in
particular
to
do
everything
and
they
want
it
to
do
everything
now.
A
What
does
this
actually
mean
for
us
developers?
It
means
that
the
web
is
has
become
this
beast,
that's
more
than
just
about
transferring
files
from
one
computer
to
another
and
the
browser's
become
the
thing.
That's
so
much
more
than
just
a
way
of
viewing
the
files
that
you
have
on
your
machine.
It's
become
our
core
means
of
engaging
with
all
sorts
of
technology,
not
just
websites.
There's
a
fingerprint
scanner
on
your
phone
guess
what
users
want
to
use
it
on
your
browser?
A
A
There's
all
these
different
things
that
are
constantly
coming
up
in
the
tech
space
that
all
of
our
users
sitting
here
want
to
actually
do
it,
and
all
we
have
is
this
tool
the
leash
to
try
and
tame
this
beast
call
the
world
wide
web
and
that
tool
is
the
browser
and
we
need
to
make
use
of
it
to
the
best
of
our
ability
so
and
all
the
crap
comes
along.
We
need
to
clean
after
it.
A
A
You
can
start
protests
with
the
first
slide
and
you
can
let
governments
walk
over
people
with
this.
With
the
second
one,
this
is
presenting
the
exact
same
data.
All
they
did
was
have
a
different
y
scale
and
they're
painting
an
entirely
different
picture.
This
is
the
power
of
what
visuals
can
do.
Visuals
can
actually
drive
people
into
taking
actions
and
the
way
that
you're
presenting
it
can
drive
them
to
take
different
actions.
Take
a
look
at
the
stat
in
the
United
States
between
May
and
July
of
Samiha.
A
The
US
president
might
decide
to
curb
murders,
we're
going
to
ban
all
ice-cream
sales
right
because
of
the
data
that
was
presented
to
me.
So
us
as
people
who
are
creating
these
experiences
and
are
providing
this
data,
we
have
the
responsibility
to
make
sure
that
we
use
our
tools
for
the
better
for
the
better
for
best.
So
if
we
talk
about
people
in
the
finance
industry
and
maybe
some
about
business
analysts,
they
probably
use
Excel
spreadsheets
to
visualize
all
of
their
data
or
to
make
sense
of
it.
I
just
usually
secret.
A
A
Take
a
look
at
this.
This
is
not
an
autofocus
image
of
the
Mona
Lisa,
okay,
mass
crisis,
god.
This
is
actually
done
all
in
CSS.
This
is
rear-ended
in
CSS
and
I
then
took
a
screenshot
of
it.
See.
I
knew
that
some
of
you
wouldn't
believe
me
so
I've
got
it
running
over
here
and
you
can
see
all
of
the
CSS
on
the
side.
A
I'll
share
this
URL
with
you.
After
this
talk
and
once
I
get
back
to
my
slide
cool
right
now,
while
CSS,
HTML
and
JavaScript
are
the
tools
we
have
I,
don't
think
all
of
us
are
as
proficient
in
using
CSS
or
have
those
patience
right
now.
Imagine
for
younger
developers
who
are
coming
into
the
industry.
A
The
learning
curve
seems
to
be
so
high
or
so
steep
run
and
with
everyone
using
the
web
as
their
main
means
of
engaging
with
technology,
we're
going
to
get
more
and
more
developers
becoming
web
developers,
and
it's
our
responsibility
as
the
people
currently
in
the
space
to
make
sure
that
we
can
produce
enough
web
developers
in
comes
a
library
called
p5.js.
This
is
one
of
the
easiest
ways
that
I've
found
to
draw
stuff
on
the
canvas
to
create
images
and
to
really
make
things
look
good.
Those
good
looks
we
started
talking
about.
A
A
Yes
and
I
can
see
the
faces
backed
up,
2001
processing
was
created.
This
was
an
open
source
java
library,
because
people
in
2001
created
graphics
with
Java
and
C++
I
can
see
the
horror
on
some
of
your
faces
and
I
think
some
that
we
think
code
guys
actually
had
to
do
that
with
C,
but
anyway,
I
digress.
This
was
created
to
be
a
simple
or
to
create
simple
visuals.
A
Over
ten
years
later
they
realize
where
people
are
still
using
this
thing
and
people
have
been
contributing
to
it,
and
so
they
formed
the
processing
foundation,
which
was
charged
with
the
development
and
distribution
of
processing.
A
year
later
they
realized
that
wait.
Browsers
are
actually
big
and
very
important.
We
need
to
be
able
to
use
this
thing
in
the
browser,
and
so
they
created
processing
DOJ's,
which
is
actually
a
port.
A
So
people
would
write
java
code
and
then
they'll
use
regex
to
convert
that
to
JavaScript
and
then
run
it
right,
and
then
they
realized
that
JavaScript
developers
actually
love
the
divs,
and
you
know
the
AIDS
and
the
H
ones,
and
they
probably
hate
Java
right,
so
they
rewrote
it.
They
redid
the
entire
thing
in
actual
JavaScript
and
called
it
P
five
torches,
because
processing
was
such
a
long
word
right.
A
I
wish
I
was
a
smart
enough.
Is
it
scared
over
you
and
just
like
and
slides,
but
anyway,
let's
see
this
was
the
sacrifice
for
the
table
gods,
so
I'm,
good
cool.
So
let's
take
a
look
at
p5
DOJ's.
What
I
want
to
show
you
today?
It's
just
how
easy
p5
DOJ's
is.
If
you
go
to
their
website,
it's
actually
open
up.
A
A
So
I'm
going
to
delete
all
of
that,
because
I
promised
you
at
live
code.
Geez
shouldn't
have
done
that,
but
anyway,
so
I'm
going
to
create
a
new
sketch,
I'm,
sorry
for
shouting
so
sketch
dot,
HTML,
just
an
HTML
page.
Let's
start
with
something
very
simple:
let's
draw
a
circle
right
because
that's
such
an
easy
shape
to
draw
right.
Oh
all,
the
young
dive
guys
like
me:
oh
yeah,
yeah,
yeah,
Circle
Circle,
although
gasps
alike,
right
so
I'm,
so
quickly,
typing
death
right.
A
So,
as
you
can
see,
this
is
a
simple
HTML
page
which
has
a
canvas
right
because
we're
sketching
we're
going
to
use
the
canvas
and
I
get
that
canvas
by
ID
I
get
something
called
a
2d
context.
I
begin
a
path:
I
create
an
arc
with
some
numbers
in
it,
I
see
pi,
which
is
scary
and
then
because
circles
right
and
then
we
stroke
to
get
the
O.
So
let's
see
I'm
going
to
open
this
very
basic
HTML
page
and
we
have
a
canvas
with
a
circle.
Yeah.
A
How
easy
is
this
to
do
with
p5
torch
s?
It's
not
because
you
still
need
HTML
right.
So
there
we've
got
some
basic
HTML
stuff,
so
this
isn't
actually
p5
yet
to
prove
to
you
that
I'm,
not
tricking,
you
I'm
just
going
to
get
rid
of
the
entire
body
how's.
That
first
thing
we
need
to
do
is
we
need
to
add
our
p5
script.
Let's
see
if
I
can
find
where
it
is
nope
there
we
go.
P5
touch
s
just
imported
it
it's
over
there,
as
you
can
see
and
I'm
going
to
add
a
script.
A
Okay,
so
when
you
start
with
p5,
there
are
two
functions
that
you'll
almost
always
have.
The
first
is
called
setup
and
the
next
is
called
roll
setup
is
called
once
when
you
first
render
the
page.
So
that's
where
you
want
to
have
all
your
configuration
stuff
and
the
stuff
that
you
need
to
be
drawn
first,
the
stuff
that
never
changes
and
draw
gets
called
every
frame.
A
So
that's
where
you
generally
want
to
have
your
state
checks
and
stuff
that
changes
with
user
input
to
be
placed
if
you've
pulled
games
with
unity3d
you'll
recognize
this
sort
of
pattern,
I
think
the
start
and
update.
If
you've
worked
with
Arduino,
they
all
have
the
exact
same
thing.
They
will
have
I,
think
it's
setup
and
loop
if
I'm
not
mistaken.
So
all
we
do
here,
we
call
an
H
v
function
called
create
canvas
it
takes
in
the
position.
No
sorry
it
takes
on
the
size
and
the
renderer
show
you
what
I
mean.
A
If
you
do
this,
oh,
you
can
also
get
full
intellisense
of
p5.
That's
how
widely
used
this
library
is
when
it
works.
Ok,
cool!
So
you
can
see
your
with
your
height
and
the
renderer
that
you
want
to
use,
so
we're
going
to
use
the
default
2d
renderer
for
now,
and
all
we
have
now
is
a
canvas
because
you
might
not
believe
me
I'm
just
going
to
make
our
the
background
of
our
canvas
black.
A
A
Let's
add
some
events:
let's
create
a
paintbrush
we've
all
played
with
paint
right.
We
just
like
pick
a
brush
and
you
start
drawing
stuff.
So
you
still
do
paint
was
discontinued
at
some
point,
so
paint
woo,
add
3d
and
it's
a
new
system
right
cool,
so
they've
got
built-in
functions
to
to
pick
up
events
and
built-in
variables
to
pick
up
state.
So
we
can
literally
say
if
mouse
is
pressed.
A
You
can
see
that
this
was
created
for
designers
right
because
the
variables
make
sense,
it
doesn't
say,
m
underscore
and
all
sorts
of
stuff
right.
So
if
mouse
is
pressed,
we
want
to
let's
change,
colors
right
so
to
change.
Colors
you've
got
two
colors
on
your
screen
when
you're
drawing
you've
got
the
actual
outline
and
we
call
that
the
stroke
and
you've
got
the
filling
which
you
call
it.
The
fill
dam.
A
A
A
A
Right
doesn't
work.
Why
not
that's,
because
we're
only
drawing
our
circle
at
the
beginning,
so
we
have
to
move
this
into
our
draw
function
so
that
it
can
be
called
constantly
and
refresh
that
helps
right
and
you
can
see
that
when
I
click
it
changes
now,
if
I
wanted
to
create
paint,
all
I
have
to
do
is
say
that
I
want
this
to
be
drawn
at
the
position
of
my
mouse
refresh
this,
and
we
now
have
a
paintbrush
on
the
canvas,
but.
A
And
there
you
go,
we
don't
have
any
stroking
anymore,
quite
cool
right.
This
is
all
fun
and
games,
or
is
it
so
in
games
you
often
or
when
you're
creating
3d
experiences?
You
often
have
to
do
some
complex
rendering
and
lighting
is
one
of
those
really
difficult
and
expensive
things
that
you
can
deal
with,
so
we're
going
to
do
some
lighting.
Our
last
example
for
tonight
it's
going
to
be
some
really
really
really
complex
stuff.
We're
gonna
have
two
balls
they're
going
to
move
to
the
sides.
A
All
right,
then
we're
going
to
shine
a
light
in
between
them.
The
light
will
be
our
mouse
depending
on
where
the
mouse
is.
The
light
will
shine
differently
on
the
two
different
balls
cool.
So
let's
get
rid
of
this,
because
otherwise
the
core
I
prepared
won't
work,
cool,
so
much
code.
So,
as
you
can
see
already
doing,
is
we're
creating
a
canvas,
but
now,
instead
of
using
the
2d
renderer
with
we're
going
to
cheat
the
news
WebGL
right
and
then
when
I
make
the
background
black,
we
want
some
stroking
for
now.
A
So
we're
going
to
comment
that
out
and
we're
going
to
fill
it.
We're
gonna
use
a
fill
of
200,
which
means
whatever
we
draw.
That's
the
color
that
we're
going
to
be
using
I,
don't
know
what
200
is
it's
it's
it's
a
color.
By
the
way
you
can
make
this
RGB.
So
you
can
add
three
colors
here
and
it'll
actually
use
RGB
cool.
A
Now
our
draw
function,
every
frame
we're
going
to
calculate
the
direction
of
the
light.
Should
you
go
into
the
mat?
No,
it's!
Okay,
guys
cool
trust.
Me
I,
think
I'm,
an
engineer.
Sometimes
this
is
what
I
want
to
show
you
guys.
They've
done
a
lot
of
the
work
in
figuring
out
how
to
render
all
of
that
lighting
with
WebGL
and
with
p5.js
library.
This
one
line
will
create
our
entire
light.
That
is
all
we
need
for
the
light.
A
A
Check
that
out
and
because
we're
dealing
with
the
3d
object-
and
this
is
why
I
said
we
should
allow
stroking
woo,
the
lighting
is
bad
see
what
I
did
there.
You
can
see
all
those
tiny
triangles
that
actually
make
that
3d
like
object
right
that
give
us
that
view
of
a
3d
thing
and
all
you
have
to
do
to
remove
those
is
say
no
stroking
and
now
you've
got
these
smooth
surfaces
that
are
3d
object.
A
P5
touches
right,
so
they've
got
a
whole
range
of
utility
functions
that
they've
built.
That
will
allow
you
to
create
your
normal
native
elements,
such
as
your
divs,
your
images,
your
image,
tags,
sliders,
and
these
are
all
when
you
use
these
functions.
They
will
actually
generate
all
of
these
stuff
that
we
usually
work
with
on
a
daily
basis
as
developers
you
can
pick
up.
Events
like
Mouse
released
double
clicked
right,
that's
all
built
in
for
you.
You
can
also
have
stuff.
A
The
world
feels
to
show
you
guys
the
power
of
this
library,
I
just
navigated
to
a
website.
It's
on
localhost
I've
had
a
server
running
on
my
machine
throughout
this
talk.
This
I
built
this
sometime
last
year
with
p5
touch
s
right
and
what
this
does
is
based
on
what
you
type
in
here.
It'll
pull
up
the
top
100
treats
perform
sentiment
analysis
on
each
one
of
them,
determine
where
the
person
that
teacher
this
was
from
and
then
tell
you
how
that
country
feels
about
the
topic.
A
A
Now
check
this
out
guys
now
you
can
do
some
really
really
powerful
things
with
p5
touches,
so
this
club
literally
just
keep
rotating,
to
show
you
what
the
world
feels
and
you
could
subscribe
to
the
Torah
API
to
constantly
get
updates
as
people
treat.
So
you
could
pull
this
as
a
as
a
real-time
monitoring
tool
for
how
the
world
feels
about
you
or
your
topic.
So
if
we
go.
A
A
But
so
to
cover
tonight's
show,
we
spoke
about
how
good
these
slides
look.
We
spoke
about
the
importance
of
good
looks.
We
spoke
about
just
how
difficult
getting
those
good
looks
is,
as
we
saw
the
Mona
Lisa,
and
then
we
saw
how
to
get
them
with
p5
touch.
S
also
follow
us
on
Twitter.
Thank
you
very
much.