Explaining Programming Concepts With Art & p5js
When I talk to people about their personal journey into coding and programming, a lot of them have a passion for technology, a few of them have passions for problem-solving, math, etc… My personal journey into programming starts with art. This could be really easily misconstrued as design; defined as the “look and function” of any object. Art is just defined by the “various branches of creative activity”, which I think is more applicable to the whole field of coding than just the niche, inset field of design.
I was first introduced to programming by a college professor who taught an elective “creative coding” course. While it focused on building basic websites with HTML and CSS, we started with Processing. Processing, in words from the Processing Foundation, is, “a flexible software sketchbook and a language for learning how to code within the context of the visual arts.” We drew these concepts visually before we ever coded their real function.
p5js is “an interpretation of Processing for today’s web” or a library that allows easy use of the concepts and functions provided by Processing straight from inside Javascript! These examples are slightly modified from the official p5js documentation located here (https://p5js.org/).
Artful Examples of Programming Concepts using p5js:
This is an example from the official p5js documentation that while creating beautiful art, visually teaches three separate coding concepts. Let’s take a look at it and then break down the code.
Here in this code, we have a lot going on to someone who has never coded before, but we can teach and break it down using the visual cues provided by the image above. It is only necessary to understand that this code somehow makes that image.
We start off with functions that are given to us by Processing, createCanvas is declaring the size of the image, background is making it black, and stroke is making those lines white. Then we declare some variables.
DECLARING VARIABLES
One is a boolean, a true or false value, a yes or no. The second is just the number 20. The third we get the middle of the composition by dividing the width, or the first value passed into createCanvas.
LOOPS
The keyword “for” invokes a loop. A loop is a way to repeatedly run code, given a set of rules. In plain English, that code says get d (‘20"), and for the time that it is still less than or equal to the width of the page, add it to itself and run the code inside the curly braces.
IF: Conditional logic.
b switches from true to false when d (our iterator value of 20 in the loop) passes the middle variable we set. If allows us to say if(something is true){do this}. In this code, we’re saying b is true while it's to the left of the middle point. In the “do this” area or the code block, were using the line function to draw vertical lines on the left side, horizontal on the right. When we cross the middle point our “condition” stops being met and we run different code. We see that the code inside the curly braces is using the “line” function provided by processing. The proper syntax of line is
“line(point1x, point1y, point2x, point2y)”
We can see in our artwork that all of this is true.
Visually we have represented three different concepts with art: the idea of the variable, the idea of the loop, and the idea of conditional logic, and created a beautiful design in the process. Art can be extremely useful for problem solving, visually representing concepts, and using math and geometry to express oneself. This is an excellent tool to apply to programming and I am excited to use it in the future
