Creative Code: The First Sketch
hamzberg | 17 August 2023 | 7 minute read
In an earlier blog post, I ranted about how I don't like to code.
An Emotional Response
At the time, I was really frustrated with my personal journey into game development. I was learning the Godot game engine, and it didn't seem to click. I was perplexed by what was needed to make a fun game. This was born out my usual overthinking. I'm known for excessive goal planning and trying to figure out the next big thing. Sure, hitting two birds with one stone is great, but have you ever tried fifty birds?
Regardless of my ranting, I still think about programming. Code just intrigues to me. It's the whole reason why I made this website. The idea of having something on display for people to explore has always incensed me. I have had my fair share of exploring other people's digital worlds, whether be it through a website or a video game. Creating a space from the comfort of your device, now that is a twenty-first century marvel.
This is all to say that I kept reading on about programming. I still visit Hacker News because of all the facinating articles to learn from, even if mathematics is not my forte.
I'm ready to give coding another shot.
To Code Creatively
While Godot is out of my range for now, I have been well-antiquated with another library: the Processing programing language.
After taking a few University classes in Java, and realizing that I didn't like it, I took a Creative Code class in Processing. It clicked. Ironic, since my experience in Java would help me with the Java-based Processing syntax.
Each assignment administered by my professor was a challenge, but I didn't even see it that way. It was just fun to command and conquer with each line of code.
Rating: 2 out of 5 stars.
I moved onto the OpenProcessing web editor. It's fine. I like the social aspect the most. It's essentially a social media for sharing creative code, and I fully embrace that idea. Creating an account was fairly simple, although I had a hard time staying signed into it. I credit this to my particular web browser being modified to block many intrusive elements however. Working in the editor is as basic as it can be. It has a tab feature to swap between files, but for some reason when I click on a tab to rename the file, it prompts the next one over to be renamed. Again, this may be because of my browser, but it was certainly irritating.
Rating: 3 out of 5 stars.
Rating: 4 out of 5 stars.
Now to get to the fun part: coding!
The First Sketch
Usually, when I begin a creative code project, I start with a rectangle. In a sense, just like how "Hello World" is used to express the first step with learning a new typical language, "Hello Rectangle" is used for the more visually inclined.
In P5.js, every script someone writes is called a 'sketch.' It's a simple comparison, but it helps artists understand what they've just created. For what is in the example above, P5.js requires the
setup() to be always present. The
draw() isn't necessary. It's main purpose is for running code every frame. However, if the user just wanted the sketch to run once, they can just put their code entirely in the
As for the other functions,
createCanvas() establishes the resolution of the sketch. In my case above, I've set it to the width and height of the browser windows using special variables
windowHeight. What actually draws my rectangle is the
rect(). It takes in four parameters in order: x-axis position, y-axis position, width, and height.
Since I already know many more coding aspects, I've written this code below to demonstrate a few more fun parts of P5.js.
let ; let ; let = 0; let = ;
This code can be viewed on openprocessing.
This sketch creates a matrix of colorful boxes that get rotated by a randomly polarized small factor through each iteration of the For loops. It provides a unique creation with every frame, so I've included the
frameRate(10); to slow down the sketch. It was fun making it, but I felt that I didn't break out of my comfort zone.
It follows plently of what has become staples of how I write code. A predefined Array with colors for a palette. Using nested For loops to make something. Using the
random() to make changes. They're all interesting, but not enough. I want to explore all aspects of what makes gorgeous sketches, and even all the mathematics involved.
So, while I had a rough time attempting to understand Godot, it didn't diswade me from coding entirely. I am always facinated by the prospect of creating virtual worlds just like the art galleries. I imagine walking down a street, serendipitously entering a gallery with free admission. The art on display for anyone to experience. I never intended to buy them, but I am forever grateful of the artist taking the time to express themselves for others to interpret.
Back to top