Today in some mid-afternoon hacking I decided to pull up one of my favorite libraries for messing around with drawing routines. Processing. Processing has worked well over the last 15 years of my career as it has always been a great place to mess around with simple graphical and mathematical concepts. Recently, processing has a javascript port that I’ve been using called P5.js. In addition to this, I came across a great blog by Amit Patel he goes into great detail on some broad mathematical concepts and does a great job at using visualizations to guide you through the explanations.

Experimenting creatively

I had a concept that I wanted to try out in putting together a simple coding experiment. My daughter, Ellie, was sitting next to me and I wanted to demonstrate how sometimes you discover creations by way of just making one small adjustment, one after the other. Cumulative decisions over time in experimentation end up with fascinating results that may not have necessarily been pre-planned. This sort of concept of experimentation is self-guided as you make a decision about something you could add/change/adjust and create new variance. Game design has a unique sort of set of requirements as the number of ideas seem to just appear out of seemingly nowhere. As a result, complexity and knowledge of implementation takes on its own set of challenges as you are required to draw from many different parts of computer science theory. I find this approach to be especially challenging and creative. Here’s what I hacked together today.

Hexigon Experiments

I started by opening up processing and just drawing a set of points that make up a hexigon. Amit Patel has a good series on different shapes, grid systems that I followed just to get through some of the base concepts.

  • experiment by demonstrating some ideas
  • picking new ideas to create functionality
  • self-directed ideas
  • start with a shape, add color, change rotations
  • add variance with size, color, location
  • add some basic collisions
  • change variables over time (use time as a component)
  • speed of change
  • now add the mouse
  • mouse is a thing for targeting
  • create a particle explosion whenever the mouse is clicked

The hexigon experiment started with a few points. As in the articles by Amit, the hexigon is represented by a series of 6 points rotating around 60 degree wedges. One interesting side effect of having a 4 yr old sit next to you, is that their attention span is relatively short. Spending a lot of time optimizing a particular routine, or coming up with a long winded implementation of an algorithm just isn’t an option. Instead, it’s more important that you can ask questions about things you could implement that could be implemented without hesitation and in only a few seconds. This causes the overall experiment to change rapidly due to quick visual adjustments. The sort of questions you ask a toddler about experimenting in a visualization have to be straightforward and quick to implement. Concepts like colors, shapes, speed, rotations, transforms, moving the mouse, making things move quicker or slowly and use of some letters, and a bit of collision detection.

This has given me some ideas about how to explore learning in general. Given a limited time frame for implementation, cumulative minor adjustments maximize the amount of effective change when all you have to start with is a blank canvas and a general processing library. Abstractions are usually built to accelerate this process, at least that’s the hope.

Wave Experiments

Following on the hexigon experiment, I’ve been thinking about fractals for a few weeks now and I thought about one of the articles I came across on Brownian Motion. Since processing isn’t a shader language, (it’s just javascript), I do what I have usually done and attempted to implement similar articles in different languages. I’ve gone ahead and added a simple abstraction on p5js to be able to draw various functions with initialization parameters. This follows how I am hoping to approach experiments by thinking in terms of varying inputs, initialization parameters and functional design.

Modifying the abstraction to switch between different experiments, I began by looking at fractional brownian motion. There is a lot more here that I would like to explore regarding fractals and noise equations. Some of the mathematics are a bit more in depth that I can feasibly write about here for an afternoon article. My hope is to explore some of this territory as it relates to generating concepts usable within games. One particular lesson I’ve learned is to utilize the constraint of time and making minor adjustments in order to create something worthwhile.

References

  • Domain Warping: http://www.iquilezles.org/www/articles/warp/warp.htm
  • Book of Shaders: https://thebookofshaders.com/13/
  • Advanced Value Noise: http://www.iquilezles.org/www/articles/morenoise/morenoise.htm
  • P5.js https://p5js.org/