The Programming of Art

I have spent most of my career writing programs for business reasons. Writing them has given me a sense of fulfillment. But this was not drew me to this career. Every now and then, I am reminded why I love this field so much.

Recently, I wrote a program that revived the enthusiast in me. While preparing examples for students in my full stack web development course, I accidentally created art. I named the program The Walk. It created the image of this article. You can see it executing in my original blog post.

The surprising thing about the program is that it is fairly simple. After all, it is a teaching example. The program has only a few basic elements:

an HTML document that uses built-in canvas graphics
random numbers
rotating colors
repetition

The algorithm is simple. Start in the middle of the two-dimensional canvas. Pick a random color. Pick a random direction. Draw a line with the color and direction for 10 pixels. Repeat the process, while changing the color every 1,000 steps.

The result reminds me of complex systems where agents and simple interactions lead to emergent behaviors. In this program, one emergent behavior is the output art at the end of the program. Another emergent behavior is the creation of additional colors by retracing steps.

There is nothing novel or proprietary about the program itself. It uses basic HTML, JavaScript, and CSS statements that you can learn from online tutorials (see W3Schools).

The full source code for The Walk is below. Save it to a file named walk.html. Double-click the file to execute the program in a browser. Programming isn't just for business applications. Programming is an outlet for creativity. And creativity leads to art.

<!-- walk.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>The Walk</title>
</head>
<body>
  <canvas id="myCanvas" width="600" height="600" style="border:2px solid black;"></canvas>  

  <script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var iterations = 0;
  var color_iterations = 0;
  var idx = 0;
  var MAX_ITERATIONS = 14000;
  var colors = ['red','orange','yellow','green','blue','indigo','violet'];
  var x,y;

  //color canvas white
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  //do the random walk
  ctx.fillStyle = colors[idx];
  x = canvas.width / 2;  //start in the middle
  y = canvas.height / 2;

  function walk() {
    ctx.beginPath();
    ctx.moveTo(x,y);
    m = Math.floor(Math.random() * 4);
    newx = x;
    newy = y;
    switch(m) {
      case 0:
        newy = newy - 10;  //up
        break;
      case 1:
        newy = newy + 10;  //down
        break;
      case 2:
        newx = newx - 10;  //left
        break;
      case 3:
        newx = newx + 10;  //right
        break;
    }

    //if new coordinate are off the grid, skip it
    if (newx < 0 || newy < 0 || newx > canvas.width || newy > canvas.height)
      return;

    //step is good
    ctx.lineTo(newx,newy);
    ctx.stroke();
    x = newx;
    y = newy;
    ctx.closePath();
    color_iterations++;

    //change colors after 1,000 steps
    if (color_iterations >= 1000) {
      color_iterations = 0;
      idx++;
      if (idx > 7)
        idx = 0;
    }
    ctx.strokeStyle = colors[idx];

    iterations++;
    if (iterations > MAX_ITERATIONS) {
      clearInterval(id);
      console.log('done.');
      return;
    }

  }

  var id = setInterval( function() {walk(); } , 0);
  </script>

</body>
</html>

Thanks for reading. 😃

Follow me on Twitter @realEdwinTorres for more programming tips and help.

Blog

The Programming of Art

Edwin Torres

Join Our Newsletter. No Spam, Only the good stuff.

Related