Anxious Silence

Spaceship

Posted May 22nd, 2010 19:43 by Bob

Quick spaceship. I long for the day I can make a living drawing spaceships, robots and ducks. AND NOTHING ELSE. Done in illustrator, spaceship is for a specific project but I wanged it on a background as liked it enough to stick it on the web.

Rocket


HTML5 Canvas Fountain

Posted May 22nd, 2010 19:36 by Bob

HTML5 Fountain Animation Screenshot

A bit more arsing about with HTML5. Purely decorative, completely non-interactive this time. An animated fountain based on one I wrote in AS3 which in turn was based closely on one from the absolutely brilliant Foundation ActionScript 3 Animation: Making Things Move! (seriously, if you need a good basis in programmed animation/interaction this book is a godsend, explained in simple terms and with a brilliant separation of concept from code so the information and tutorials can be easily applied to languages other than Actionscript 3).

View Demo.

Converting to Javascript was pretty straight forward, after all the syntax has the same origins. It’s slightly easier to achieve in Actionscript as Flash has built in the concepts of independent visual objects, wheras the canvas tag does not and so you need to roll your own, which for a simple example as this is not a problem, and I’m guessing there will be some nice JS frameworks around fairly soon which will make the job easier. Strongly tempted to convert a load of the other tutorials from Foundation AS3 to Javascript as well but not a great use of time and the author may (understandably) hunt me down and beat me to death.

The app is pretty simple, it generates a load of circles, each with it’s own direction, velocity, colour and size which move away from the center, when they are off the screen they are reset with new velocity, colour, size, etc and put back to the center again. That’s it. Here’s the code, it’s not very polished but it works…

(download the js source)

The HTML

Just the required bits…

  1. <canvas width="500" height="400" id="MyCanvas">I AM A CANVAS!</canvas>

That was easy. You just need a canvas tag. I’ve given it the original id of ‘MyCanvas’. Next up…

The Javascript

Once again, I’ve used jQuery to get things moving quickly, you don’t need to but it makes life easier.

  1. var tId;
  2. var cHeight = 0;
  3. var cWidth = 0;
  4. var numBalls = 100;
  5. var balls = new Array();

First we set some global variables as follows:

  • tId: A variable to hold the interval id. We don’t actually need this but it’s handy if we wanted to add more functionality later, and good practice (IMHO).
  • cHeight, cWidth: The canvas dimensions. Will be set shortly.
  • numBalls: The number of balls you wish to display. Change this if you fancy.
  • balls: An array of ball objects.
  1. function Ball(){
  2.         this.xPos = 0;
  3.         this.yPos = 0;
  4.         this.vx = 0;
  5.         this.vy = 0;
  6.         this.radius = 5;
  7.         this.colour;
  8.         this.wind;
  9.         this.gravity;
  10.         this.sizeWobble;
  11.  
  12.         this.reset = function() {
  13.                 this.xPos = cWidth / 2;
  14.                 this.yPos = cHeight / 2;
  15.                 this.vx = Math.random() * 10 - 5;
  16.                 this.vy = Math.random() * 10 - 5;
  17.                 this.colour = randomColour();
  18.                 this.wind = Math.random() * 2 - 1;
  19.                 this.gravity = Math.random() * 2 - 1;
  20.                 this.radius = Math.random() * 20 + 5;
  21.                 this.sizeWobble = Math.random() * 2 - 1;
  22.         }
  23. }

