Grains of Sand – My project for course, Creative Coding: Making Visuals with JavaScript

Grains of Sand – My project for course, Creative Coding: Making Visuals with JavaScript

For my project, I took a lot of inspiration from Anders Hoff's work, particularly Grains of Sand. In his blog post, he describes the process as following:

• Pick a number of grains, `n`.
  
• Pick a color, and a corresponding transparency, `rgba`.
  
• Pick two points, `v` and `w`.
  
• Randomly draw `n` points (uniformly distributed) between `v` and `w`, using color `rgba`.
  
• Move `v` and `w` slightly, then draw again.

I implemented a version of this in `canvas-sketch`, with `n` in a random range, and `v` and `w` as random points on a circle. Below you can see, first, a couple of lines, and then a couple thousand.

I wanted to experiment with a way to soften the outline of the circle, and I landed on adding a minor random variation to the size of the `random.onCircle()` radius that selects the start and end-points. Below is the result.

After playing around with different dot sizes, I decided to add some random variation to that aspect, along with the alpha of each dot. Now, I was getting closer to what I was looking for – a very volatile, chemical feeling.

I was happy with my result, but I knew there was some more significant variation I could add to each drawing. I wanted to replicate the streaks and lashes you sometimes see across photos of the sun. To do this, I calculated a quadratic curve that starts on the circle, has a control point near the middle, and then ends back on the circle.

Rather than picking a random point on the quadratic, I wanted to traverse the quadratic as the lines were being drawn, which required using a function `getQuadraticXY()` that I found here. Using a value of `t` from 0 to 1, I allowed a small chance that each line of sand would start at that point on the quadratic, rather than on the circle.

However, there were a few adjustments to make, as I didn't like how clearly the quadratic was visible. To remedy this, I:

• Stopped drawing any dots on the quadratic itself
  
• When drawing from the quadratic, made the alpha of the dot inversely proportional to the distance to the quadratic
  

I was happy with the result, but just for some extra spark, I decided to extend the script to have a variable number of quadratic curves, as well as randomly sampled color palettes for any lines drawn from the curves themselves.

Just for testing, I also added a grid feature to render many iterations on the canvas together.

Below are my final results. I really enjoyed the course, and the process of exploring my own drawings (even though there was some heavy inspiration). I can already think of another handful of ideas to try, which is very exciting.

Thanks for reading!