►
From YouTube: Abstract sketches with P5.js - GitHub Universe 2020
Description
Presented by ilithya, Digital artist, creative developer, designer, Independent
Get started with P5.js while making a minimalistic abstract sketch using bits of generative art, plus tips on how to make your sketch interactive with a computer mouse or mobile tap. If you want to follow along, consider setting up p5.js with an editor on your own computer in advance of the tutorial: https://p5js.org/get-started/#settingUp
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
Hola
welcome
to
astra
sketches
with
p5s.
My
name
is
elitia
and
I'm
a
digital
artist,
creative
developer
and
designer.
Today,
I'm
going
to
help
you
get
started
with
the
p5.js
library
as
we
make
an
interactive,
minimal,
astra
sketch
of
a
github
universe.
Let's
get
started
when
I
make
digitalrt
an
idea,
not
always
falls
from
the
sky
often
times
browsing
for
inspiration
is
always
a
big
help.
I
wanted
us
to
create
a
sketch
inspired
by
origami
art
and
stop-motion
animation,
which
is
one
of
my
favorite
things
to
do
with
p5s.
A
A
Then
we
have
an
image
with
origami
figures
for
the
ones
who
don't
know
what
origami
is
it's
the
art
of
paper
folding,
as
you
can
see
here
and
lastly,
we
have
a
stop-motion
animation
example,
where
we
see
objects
moving
in
small
increments
and
being
captured
one
frame
at
a
time
we'll
do
something
similar
when
we
animate
our
sketch.
Let's
put
our
inspiration
all
together
and
start
sketching.
We
have
a
short
amount
of
time
for
this
little
tool,
so
I'm
not
gonna
go
into
that
with
the
code
today.
A
So
if
you're
here
and
are
new
to
javascript
or
never
used
it
before,
don't
worry
I'll
be
sharing
the
resources
of
this
short
tutorial
at
the
end.
So
you
can
work
on
your
sketch
at
your
own
pace.
Grab
your
favorite
code,
editor
on
your
computer
or
online
code
editor
and
let's
start
setting
up
our
project,
go
to
p5js.org
and
click
on
the
link,
get
started
scroll
down
until
you
find
the
downloading
a
copy
of
the
p5.js
library
or
using
a
hosted
version.
A
If
you're
working
locally,
you
can
go
either
way
if
you're
using
an
online
code.
Editor.
Probably
the
best
way,
is
to
use
the
link
of
the
cdn
of
the
library
I'm
using
codepen,
which
is
an
online
code
editor.
So
I'm
going
the
cdn
way
and
make
sure
to
link
the
library
within
a
script
tag
inside
the
body
tag
at
the
bottom
of
the
body
in
your
html.
A
If
you
are
relatively
new
and
don't
know
about
editors
or
online
code
editors,
you
can
use
one
from
p5.js.
So
if
you
go
to
the
home
page
click
here
on
editor,
and
then
you
will
find
this.
Let's
start
coding.
I've
added
some
basic
css
for
us,
because
that's
gonna
help
us
so
that
the
canvas
that
is
going
to
be
rendered
via
p5.js
to
create
our
sketch
doesn't
have
any
weird
margins
or
patterns
overflowing
and
also
I've
added
my
favorite
color.
A
As
a
fallback
in
our
javascript
file,
I've
commented
the
plans
for
sketch
today
we're
going
to
start
by
defining
some
global
variables.
Then
we're
going
to
make
a
custom
mold
for
a
space
plan
because
in
our
github
universe,
anything
is
possible
and
I
wanted
us
to
have
some
space
plans
we're
going
to
have
more
than
one
so
that
it's
going
to
be
very
useful.
Then
we're
going
to
draw
our
github
universe
with
those
plants
and
we're
gonna
have
a
moon.
Afterwards.
A
We
will
make
our
little
sketch
interactive
by
adding
some
stars
and
galaxies
on
mouse
over
and
we
will
animate
such
universe
and
have
the
possibility
to
stop
and
play
such
animation
with
a
canvas,
click
or
mobile
touch.
Let's
first
declare
global
variables:
we're
going
to
need
a
background,
color
a
shape,
color
and
a
stroke
color.
As
you
can
see,
you
can
declare
the
colors
be
a
hex
value
or
color
name
or
even
rgb.
Please
feel
free
to
use
any
colors
as
you
like
and
change
this.
A
If
you
want
now
we're
going
to
need
as
well
as
shapes
as
variable,
this
is
going
to
be
useful
because
once
we
start
drawing
our
sketch
and
we
want
to
make
the
elements
a
bit
smaller
or
bigger,
we
can
always
come
up
to
this
variable
and
resize
everything.
Another
two
valuable
variables
that
are
gonna
serve
us
are
these
ones
that
I
created
and
call
them
shape
gap
x
and
check
back
up
y.
These
two
variables
are
going
to
help
us
to
achieve
the
origami
effect
of
paper
folding.
A
A
A
We
are
gonna.
Add
this
function
just
to
make
sure
that
once
we
have
our
sketch
here,
we
will
be
able
to
resize
everything
and
everything
is
going
to
be
resized
automatically
for
us
we're
going
to
create
now
or
customer
for
space
plans
we're
going
to
do
that
via
javascript
classes.
If
you
don't
know
what
javascript
classes
are,
I
recommend
visiting
the
mdm
web
docs
to
learn
how
classes
in
javascript
work
our
javascript
class
is
going
to
be
called
plant.
As
you
can
see,
your
class
is
broken
into
three
sections.
A
The
constructor
method
is
going
to
allow
us
to
customize
each
plan
by
choosing
a
leaf
size,
a
leaf
count.
How
many
leaves
do
we
want
that?
Our
plant
has
and
a
position
on
the
x
axis.
Then
we
have
two
functions
that
I
created
for
us
one.
I
call
it
spot
because
it's
going
to
help
us
to
find
a
spot
for
a
plant
on
the
ground
on
the
x-axis
and
the
second
function
that
I
created
for
us
is
the
one
that
is
going
to
create
our
plan.
A
There
are
four
functions
in
our
class
that
we
didn't
create
that
come
from
p5.js.
The
first
one
is
the
translate
function.
This
one
is
allowing
us
to
move
an
element
in
the
x
and
y-axis
and
we're
not
using
the
third
value
set
because
we
are
not
drawing
in
3d,
but
in
2d
the
other
one
is
the
triangle
function.
This
is
allowing
us
to
draw
a
triangle
via
the
canvas
happy
by
entering
the
parameters
of
the
size
of
the
triangle.
A
I
already
did
the
math
for
us
and,
as
you
can
see,
I
drew
two
triangles
because
each
plant
is
gonna
have
two
leaves
and
it's
gonna
expand
vertically
to
choose
the
size
of
the
plant
depending
on
the
leaf
count.
The
other
two
functions
from
p5.js
that
I'm
using
is
push
and
pop
and
we're
gonna
need
those,
and
I
will
explain
that
later.
Let's
draw
our
first
plan
into
our
sketch
by
using
the
function
draw
from
p5.js.
A
As
you
can
see,
it's
going
crazy
because
the
function
draw
is
iterating
several
times
and
in
order
to
have
only
one
plant
we
can
add
a
background
color
and
then
each
iteration
is
not
only
going
to
draw
the
plan,
but
it's
also
going
to
draw
the
background
and
it's
going
a
little
bit
too
fast
to
my
taste,
so
we're
gonna
go
back
to
the
setup
and
tweak
the
frame
rate.
Normally
this,
the
default
frame
rate
from
p5.js
is
30,
so
we
lower
it
to
four,
and
now
we
have
this
top
motion.
Animation
effect.
A
I
talked
about
in
our
mood
board.
Also,
you
can
already
see
that
our
plan
has
this
folding
paper
effect.
Looking
like
origami-
and
it's
in
here
where
you
can
customize,
for
example-
maybe
you
actually
don't
want
to
have
any
color
in
your
plan.
Maybe
you
only
want
the
wireframe
so
then
there's
this
function
from
p5.js
called
no
fill.
A
Maybe
you
want
to
use
another
fill
color
the
default.
One
is
white,
I
also
had
white,
but
maybe
you
had
green,
and
this
is
where
you
can
change
it.
For
example,
if
I
were
to
change
this,
to,
I
don't
know
eight
nine
seven
another
hex
value
here,
you
will
see
that
it's
gonna
change
to
this
color
greenish
that
I
was
talking
about
and
now
also
you
can
decide.
A
If
maybe
you
don't
want
a
stroke,
for
example,
and
you
maybe
you
want
to
only
have
your
plants
feeling
but
without
stroke
and
the
stroke
color
can
also
be
customized
is
the
same.
The
default
is
black,
but
if
you
wanted
it
to,
for
example,
make
it
blue,
you
could
totally
change
the
variable,
and
now
we
have
a
different
stroke.
So
just
come
back
to
your
variables
and
change
and
adapt
as
you
wish,
and
also
the
stroke
white
you
can
choose.
A
You
can
see
that
you
can
choose
how
tall
you
want
your
plants
to
be
and
how
wide
the
leaves
or
how
thin.
I
also
wanted
us
to
have
a
moon
in
our
universe,
so
we
do
that
via
the
circle
function
from
p5.js,
and
I
created
eight
circles
to
represent
the
real
eight
moon
faces
via
the
stop
motion
animation
that
we
have
going
on
in
here.
I
wanted
to
show
you
real
quick.
What
push
and
pop
does
let's
comment
that
out
and
see
what
happens
with
this
triangle
that
we
were
translating.
A
We
see
the
translation
happening
differently,
because
the
translation
is
taking
place
after
the
other
translation
that
we
have
previously
done
push
function,
saves
the
current
drawing
style,
settings
and
transformation,
while
pop
restarts
the
setting.
So
I
wanted
to
have
this
translation
on
the
second
triangle,
independent
from
the
other
translation.
This
is
the
reason
why
I'm
using
it
often
when
I
don't
want
the
translation
to
be
dependent
of
the
previous
one.
A
Lastly,
let's
add
some
stars
and
galaxies
on
mouse
over
to
her
sketch:
let's
make
it
interactive
with
the
function
mouse
move
from
p5.js,
I
decided
that
or
stars
or
galaxies
shouldn't
have
a
stroke
and
I
created
them
with
a
circle.
I
decided
that
each
circle
should
be
drawn
by
following
the
mouse
in
the
x
and
y
axis
and,
as
you
can
see,
the
stars
are
randomly
different
sizes.
A
I'm
using
the
random
function
from
p5.js,
which
takes
one
value,
which
is
the
choices
or
you
can
set
up
a
minimum
and
maximum
value,
as
you
probably
already
noticed-
and
I
forgot
to
tell
you-
is
that
we
were
using
already
the
random
function
on
the
moon
and
also
when
we
created
our
plan,
as
we
were,
translating
the
x
axis
randomly
from
one
value
to
another
in
order
to
create
or
stop
motion
animation
effect.
We
implemented
a
way
to
draw
our
stars
and
galaxies
on
mouse
over,
but
we
see
them
disappearing.
A
Every
time
we
move
the
mouse.
This
happens
because
the
function
draft
from
p5.js
resets
the
function
mouse
move
every
time
is
drawing
again
or
sketch.
We
need
to
find
a
way
to
stop
the
drawing
function
from
p5.js
to
continue
so
that
we
can
draw
our
actual
stars
and
galaxies
in
order
to
do
that,
we
can
use
the
mouse
press
and
touch
start
functions
from
p5.js.
A
A
Allow
us
to
stop
our
animation
and
draw
our
stars
or
reset
the
stars
that
we
draw
and
look
back
to
our
animation,
we're
using
two
functions
from
p5s
to
achieve
that,
one
is
called
no
loop,
which
is
actually
stopping
the
drawing
function
from
p5.js
and
when
we
want
to
redraw,
we
call
the
loop
function
from
p5.
Yes,
now
let
me
show
you
the
final
sketch,
where
I
drew
my
stars
and
abstract
galaxy
going
on
in
here.
As
you
can
see,
you
can
go
crazy
and
add
as
many
stars
as
you
want.
A
Maybe
you
want
to
have
more
plants
too,
at
the
bottom
have
a
full
bush,
or
maybe
you
want
actually
less
plants
like
only
two.
Maybe
you
want
to
have
two
or
three
moon
faces
happening
in
your
little
github
universe.
Really,
anything
is
possible
and
you
can
do
as
you
want
feel
free
to
share
your
work
with
us.
If
you
want
on
twitter
and
instagram
by
using
the
hashtag
github
universe-
and
you
can
tag
me,
I'm
elitia
underscore
net
I'll
be
happy
to
see
what
you
came
up
with
in
this
little
tutorial.