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.

I want to go back to then. I'll retrace my steps from Godot and continue on with P5.js. A JavaScript-based library that takes the magic and simplicity of Java-based Processing, and brings it to the web.

Editor Options

P5.js has a few methods of programming with it. There is of course the standard method, were the user downloads the JavaScript files and simply programs with them locally in their own text editor. But then there are three more options: the Processing Integrated Development Environment (IDE), the OpenProcessing web editor, and the P5.js web editor. All of these options provide a code editor tailor-made for the JavaScript library.

I tried the Processing IDE intially. The IDE provides plugin support, and the official P5 mode plugin can be installed through the plugin menu. Installation went smoothly, and provided a nice template for which to get started. When I began coding however, the IDE threw errors at me that did not make sense. In one instance, when I typed a keyword incorrectly, it instead said I was missing a semicolon. I understand that JavaScript is a lot more lenient regarding errors, browsers are more likely to just substitute their own solution, but it's the official plugin. I need good errors!
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.

Finally, I tested the official P5.js web editor. It's pretty good. It's has a very clean interface and does all that's needed to utilize the full extent of the JavaScript library. I can also log in to save my sketches. Unfortunately, they don't have an option for Codeberg, so I'll have to use my GitHub account. Just like the OpenProcessing web editor, the right side of the official P5.js editor has a live preview that updates when I run the code. It even has an auto-refresh feature! Would've been nice to have an offline option, but this suffices.
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.

function setup(){
    createCanvas(windowWidth, windowHeight);
}

function draw(){
    rect(100, 100, 200, 200);
}

Neat.

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 setup().

function setup(){
    createCanvas(windowWidth, windowHeight);
    rect(100, 100, 200, 200);
}

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 windowWidth and 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 rand_Color_Select;
let rand_Polar_Select;

let rotate_Factor = 0;

let fun_Color_Palette = [
    "#52B5F2", // Blue
    "#71A63C", // Green
    "#F2B705", // Marigold
    "#F24405", // Scarlet
    "#F26B6B", // Salmon
];

function setup() {
  createCanvas(400, 400);
  strokeWeight(2);
  noFill();
  frameRate(10);
}

function draw() {

  background("FFF");

  for(let x_Position = 20; x_Position < (width - 20); x_Position += 20) {

    for(let y_Position = 20; y_Position < (height - 20); y_Position += 20) {

      rotate_Factor += 0.0001;

      rand_Color_Select = random([0, 1, 2, 3, 4]);
      rand_Polar_Select = random([1, -1]);

      stroke(fun_Color_Palette[rand_Color_Select]);

      push();
        rotate(rand_Polar_Select * rotate_Factor);
        rect(x_Position, y_Position, 20, 20);
      pop();

    }

  }

  rotate_Factor = 0;

}

This code can be viewed on openprocessing.

Neato.

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.

Wrapping Up

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.

Doodles

Back to top