Advanced Topics in p5.js

Draw a picture in p5.js: a self portrait... a landscape... a cityscape… a still life. Your drawing must include at least four different 2D primitives.

Make a piece of abstract art (e.g. a Mondrian or a Rothko), by manipulating the fill and stroke color of shapes. Be sure to experiment with the alpha (transparency) of the colors you use.

Make an interactive painting program! Challenge: Can you make the canvas color, paint color, brush, and brush size be random, or user-adjustable? As a second challenge this week, animate one or more shapes on the canvas using variables. Animate their position, their size, and/or their color.

Create a project with random elements - for example: randomly distributed dots, with random sizes, and random colors, and random alphas! Can you change which shape is drawn depending on a random value? Consider using the map() function to control one or more properties of your random shapes.

Use createGraphics() to make a painting program combined with an animated shape! Create buttons that affect the properties or behavior of other shapes on the canvas. Be sure to use boolean variables in your conditional statements.

Draw two sets of repeated shapes: one created with a while loop, one created with a for loop. Experiment with the starting value, the exit condition, and the increment amount so you see how these affect the position and spacing of the objects. Use nested loops to create a two-dimensional array of shapes, evenly spaced on the canvas. Finally, use nested loops to create a rendering of a source image of your choosing!

Write a program from scratch to make an object move around the canvas, bounce off the edges, and respond to user input from the keyboard. Use functions to encapsulate each of these behaviors - move(), bounce(), keyboard() - and any others you choose to add. Draw a scene with multiple visual elements, all created using the same function (e.g. a garden with multiple flowers or an aquarium with multiple fish). Be sure to include parameters to control the position, dimensions, and color of each example. Use a for loop to create multiple instances of the drawing with different properties.

First, take an existing sketch (or create a new one) and make one of its visual elements into an object, using a class to encapsulate all of the object’s data and methods. Create at least two instances of the class. Then, add parameters to the constructor() function. Use the parameters to create instances of objects with different initial properties (e.g. size, location, color, etc).

Create projects that reference an array of words or colors or both! Cycle through all of the values in the array and then “wrap” (return to the start of the array) or “stop” (prevent the user from going out of bounds). Use a for loop to cycle through all of the values in the array, or a segment of the values in the array.

Post programs that allow the user to add objects to an array by clicking on the canvas, or pressing keys on the keyboard. Get creative! These could be projectiles of some sort (e.g. bullets or missiles), flowers or trees that grow in a forest, drips of paint or ink on the canvas, or balls that fall and bounce on the ground.

Post projects where intersections between objects in arrays cause the objects to change properties or be removed from their respective arrays. Projects should include examples with circular objects, as well as rectangular ones, which require slightly different methods for detecting intersection.

Post projects in which objects rotate and change their scale on their own, or in response to user interactions.

Post your game projects, rebuilt in p5!

Post your WEBGL projects!