p5js painting with code - p5.js intro

p5js links

My first sketch

Basic Shapes

Mini assignment

Using only the basic shapes you just learned how to make, try to draw a face in code! Do it inside the p5js online editor and make sure you save your sketch.


MouseX and MouseY

No background + comments

Only draw if mouse is pressed

Using sin + millis to control ellipse size

Using sin + millis to control ellipse size and random to control color

Using random to control ellipse size, position & color

Mini assignment

Spend 15 minutes changing the previous example, by controlling the colors, using a different shape than ellipse or adding something else to the sketch. If you are not sure what to do, just try to change the numbers one by one and see what happens! Do it directly on this page or in the p5js online editor.


Simple brush

Advanced brush

Bonus: Painting with body and microphone (opens in p5js online editor)

Bonus: Additional tutorials + examples

Todays assignment

Create an interactive sketch, that allows the user to paint in a creative, aesthetic and/or funny way. Feel free to build on top of an existing example or an example you find online.

Use the p5js online editor and make sure you save your sketch and that the sketch belongs to you (dublicate another persons sketch, to make a version that you can save)!

Insert the link to your final sketch here before 14:10. Find the link by presseing file -> share -> editor in the p5js online editor.

Andreas Refsgaard links

andreasrefsgaard.dk

Twitter

Instagram