Define a ‘Ball’ class. The xPos/yPos determine the ball’s current position in the canvas. vx and vy are the Ball’s x and y velocity. Wind and Gravity and horizontal and vertical force. The strangely named ’sizeWobble’ is the amount the ball radius changes each frame. The reset function sets up the ball, most parameters are randomly generated, xPos and yPos are set to the center of the canvas.

  1. jQuery(document).ready(function($){
  2.  
  3.         // Set canvas values
  4.         cHeight = parseInt($(‘#MyCanvas’).height());
  5.         cWidth = parseInt($(‘#MyCanvas’).width());
  6.  
  7.         // Generate balls
  8.         for(var i = 0;i < numBalls;i++){
  9.                 balls.push(new Ball());
  10.                 balls[i].reset();
  11.         }
  12.  
  13.         tId = setInterval(‘drawBalls()’, 50);
  14.  
  15. });

The core of the script. Wrapped up in a nice jQuery document ready handler. First we set the globals for the canvas dimensions (as used by the reset method in the Ball class). Then we loop as many times as we want balls, create a new ball each loop instance, add it to the balls array and reset it.

Once our balls are created we use setInterval to call the ‘drawBalls’ function every 50 microseconds.

  1. function drawBalls(){
  2.         clearCanvas();
  3.         var context = document.getElementById(‘MyCanvas’).getContext(‘2d’);
  4.         for(var i = 0;i < numBalls;i++){
  5.                 drawCircle(balls[i].xPos, balls[i].yPos, balls[i].radius, balls[i].colour);
  6.                 balls[i].vy += balls[i].gravity;
  7.                 balls[i].vx += balls[i].wind;
  8.                 balls[i].xPos += balls[i].vx;
  9.                 balls[i].yPos += balls[i].vy;
  10.                 if(balls[i].radius > 2){
  11.                         balls[i].radius += balls[i].sizeWobble;
  12.                 }
  13.  
  14.                 if(
  15.                         balls[i].xPos - balls[i].radius > cWidth||
  16.                         balls[i].xPos + balls[i].radius < 0||
  17.                         balls[i].yPos - balls[i].radius > cHeight||
  18.                         balls[i].yPos + balls[i].radius < 0
  19.                         ){
  20.                                 balls[i].reset();
  21.                         }
  22.  
  23.         }
  24. }

This is the function that’s called each ‘frame’ by the setInterval command. First we clear the canvas. Next we get a context for the canvas. Then we loop through the array of balls. For each one we:

  1. Draw it using drawCircle, passing it’s current position, radius and colour
  2. Adjust it’s x and v velocity modifiers using the gravity/wind values
  3. Update it’s stored position using it’s velocity modifiers
  4. If it’s radius is greater than 2 adjust it by it’s sizeWobble! (the min size check ensures it doesn’t completely disappear)
  5. If it is no longer on the canvas, reset it.

That’s pretty much it, the remaining three functions are helpers. clearCanvas clears the canvas by setting it’s width (must find a more logical method of doing this). randomColour returns a random colour in the appropriate format and drawCircle draws a circle to the canvas…

  1. function clearCanvas(){
  2.         $(‘#MyCanvas’).attr(‘width’,$(‘#MyCanvas’).attr(‘width’));
  3. }
  4.  
  5. function randomColour(){
  6.         var red = Math.round(Math.random() * 255);
  7.         var green = Math.round(Math.random() * 255);
  8.         var blue = Math.round(Math.random() * 255);
  9.         return "rgb(" + red + ", " + green + ", " + blue + ")";
  10. }
  11.  
  12. function drawCircle(cx, cy, radius, colour){
  13.     var ctx = document.getElementById(‘MyCanvas’).getContext(‘2d’);
  14.     ctx.fillStyle = colour;
  15.     ctx.strokeStyle = "rgb(60, 80, 50)";
  16.     ctx.beginPath();
  17.     ctx.arc(cx,cy,radius,0,Math.PI*2,true); // Outer circle
  18.     ctx.fill();
  19.     ctx.stroke();
  20. }

View Demo.


Quack?

Posted May 9th, 2010 17:33 by Bob

We took a day off last weekend. No work, no study, etc and went to feed the ducks on Ray Mill Island (not for the whole day, there’s only so long you can spend distributing bread to waterfowl). Was great to get away from technology and swearing for a bit, I showed Karen how to get the geese to come and take bread out of your hand (they are a lot less threatening when you are offering food) and we saw some baby geese and moorhens. Only slightly marred when we sat down with ice cream and someone’s dog came and crapped right in front of us. Lovely. Here are some pictures. (Promise to post something that isn’t just a bunch of pictures soon).

DSC_6699

DSC_6687

DSC_6675

DSC_6669

DSC_6661


Keeping Me Sane

Posted May 5th, 2010 21:50 by Bob

As the daily grind of reality stomps on my throat for kicks I need STUFF to help me get through the day. Here’s some awesome stuff which I will utterly fail to describe properly (how the hell did I ever run a record label).

worriedaboutsatan as recommended a couple of times by Nick. Some words that may or may not describe them: ambient, electronic, interesting, exciting, strange. My favourites are Arrivals and Arrivals Remixed. There’s plently of free stuff on their website to download and get a taste and a fair amount on their soundcloud account – worriedaboutsatan on soundcloud – including a full length live set.

Yndi Halda another great band to code to. Enjoy Eternal Bliss is just beautiful instrumental post-rock. Few reviews have rather negatively complained about lack of originality with comparisons to Mogwai or Godspeed You! Black Emperor, but fuck ‘em it’s a lovely EP, a little more accessible than a lot of post-rock and at an average of about 15 minutes a track for 3 quid there’s not much to complain about.

Sick Music 2 as pointed out by DeathBoy. I know close to fuck all about Drum ‘n’ Bass and breakbeat aside from a growing love of the stuff. No idea of which artists to look for or where to look but apparently Hospital Records is a good starting point. Excellent set of tracks for very little cash. Much prefer the instrumental tracks, although those with vocals don’t grate too badly. Ace for keeping energy levels up when working until the stupid hours.

The Gentleman’s Review Favourite podcast of the moment, heard about it through the fucking awesomely funny Precious Little. I don’t know how to describe it other than: Three men, sometimes a lady, sometimes a dog, Doctor Who, cheese, chaps, filth, leftie, humour, shouting, drunk, Yorkshire, geeks, what? Listen to it, it’s free. Even when it’s not outstandingly funny (which it often is) it’s always engaging.

Reincarnationfish – War With The Newts video – Ace new mashup video for the new Reincarnationfish track.

This Is Radio Silence – I Blame – Sublime music (as always) from This Is Radio Silence

Spucktute – Go To War - Free to download EP from Max from History Of Guns new band. Dark, harsh and not afraid to terrify.

Jim Bob – Storage Stories – Having completely forgotten I had pre-ordered this it was an extra-nice surprise when it turned up. First novel by Jim Bob of Carter USM, it’s heaving with the same dark wit (sometimes a little cheesy in a good way) that I’ve come to love from Carter lyrics. About halfway through and it’s absolutely brilliant. Story of an ex-rock star who has taken over the running of a self storage unit and the strange and interesting characters he encounters. You can get it on Amazon – Storage Stories (and get me some affiliate pennies) but I’d recommend going straight to the source and giving the author a bit more.

Pip pip!