Playing with the Canvas: Trippy Text

Here’s a little doo-hickey I made:

See the Pen Trippy Text by Seph Kramer (@sephhh) on CodePen.

Some text bounces around the screen, changing colors (controlled in part by mouse movements). You can click to move the text, and if you press return you can type in your own text.

A few reasons I made this:

I wanted to play around with an HTML5 Canvas
I wanted to get some practice with jQuery event handlers
I wanted something that was kinda fun to play with!

Here I thought I’d walk through some basics of using JavaScript to draw on a <canvas> element, and explain a bit of my code.

Using the Canvas

The first thing you need is a <canvas> element. You’ll probably want to give it an id too so you can easily select it with JavaScript. Here I’m also giving it a width and height, as well as a border to make it easier to see on the page.

<canvas id="myCanvas" height=200 width=200 style="border:1px solid #000000"></canvas>

Now to start drawing on this canvas we need to create a new context. By creating this context, you get a JavaScript object that you can call a bunch of methods on to render things on your canvas.

$(document).ready(function(){
  // set up initial variables
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  //...more to come
}

Here I select the canvas element, save it as c. Then I create a context object, which I save as ctx by calling c.getContext("2d"). (getContext also accepts webgl as an argument if you want to mess with 3D, but that’s a whole other story).

Now we can call all kinds of methods on ctx to start drawing stuff. Here’s how to draw some simple lines:

  ctx.beginPath();
  ctx.moveTo(100,0);
  ctx.lineTo(100,200);
  ctx.moveTo(0,100);
  ctx.lineTo(200,100);

  ctx.stroke();

You can imagine this code is controlling a pen. moveTo moves the pen point to a pixel location on the canvas, then lineTo tells it to put down the point and draw to another location. But nothing will actually appear on the canvas until we call stroke.

There’s plenty of other methods for drawing other shapes and text, but let’s move on to making a simple animation.

A Simple Animation

Here I’ll animate a red circle so that it floats across the canvas. Here’s a function that takes an x-coordinate and draws a red circle there:

function drawCircle(x){
  ctx.beginPath();
  ctx.arc(x,100,10,0,2*Math.PI);
  ctx.fillStyle="red";
  ctx.fill();
}

It’s pretty easy to make the circle move across the screen–all we need to do is repeat the following steps very quickly:

Clear off the canvas
Draw a circle at pixel x
Increment x

Here’s the code to do that:

var x = 0;
setInterval(function(){
  //clear out the entire canvas
  ctx.clearRect(0,0,200,200);
  //draw a circle at x
  drawCircle(x%200);
  //increment x
  x++;
}, 25);

Here I use setInterval to run a function every 25 milliseconds. Each time that function runs, it clears the screen, draws a new circle, then increments x so the circle will be drawn slightly to the right next time around. I use modulo in the expression x%200 to make the circle wrap around the canvas once x is higher than 200.

Trippy Text Event Handlers

For my little trippy text toy, I use setInterval the same way, but with a little extra logic. During each animation step I have to check if the text needs to bounce, plus I oscillate the blue value of the text’s color during each step. Also, I skip clearing the screen at each step so that the trail of the text remains on screen.

On top of that I added a couple of jQuery handlers to allow some interaction. This one responds to mouse movements to change the color of the text:

  $(document).mousemove(function(event){
    tt.gValue = Math.round(event.pageX*lScale);
    tt.rValue = Math.round(event.pageY*hScale);
  });

Here, tt is an object I defined to represent the floating text. When the mouse moves, I use the mouse’s x and y location, scale it to a value between 0 and 256, and set the gValue and rValue of the text object accordingly, changing it’s color.

Here’s the code that moves the text when you click the screen.

$(document).click(function(event){
    if (event.pageX > c.width-tt.xBuffer()){
       tt.textX = c.width-tt.xBuffer();
    }else{
       tt.textX = event.pageX;
    }
    if (event.pageY <= 50){
       tt.textY = 50;
    }else{
       tt.textY = event.pageY;
}

The basic idea is that when the canvas is clicked, the text should move to that click location. But first I check to see if the click is too close to an edge of the canvas, in which case I make sure there is a buffer (i.e. tt.xbuffer) between the text and the edge of the canvas (c.width).

Conclusion

That’s a quick rundown of working with a canvas in JavaScript, and some basics features of my little toy. It’s pretty easy to start having fun with the canvas, I definitely recommend fooling around with it sometime.

Seph’s Blog