Introduction to Creative Coding with p5.js

Hi everyone!

In this first module, we are going to learn about simple functions, how we can write them, and draw simple shapes using the. Most importantly, we are going to learn about the canvas! It's where all the art we draw using p5 will show up!

We are going to be practicing all of this by making simple and fun emojis. Here's a few examples here -

To be able to do this, we need to learn a few new concepts

1. The p5 canvas - this is the area where all the drawings appear

2. How to draw simple shapes

3. How to colour all of these shapes

First, let us understand the basic setup of p5.js. This video explains how the interface is set up, and how to get started!

The best way to get started is to draw shapes using this interface. We have a fun activity to help you kick this off.  Do add to the emojis made in this project as you learn how to add more elements like color and and movements to the emoji!

Code Link - https://editor.p5js.org/pclusers/sketches/k8G9KeFWV

Additional ideas to try out - https://demo.peblio.co/pebl/gnBZ_3JX6

This video talks about how to add colours to the created artwork

Code link - https://editor.p5js.org/pclusers/sketches/1KfcflO9y

Here, we learn about what variables are, and how they can be useful in animating artwork

Code Link - https://editor.p5js.org/pclusers/sketches/ttx6ZY0_X

This video introduces a couple of inbuilt p5.js variables

Code Link - https://editor.p5js.org/pclusers/sketches/-R2_W54ps

Reference can be found at - https://p5js.org/reference/

Here, we talk about the concept of conditional statements, and how they can be used

Code Link - https://editor.p5js.org/pclusers/sketches/gsza7seDA

Introduction to a few more inbuilt variables

Code Link - https://editor.p5js.org/pclusers/sketches/tMff3831C

Code Link - https://editor.p5js.org/pclusers/sketches/EobAs9Lex

Using inbuilt variables to design a button!

Code Link - https://editor.p5js.org/pclusers/sketches/GydfweDys

This useful function can be used to generate random numbers, the applications are endless

Code Link - https://editor.p5js.org/pclusers/sketches/N66A36VBX

Let us use the concepts learned in this module and make a symmetry painting app! Get creative, and customize it your own way!

Code Link - https://editor.p5js.org/pclusers/sketches/Wr_zgxGmN

Hi everyone!

In this module we are going to be learning about generative patterns and how we can make them. A generative patterns refers to patterns that are based on an algorithm, and not always the same. Lets break them down a bit more. Usually when we make patterns, we draw a gris, and colour it in. Instead, what we are going to do here is define the rules that make the pattern, and not draw the patterns itself.

For example, instead of drawing circles in the rows and columns of fixed sizes. We can write an algorithm that will pick a random size each time. That way, every time we run the code, we get a new pattern :)

Here are a few examples :

Here are the 2 examples that we will learn how to make by the end of this module :

To be able to do this, we need to learn a few new concepts

1. For loops - it is a concept we will use to repeat the same line of code multiple times

2. How to move the origin of the canvas, and rotate it

3. New algorithms such as 10 Print

Introduction to loops using the concept of "for"

Code Link - https://editor.p5js.org/pclusers/sketches/p2V932MjG

Using loops within loops to create artwork

Previous Code - https://editor.p5js.org/pclusers/sketches/p2V932MjG

Code for nested loop - https://editor.p5js.org/pclusers/sketches/PZ850C9hy

Try out this project, and try to customize different elements to see further applications!

Code - https://editor.p5js.org/pclusers/sketches/kk3uPlohD

Try out this project, and try to customize different elements to see further applications!

Code - https://editor.p5js.org/pclusers/sketches/Pm-S2SyuG

Changing reference points, translation and rotation of points

Code - https://editor.p5js.org/pclusers/sketches/Nsqszyg1x

Grid system, usage for patterned artwork

Code - https://editor.p5js.org/pclusers/sketches/Ejt6AqYLC

Code - https://editor.p5js.org/pclusers/sketches/0FzSFK8HZ

Starting Code - https://editor.p5js.org/pclusers/sketches/0FzSFK8HZ

Code for this video - https://editor.p5js.org/pclusers/sketches/6Nupl1dcw

Code - https://editor.p5js.org/pclusers/sketches/ZWfi-a3qn

Using images for generative artwork! Play around with the different elements to learn more about its functions!

Code - https://editor.p5js.org/pclusers/sketches/CewRP0pF_

Using images for generative artwork! Play around with the different elements to learn more about its functions!

Code - https://editor.p5js.org/pclusers/sketches/4XofZR_fW

Starting Code - https://editor.p5js.org/pclusers/sketches/CewRP0pF_

Code for this video - https://editor.p5js.org/pclusers/sketches/wIGnHaDGX

Resize image at - https://picresize.com/