Transcripts
1. Why You Should Take This Class: Hi, everyone, and welcome. My name is Yasa. I've been a software developer
for over eight years, and I'm absolutely
passionate about the place where code
and creativity meet. I'm so excited to
be your guide into the incredible world
of generative art. So, what is this
class all about? Have you ever seen
mesmerizing digital patterns, dynamic animations
or interactive art and wondered? How was that made? The answer is often creative
coding, and in this class, you'll learn how to do it
yourself using P five JS, a free beginner friendly tool that runs right in
your web browser. No installation needed. They'll start from the very
beginning learning how to draw shapes and
play with color. Then lesson by lesson we'll
build up your skills. You'll discover how to use randomness to create
unique designs, make your art respond
to mouse movements, generate organic patterns
with pearl and noise, and add depth with
layers and transparency. Each lesson builds on the last, adding a new layer of complexity
to our class project. This class is for
anyone and everyone. Whether you're an artist,
curious about coding, a developer wanting to
explore your creative side, or a complete beginner with
no experience in either, you are in the right place. All you need is a computer
and your curiosity. By the end of this
class, you won't just understand the fundamentals
of creative coding. You will have created
your very own unique, dynamic and interactive piece of generative art from scratch. You'll have a project to share, a new set of skills for
your creative tool kit, and a solid foundation to continue exploring
this exciting field. So are you ready to
turn code into art? Let's get started.
2. Getting Started with p5.js: Hi, everyone, and welcome to the very first lesson of our class on generative
art with PiveJS. My name is Aasia
and I'm excited to guide you through the
world of creative coding. To keep it simple, let's use
the online PiveJS Editor. Just open your browser
and head over to editor dot p fivejs.org. It's a free web based code
editor designed for P fiveJS. Let's take a quick
tour of the editor. On the left side, you'll find the code area where you
can write your Javascript. On the right, there's the preview window where
your work will show up. And up top, there's
the play button. Just click that to run your code and check out the
results right away. Every p5j sketch starts with two main functions
setup and draw. Setup runs once at
the very beginning. Draw runs over and over, creating animation or
allowing for interaction. Let's see this in action. Et's check out a
straightforward example to see how P five
JS sketches work. Here's what's going
on. The setup function runs once when the
sketch starts. Inside it, we use
create Canvas to create a drawing area that is 400 pixels wide and
400 pixels tall. Without this line,
nothing would appear on the screen because P five JS
wouldn't know where to draw. The draw function
runs over and over again about 60 times
per second by default. In this example,
every time draw runs, it draws a circle at the
center of the canvas. Function, ellipse draws
a circle with its center at and a width and
height of 100 pixels. When you run this
code, you'll see a circle pop up in the
center of your Canvas. Feel free to tweak
the numbers to shift the circle around
or to resize it. When you're happy
with your sketch, you can save it by clicking
File and then save. Give your project a name, and it will be saved to your P five GS account
if you're logged in. That's a rap on
our first lesson. You've learned how to set
up your environment and make your first P
five JS sketch. Next time, we'll
get into drawing more shapes and adding some
color to your art. Catch you
3. Drawing Basics: Welcome back. In our
previous lesson, we set up our coding
environment and wrote our very first
P five JS sketch. Today, we're going to dive
into the basics of drawing, learning how to create
shapes and use colors. These are the
building blocks for our generative art project. Let's start with the basics. In P five JS, you can draw different shapes using
simple functions. For example, ellipse draws
an ellipse or a circle, Rec draws a rectangle, line draws a line
between two points, triangle draws a triangle. The Canvas in P five JS uses a coordinate system where
zero is the top left corner. The first two numbers in each function are the
X and Y positions. Now, let's talk about color. You can set the background
color with background, fill shapes with fill, and set the outline
color with stroke. For example, fill 2550 and zero will fill
shapes with red. You can use RGB values or even HSB for more
creative effects. Combining these
shapes and colors, you can create interesting
compositions foundation of generative art. Let's create a simple abstract
composition together. First, let's clear the canvas
with a background color. Background. Now, let's draw a blue circle in the
center, fill ellipse. Et's add a rectangle, fill rect. And a line, stroke, line. You can play with the numbers
to move the shapes around, change their size, or
try different colors. For example, try changing
the fill color to something else or add more
shapes to your composition. When should you use
the draw function, and when is it enough to
put all your code in setup? In P five JS, the setup function runs once when your
sketch starts. It's perfect for
drawing static images, things that don't
change or animate. The draw function,
on the other hand, runs over and over again
many times per second. You use draw when
you want to create animations or when your artwork needs to update continuously, for example, in response to user input or to
create movement. So if your artwork is static, like a digital painting that
doesn't move or change, you can put all your
drawing code in setup. If you want to add
animation or interactivity, you'll need to use draw these basic drawing skills are essential for our final project, a unique, generative artwork. The more you experiment
with shapes and colors, the more creative your
final piece will be. Now it's your turn. Try creating your own abstract composition using different
shapes and colors. Don't be afraid to experiment. Hang on to your canvas. We'll keep building on
it in the next lessons, adding more techniques
and ideas along the way. By the end of the class, you'll have your own one of a kind piece of
generative art. Let's keep at it and see
what you can come up with.
4. Randomness & Pattern Generation: Hey, there. So far, we've covered how to
draw basic shapes and play around with
colors in P five JS. Today, we're stepping
it up a notch by mixing in some randomness
and pattern creation. These ideas are key
to generative art, and will let us create some really unique and
lively digital pieces. Randomness allows us to create artwork that is never
exactly the same twice. By combining simple rules
with random values, we can generate complex
and beautiful results. In generative art, you
become both the artist and the rulemaker while the computer fills in the details
in unexpected ways. The random function returns a random number between
the values you provide. You can use it to
randomize positions, sizes, colors, and more. For example, this gives you a random X and Y
position anywhere on the canvas and a random
radius 10-50 pixels. The four loop is a powerful tool for repeating actions
in your code. Instead of writing the
same line over and over, you can use a loop to draw many shapes with
just a few lines. For example, this loop will run ten times letting
you create patterns, grids, or clusters of shapes. When you use random
values inside a loop, you can quickly generate
complex organic patterns. This is a fundamental
technique in generative art, and it's what makes every run of your code a new
creative experience. Let's build on our
previous sketch and add some randomness
to our Canvas. We'll use a loop to
draw multiple circles, each with a random
position, size, and color. Here's a simple way to do this. We begin with the shapes we talked about in
the last lesson. Next, we set up a loop
that runs ten times. Inside that loop, we
choose a random spot XY, a random size, R, and a random color
for each circle. Each time you run it,
you'll see a new mix of colorful circles.
Give this a shot. Change how many circles you
draw by updating the loop. Try different sizes or
swap out ellipse for rect. Mess around with color values
to set different vibes. Adding some randomness
in loops is making your artwork way
more lively and fun. These tricks are key
for generative art, and you'll definitely use them to make your final
project stand out. Keep playing around with
randomness and patterns. In the next lessons,
we'll make your artwork even more complex
and interactive. Every time you run your code, you're making a fresh
digital painting. Don't forget to save your work. We'll build on it bit by bit.
5. Interactivity: Hey, there. So far, we've gone over drawing shapes, picking colors, and adding
some randomness to our art. Today, we're going to spice things up by making
our art interactive. That means it will change
based on what the viewer does, like moving the mouse
or hitting keys. Each experience will be
different and special. Interactivity really
changes your art from being just a picture to
something that pulls people in. It lets folks join in
instead of just looking. When you're working
with creative coding, adding interactivity is
a great way to try out new ideas and make
your art feel vibrant. B five JC makes it
easy to respond to user actions with special functions
called event handlers. The most common ones
are mouse pressed, runs when the mouse is clicked, mouse moved, runs
whenever the mouse moves. KeyPressed runs when
any key is pressed. You can use the built
in variables mouseX and mouseY to find out where
the mouse is right now. Let's practice a bit to get
a better grip on the theory. Let's explore how this
sketch works step by step. I'll explain the main parts
of the code and what they do. We start by declaring
some variables. Shape color stores the
current color of our shape. Shape type determines
whether we're drawing an ellipse or a
rectangle initially set to LSAP. The animated boolean controls whether the shape
is animated or not, and angle keeps track of the rotation or
oscillation for animation. In the setup function, we create a canvas of 400 by 400 pixels. We initialize shape color to a bright blue and set the background
color to a light gray. This runs once at the start. Now, in the draw function,
which runs continuously, we first refresh the background
to clear previous frames. If the animate flag is true, we gradually increase
the angle variable which drives our
animation effect. This creates smooth
movement or oscillation. Next, we set the fill color to shape color and disable the
stroke for a cleaner look. We use push and pop to save and restore
the drawing state. Inside, we translate the origin to the center of the canvas, so our shape appears centered. Depending on whether shape
type is lesbll or wreck, we draw the shape. Its size varies
sinusoidally with angle, creating a pulsating
or oscillating effect. Additionally, when
you press the mouse, a semi transparent orange circle appears at the mouse position, allowing for
interactive drawing. When you click the
mouse, the mousePressed function runs and it randomly
changes the shape's color, adding a fun element
of surprise. Using the keyboard, you can
switch between shape types. Pressing R makes it a rectangle. E switches back to ellipse. Pressing A toggles the
animation on and off, so you can animate the
shape or keep it static. Adding interactivity makes
your generative artwork come alive and allows it to
respond to the audience. This is an important aspect
of creative coding and can make your final project more
interesting and personal. In this session, we'll keep working on the same sketch
we've been using in class. We're going to add
some interactivity to make the artwork
more fun and lively. A, let's walk through
this generative art sketch step by step. I'll explain what each
part of the code does and how it contributes to the
overall visual effect. We start by declaring
some variables. Main ellipse color
and rect color, store the colors of
the main ellipse and rectangle respectively. Random circles is
an array that will hold parameters for several
randomly placed circles, allowing us to draw
them repeatedly. In the setup function, we create a 400 by
400 pixel canvas and set a light gray background. We initialize the colors for the ellipse and rectangle
with specific RGB values. Next, we draw some
static shapes, a large ellipse at the center, a rectangle below it, and a diagonal line
across the canvas. These shapes form the
core of our composition. Then we generate parameters
for ten random circles. For each circle, we store
its position X Y, radius R, and color C. These
parameters are stored in the random circles array
for consistent redrawing. After that, we call
draw random circles to draw all the circles on the
canvas in the draw function, which runs continuously, we check if the
mouse is pressed. If it is, we draw small semi transparent circles
at the mouse position, creating an interactive
drawing effect. When you click the
mouse, the color of the main ellipse
changes randomly. This triggers the
mousePressed function, which updates main ellipse color and redraws the main shapes. Similarly, when any
key is pressed, the rectangle's color
changes randomly via the key pressed function
and the shapes are redrawn. Redraw main shapes is a helper function that clears the background and
redraws the main ellipse, rectangle, line, and
all the random circles. This ensures that the
visual state updates correctly after any interaction
draw random circles, loops through the stored
circles in random circles and draws each one with its
specific color and size, adding a dynamic, colorful
element to the scene. In this updated sketch, we've added a few cool features. Click the mouse, and the main ellipse changes
to a random color. Press any key, and the rectangle
will change color too. If you hold down
the mouse button, tiny circles will appear
wherever your mouse is letting you paint
on the canvas. All the original pieces, the ellipse, rectangle line, and random circles
are still there, but now they react
to what you do. This way, you can
gradually improve your generative art
project with each lesson, making it more your
own and interactive. Play around with different
interactive elements. See what happens
when shapes pop up, change or move when
you click or type. Don't forget to save your work. We'll look at more ways to make your art stand out
in the next lessons. Your project is changing
little by little.
6. Organic Patterns with Perlin Noise: Hey, there. So far, you've picked up drawing shapes, using colors, adding
some randomness, and making your art interactive. In this lesson, we're
going to check out a handy tool for generative
artists, Pearl and noise. This will help you
create smooth, natural looking
patterns that are way better than
just random stuff. We'll work this technique
into our current project, which will make your
generative artwork stand out even more. Pearl noise is a kind of randomness that feels
smooth and continuous. Instead of giving you
totally random values like the random function, noise provides values
that shift gradually. This makes it great for making
natural looking effects, like waves, clouds, landscapes
or flowing patterns. The function noise X
returns a value 0-1. If you increase X slowly, the output changes smoothly. You can use this value
to control positions, sizes, colors, or any other
property in your sketch. Let's add a wavy pattern to
our sketch with Perlin noise. We'll create a flowing line
on the canvas and you'll see how simple it is to make those natural
looking effects. Let's walk through
the main parts of this generative art
sketch in P five JS. At the top, we declare
some global variables. Main ellipse color
and rect color will store the colors
for our main shapes, and random circles is
an array that will hold the properties of several
randomly placed circles. In the setup function,
we first create a canvas and set a
light background color. We then initialize the colors for the main ellipse
and rectangle. Next, we draw the main ellipse in the center of the canvas, followed by a
rectangle below it. We also draw a diagonal line for some extra visual interest. After that, we generate
ten random circles. For each one, we randomly
pick its position, size, and color and store these properties in the
random circles array. We then call draw random circles to actually
draw them on the canvas. Finally, in setup, we
call draw organic line, which uses Perlin noise to
create a smooth, wavy line. This adds an organic hand
drawn feel to the composition. The draw function is called
repeatedly by P five JS. Here we check if the
mouse is pressed. If it is, we draw a small
semi transparent circle at the mouse position. This lets the user interact with the artwork in real time. The mouse pressed function is triggered whenever the
user clicks the mouse. Each time this happens, we assign a new random color to the main ellipse and call redraw main shapes
to update the canvas. Similarly, the key pressed
function changes the color of the rectangle
whenever any key is pressed and also calls
redraw main shapes. The redraw main shapes function
is a helper that clears the background and redraws
all the main elements, the ellipse, the rectangle, the line, the random circles, and the organic wavy line. This ensures that the canvas always reflects the
latest colors and shapes. The draw random
circles function loops through the array of
stored circles and draws each one with its unique
color, position, and size. Finally, the draw organic
line function creates a wavy line across the
canvas using Perlin noise. This technique generates smooth, natural looking
randomness, which is perfect for generative art. Give Perlin noise a
shot in your sketch. You can make some cool
organic patterns or use noise to change other
parts of your artwork.
7. Layers & Transparency: Hey, there. It's great
to have you back. Your artwork is
really starting to look one of a kind and lively. In this lesson,
we're going to talk about layers and transparency. By stacking layers and playing with how see through they are, you can create more depth and bring a richer look
to your digital painting. Layers are simply
different elements or groups of elements drawn
on top of each other. By organizing your
artwork into layers, you can control the
order in which things appear and create
interesting visual effects. Transparency or Alpha determines how C through a
color or shape is. In P five JS, you can
set the Alpha value as the fourth parameter in the
fill or stroke functions. Fill RGBA, where A
is the Alpha value, zero equals fully transparent. 255 equals fully opaque. Why use layers and transparency to create a sense of
depth and atmosphere, to blend colors and shapes for a more painterly
or eeeal effect, to highlight or soften certain
parts of your composition. Let's improve our project by adding some new see
through layers. We'll draw a few
overlapping shapes with varying transparency, and it'll create a more
interesting and layered look. Variable declarations, main
ellipse color, wrecked color. These variables store the colors used to draw key
shapes in the sketch, allowing dynamic changes
upon user interaction. Random circles, an
array that holds parameters for multiple
randomly positioned circles, enabling consistent
redrawing during refreshes. Setup function. Incitinize
the Canvas size, 400 P capped PX and
background color. Sets initial colors
for major shapes, main ellipse color and wrecked color with transparency
for layered effects. Layer one, static shapes, draws a semi transparent
ellipse at the center, a rectangle below it, and a semi transparent line
across the canvas. These forms serve as the
foundational visual elements. Y two, random circles populates the random circles array with randomly
generated positions, sizes and colors
for ten circles. Calls draw random circles to render these circles creating a dynamic textured
background. Layer three. Organic wavy line invokes
draw organic line, which uses purlin noise
to create a smooth, natural looking wave
across the canvas. Layer four transparent
overlays executes draw transparent layer to overlay several
semi transparent, large overlapping
ellipses, producing a dreamy atmospheric effect. Draw function
continuously checks if the mouse is
pressed, when pressed, draws small semi
transparent circles at the current mouse position, allowing interactive
drawing that adds a layered
spontaneous element. Interaction handlers
mouse pressed. When the mouse is clicked, the main ellipsis color
changes randomly, and the entire scene is redrawn
to reflect this update, key pressed, pressing
any key updates the rectangles color randomly
and triggers a redraw. Redraw main shapes function, clears the background
and redraws all primary visual
elements, shapes, lines, overlays, ensuring
that color changes or interactions update the
entire scene cohesively. Helper functions.
Draw random circles, renders all circles
stored in random circles, maintaining consistent placement and appearance during redraws. Draw organic line creates a smooth flowing line
using pearl and noise for natural variation,
enhancing visual interest. Draw transparent
layer, adds a set of large semi transparent ellipses with random positions and sizes, contributing to a layered,
dreamy atmosphere. Play around with layers and
transparency in your sketch, test out different combos, and see how they change
the vibe of your artwork. In the next lesson,
we'll go over how to export and share
your finished piece.
8. Exporting and Sharing: Congrats. You've reached the
last lesson of this class. By now, you've crafted your own generative
artwork by mixing shapes, colors, randomness, interactivity, organic
patterns and layers. In this lesson, I'll guide you on how to save your final
piece so you can show it off, whether it's on social media, in your portfolio or
right here on Skillshare. Exporting your work allows you to save your creation
as an image file, share your art with friends, online communities,
or potential clients. Build a portfolio of your
creative coding projects. P five JS makes it easy
to save your Canvas as an image using the
save Canvas function. You can call this function in
response to a button click, a keypress or any other event. Let's make it easy to
export your artwork. We'll use the save
Canvas function. So you can save your sketch as a PNG file or at a
button for exporting. Now, whenever you
press the Skey, your current Canvas will
be saved as a PNG file. Alternatively, you can click the save Artwork button
to export your image. The file will be downloaded
to your computer, ready to share or upload. In addition to exporting
your artwork with code, the P five JS web
Editor provides convenient built in options for saving and
sharing your project. Just go to the top menu
and click on File. Here, you'll find
several useful options. Save saves your current
sketch in the Editor. Downloads your entire project, including code and
files as a zip archive, so you can keep a
backup or work offline. Share generates a unique
link to your sketch, which you can send to friends, post on social media, or include in your portfolio. This is a great way
to let others view and interact with your
generative artwork online. These features make
it easy to save, backup and share your creative coding
projects with the world. No extra setup required. Don't forget to save your favorite version
of your artwork. You can share it
on social media, add it to your portfolio, or just keep it as a reminder
of how far you've come. And make sure to upload
your final piece to the project gallery so we
can all enjoy it together.
9. Conclusion: Congratulations on
completing the class. You did it. Take a moment to appreciate how
far you've come. We started with a blank canvas
and a few lines of code, and now look at what
you've created a living, breathing piece of generative
art that is uniquely yours. Throughout this
journey, you've learned the core principles of creative
coding with P five JS. You've mastered
drawing and color, harnessed the power of
randomness and loops and brought your art to life with interactivity and organic noise. You've learned to think
like a generative artist, building complex visual
systems from simple rules. Now it's time to share
your masterpiece. I strongly encourage
you to upload your final project to our
class project gallery. Sharing your work
is a fantastic way to celebrate your progress, inspire your fellow students, and become part of our
creative community. Can't wait to see
what you've made. Remember to check out the additional
resources I've shared for even more inspiration.
This is not the end. It's just the beginning of your creative coding adventure. The skills you've learned
here are a gateway to a vast world of
digital art and design. Keep experimenting, keep
pushing the boundaries, and never stop creating. Thank you so much for
joining me in this class. It has been a pleasure
to guide you. I wish you all the best on your continued journey into the beautiful world
of generative art. Happy coding.
Iasya Bazelevskaia
