Creative Coding for Beginners Tariq Rashid
Rashid shows how to set up your coding environment for coding in p5.js on openprocessing.org. Next he discusses the code that is there by default, including the setup() and draw() functions. Before you know it, you have drawn a simple yellow circle. The next steps are how to change the color and draw a square.
The next topic is how to use the coordinate system and how to control the size of your shapes. Rashid compares the coordinate system to an artist's canvas and discusses how to use the coordinates to "pin" shapes on the canvas. He then moves on to sizing the circles and squares. Random numbers is introduced next and Rashid discusses how to use random numbers to size and position shapes on the canvas. Next you learn how to use the computer to choose a color from a list of colors.
Rashid introduces variables and functions. He starts with the definition of a variable and how they work. He shows how to set two variables from random numbers for the position of circles on the canvas. He starts with these x,y coordinates for the first circle and uses simple math and variables to position the other circles. When adding functions, he shows how writing the drawing code inside reusable functions saves much time and work. Introducing the repeat() function, he discusses how good this functions is for repeating things and how to easily pass information to the function with parameters. Next, you are introduced to digital color, starting with RBG color. Rashid adds some fun by showing how to code random colors.
Going back to the repeat function, Rashid demonstrates how to add a counter to the repeat function, giving you more control. But this is just an introduction for more advanced coding with math, including the sine wave for different shape and color patterns.
My favorite section was on the HSL color wheel and colorMode(). Rashid demonstrates how to control the hue with code. After you have a hue, you learn how to control the saturation and brightness. Next, you learn how to calculate color combinations. Then he introduces how to use the repeat() function and nested loops to create a grid. Rashid also discusses transparency with the alpha parameter.
Moving on to even more complicated topics, Rashid introduces random noise, to create smooth textures. Next he introduces trigonometry for making orbital patterns. You learn how to convert angles to x,y coordinates. Next he introduces recursion for creating patterns within patterns. After recursion, he moves on to for loops, nested loops, classes and objects. Another favorite section was about code that creates code. You create a turtle that draws on the canvas. You also build an interpreter for your turtle code.
Tariq Rashid has a degree in Physics, a Masters in Machine Learning and Data Mining. He loves open source and giving talks and workshops.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.