Using Canvas in HTML5 – Richard Nuckolls Professional Site

For my Art History class on Modern Art, I created a work of Conceptual Art. This work of post-modernist theory explores a non-determinist approach to building a unique creation. The method abstracts the input of the artist, who creates a framework for the piece and then sets in motion the process which completes it. This particular work, called “Orbs”, uses the new HTML5 canvas to create a random number of randomly sized and colored circles in the webpage on each page load. Due to the large number of random elements no two views of the art work should repeat.

http://www.rnuckolls.com/concept.html

The body of the page is quite simple.

<body onload="loadShapes();">
   <canvas id="mycanvas"></canvas>
</body>

The javascript does all the randomizing and painting of the canvas.

<script type="text/javascript">
function loadShapes(){
  drawShape(getRandomArbitary(20,50));
}
function getRandomArbitary (min, max) {
    return Math.random() * (max - min) + min;
}
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
function drawShape(count){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

  var w = screen.availWidth-30;
  var h = screen.availHeight-100;

  var rand1 = getRandomArbitary(0,w);
  var rand2 = getRandomArbitary(0,h);
  var rand3 = Math.round(getRandomArbitary(10,50));
  var color1 = "#" + Math.round(getRandomArbitary(111111,999999));
  var color2 = "#" + Math.round(getRandomArbitary(111111,999999));
  var colorRGB = "rgba(" + hexToRgb(color1).r +","+ hexToRgb(color1).g +","+ hexToRgb(color1).b + ",0)";
  var radgrad = ctx.createRadialGradient(rand1,rand2,rand3,rand1+7,rand2+5,rand3+20);

    ctx.canvas.width = w;
    ctx.canvas.height = h;

  for (var i=0;i<count;i++){
    // Create gradients
    radgrad.addColorStop(0, color1);
    radgrad.addColorStop(0.9, color2);
    radgrad.addColorStop(1, colorRGB);
    // draw shapes
    ctx.fillStyle = radgrad;
    ctx.fillRect(0,0,w,h);
    rand1 = getRandomArbitary(0,w);
    rand2 = getRandomArbitary(0,h);
    rand3 = Math.round(getRandomArbitary(10,50));
    color1 = "#" + Math.round(getRandomArbitary(111111,999999));
    color2 = "#" + Math.round(getRandomArbitary(111111,999999));
    radgrad = ctx.createRadialGradient(rand1,rand2,rand3,rand1+7,rand2+5,rand3+(Math.round(rand3*1.5)));
  }

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}
</script>

Leave a Reply Cancel reply