I’ve played with visualising the forces between particles that repel each other before, but I thought I’d have a little play around with how I could use that to create something that actually looked good (to me at least!)

I put it together on codepen (which is my new favourite tool, by the way) so feel free to fork it and see what you can do with it!

It takes a little while to draw, but it’s quite interesting seeing it building up.

The javascript code

var WIDTH = 800,
	HEIGHT = 500,
	PARTICLES = [],
	STARTING_COUNT = 600,
	MAX_PARTICLES = 600,
	DAMPING = 0.05,
	CURRENT_FRAME = 0,
 PADDING = 10;

var canvas = document.getElementsByTagName ('canvas')[0];
canvas.width = WIDTH;
canvas.height = HEIGHT;

var ctx = canvas.getContext ('2d');

function random (min, max) {
	return (Math.random() * (max - min) + min);
}


function _particleTimer () {
	addParticle (random(0, WIDTH), random(0, HEIGHT));
	if (PARTICLES.length < STARTING_COUNT) setTimeout(_particleTimer, 0);
}


function init () {
	_particleTimer();
	animate();
}


function addParticle (x, y) {
	PARTICLES.push ({
		position: {
			x: x || random(0, WIDTH),
			y: y || random (0, HEIGHT)
		},
		force : {
			x: 0,
			y: 0
		},
		vel : {
			x: 0,
			y: 0
		}
	});
}

function animate () {
	while (PARTICLES.length > MAX_PARTICLES) PARTICLES.shift ();


	CURRENT_FRAME++;
  

	
	
	var force = {x : 0, y: 0};
	for (var i = 0; i < PARTICLES.length; i++) {
		var p1 = PARTICLES[i];
	

		for (var j = i + 1; j < PARTICLES.length; j++) {
			var p2 = PARTICLES[j];

			// length vector
			force.x = p2.position.x - p1.position.x;
			force.y = p2.position.y - p1.position.y;

			var magnitude = mag (force);

			var actingDistance = 50-magnitude;

			if ((actingDistance > 0) && (magnitude > 0)) {
				var red = 0;
				var green = 255;

				var color = green - actingDistance * (green / 2);
				if (color < 0) color = 0;
				if (color > 255) color = 255;

    if (color < 115 && color > 10) {
			  	ctx.save ();
			  	ctx.strokeStyle = 'hsla(' + color + ', 100%, 50%, 0.05)';
				  ctx.strokeWidth = 1;
			  	ctx.beginPath ();
			  	ctx.moveTo (p1.position.x, p1.position.y);
				  ctx.lineTo (p2.position.x, p2.position.y);
			  	ctx.stroke();
				  ctx.closePath();
			  	ctx.restore ();
    }

				force.x *= DAMPING * actingDistance / magnitude;
				force.y *= DAMPING * actingDistance / magnitude;
				p1.force.x -= force.x;
				p1.force.y -= force.y;

				p2.force.x += force.x;
				p2.force.y += force.y;
			}
		}
		draw (p1);
		update (p1);
	}
 if (CURRENT_FRAME > 1500) {
   alert('finised drawing!');
   document.getElementById("message").innerHTML = 'Done!';
 } else {
   setTimeout(animate, 0);
 }
}

function mag (vector) {
	return Math.sqrt (vector.x * vector.x + vector.y * vector.y);
}

function update (particle) {
	with (particle) {
		vel.x += force.x;
		vel.y += force.y;
		vel.x *= 0.8;
		vel.y *= 0.8;

		position.x += vel.x;
		position.y += vel.y;

		force.x = 0;
		force.y = 0;

		if (position.x > WIDTH - PADDING) {
			position.x = random(PADDING, WIDTH - PADDING);
		}
		if (position.x < PADDING - 3) {
			position.x = random(PADDING, WIDTH - PADDING);
		}
		if (position.y > HEIGHT - PADDING) {
			position.y = random(PADDING, HEIGHT - PADDING);
		}
		if (position.y < PADDING-3) {
			position.y = random(HEIGHT, HEIGHT - PADDING);
		}
	}
}

function draw (particle) {
	ctx.save ();
 ctx.globalCompositeOperation = 'xor';
	ctx.translate (particle.position.x, particle.position.y);
	ctx.fillStyle = "rgba(255,255,255,0.1)";

 ctx.fillRect (0, 0, 1, 1);
	ctx.restore ();
}

init();

I wondered the other day – where is the most awesome place on earth RIGHT NOW? That made me think two things:

1. we overuse the word awesome
2. it would be cool to use this as an excuse to use the Twitter streaming API

So I fired up npm, installed ntwitter and within minutes had simple program that printed out to the console time there was a tweet (with a location) that had the word ‘awesome’ in it. I then got it to store them in a MySQL database as well, and excitedly got to work hacking together a PHP script to read the tweets from the last hour and output them as JSON.

It was an amazing moment when I loaded up the page and saw it working properly for the first time. Unsurprisingly, the place where awesome is mentioned most often is in the US, but it’s interesting to watch the red moves across the country through the night.

Visit the awesometer!

The processing code

// canvas colour
int background_color = color(70, 70, 70);
// particle colours
color[] colors = {
      color (227, 211, 31), // yellow
      color (227, 31, 123), // pink
      color (31, 188, 227) // blue
    };
// colour of the stroke around the particles
color stroke_color = color(0, 70); // black, 70% alpha

// should the mouse draw particles when moved?
Boolean INTERACTIVE = true;
// should the canvas be cleared on each particle iteration
Boolean CLEAR = false;

//-----------------------------------------------------------------//
//-----------------------------------------------------------------//
//-----------------------------------------------------------------//
//-----------------------------------------------------------------//
ArrayList particles;

// reset on mouse click
void mouseClicked () {
  setup();
  mouseMoved();
}

// save on press spacebar
void keyPressed () {
  if (keyCode == RETURN || keyCode == ENTER) {
    save("Colourful entrails " + year() + "-" + month() + "-" + day() + " " + hour() + ":" + minute() + ":" + second() + ".png");
  }
}

// add particles on mouse move
void mouseMoved () {
  if (!INTERACTIVE) return;
  int count = int(random(2, 5)); 
  while(count-- > 0) {
    addParticle(new PVector(mouseX, mouseY));
  }
}

void setup() {
  size(800, 400, P2D);
  blendMode(ADD);
  stroke(stroke_color);  
  background(background_color);

  particles = new ArrayList();

  // create a particle which'll go around making particles if it's not interactive  
  if (!INTERACTIVE) {
    Particle generator = new Particle(new PVector(width/2, height/2));
    generator.size = 10000;
    while(generator.isAlive()) {
      int count = int(random(2,5));
      generator.update();
      while (count-- > 0) {
        addParticle(generator.position);
      }
    }
  }
}

// add a new particle to the particles arraylist with specified position
void addParticle (PVector position) {
  // clone the vector 
  PVector position_clone = new PVector(position.x, position.y);
  particles.add(new Particle(position_clone));
}

void draw() {
  // keep track of dead particles - they'll be removed after the loop
  ArrayList dead = new ArrayList();

  if (CLEAR) {
    fill(background_color);
    rect(0, 0, width, height);
  }

  // go through each of the particles and update/draw
  ListIterator it = particles.listIterator();
  while (it.hasNext()) {
    Particle particle = (Particle) it.next();
    // only draw if it's alive
    if (particle.isAlive()) {
      particle.update();
      particle.draw();
    } else { // otherwise add to dead list
      dead.add(particle);
    }
  }
  // remove all dead particles
  particles.removeAll(dead);
}

// a tad messy, building it up as i go along
class Particle 
{
  PVector position;
  PVector velocity;
  PVector force;
  float size;
  color c;
  int life;

  Particle (PVector p) {
    life = 0;
    position = p;
    size = random(30, 50);
    velocity = new PVector(random(2, 5), 0);
    rotate2D(velocity, random(0, TWO_PI));
    c = colors[int(random(colors.length))];
    force = new PVector(0, 1);
  }

  void update () {
    life++;
    if (life == 20) {
      velocity.mult(1.1);
    }
    if (life < 20) {
      size *= 0.99;
    } else {
      size *= 0.95;
    }

    position.add(velocity);
    velocity.rotate(random(-QUARTER_PI, QUARTER_PI));
  }
  void draw () {
    pushMatrix();
    translate(position.x, position.y);
    fill (c);
    ellipse(0, 0, size, size);
    popMatrix();
  }
  Boolean isAlive() {
    return size >= 1;
  }
}

void rotate2D(PVector v, float theta) {
  float xTemp = v.x;
  v.x = v.x*cos(theta) - v.y*sin(theta);
  v.y = xTemp*sin(theta) + v.y*cos(theta);
}

The thing is, like many developers, I started out in my career thinking that I could design. Then I joined a design agency (to work as a developer) and realised that actually my design was rubbish. So I went down the route of taking an existing wordpress theme and extending it. Then adding loads of plugins to it. I stopped caring about it because it wasn’t mine.

For the last year, I’ve been trying to fix this by designing my own theme. It was never meant to take a year – the original plan was to bang it out over a weekend – after all, I know that I can build a theme in a day or two. But the problem was that I was never happy with how it looked. It was never good enough so I (unintentionally) stopped working on it and it slipped off of my todo list. The knock-on effect of this was that I didn’t want to write anything because I was focusing all of my attention on the design.

Finally, it’s time to think:

SCREW THIS!

I’ve thrown the old redesign away, quickly thrown together something which looks like it has promise rather than looking finished, and made it live. I’m using this as a technique to embarrass myself into actually completing a redesign and turning slightlymore into the well oiled machine that I know that it deserves to be. Sure – things might look a bit ropey from time-to-time, there will inevitably be some bugs, but the thing that I’ve realised is that even though those things aren’t ideal, it’s much better to have a site which is actually functional and usable than something which is complete and broken.

Wish me luck!

I’ve recently become obsessed with the night sky. I think that it was Jupiter turning up in October last year which did it. Since then I’ve looked up for Jupiter on a nightly basis, and have become interested in what else is up there too. While I don’t know what most of the constellations are, I’m beginning to know to look for certain things based on other things in the sky, which is pretty cool.

Anyway, I charged up my camera battery and thought that I’d start taking pictures of space. Yesterday I got a couple of blurry overexposed pictures, but today I tweaked the settings a little and ended up with the picture shown above. I’m really impressed.

void setup () 
{
  smooth();
  size(500,900);
  render ();
}

void render () 
{
  fill (0, 0);
  background(255, 100, 0);
  for (int i = 0; i < random(50, 200); i++)
  {
    drawRings ();
  }
}

void drawRings ()
{

  float radius = random (20, width/1.4);
  float x = random (0, width);
  float y = random (0, height);
  for (int i = 0; i < radius; i++)
  {
    float w = random (50, 100);
    float redness = random (5, 200);

    for (int j = 0; j < w; j++)
    {
      stroke (redness, 0, 0, i);
      ellipse (x, y, i, i);
      i++;
    }
  }
}

void mouseClicked () 
{
  render();
}

void setup () 
{
  smooth();
  size(500,900);
  render ();
}

void render () 
{
  fill (0, 0);
  background(255, 100, 0);
  for (int i = 0; i < random(50, 200); i++)
  {
    drawRings ();
  }
}

void drawRings ()
{

  float radius = random (20, width/1.4);
  float x = random (0, width);
  float y = random (0, height);
  for (int i = 0; i < radius; i++)
  {
    float redness = random (50, 200);
    stroke (redness, 0, 0, i);
    ellipse (x, y, i, i);
  }
}

void mouseClicked () 
{
  render();
}

I saw this picture today and I had a little chuckle to myself when I read this post on a roller coaster forum I read.

Not sure if it’s BREAKING NEWS, but…

We (the coaster nerds) have been following the construction of this since around this time last year, so “BREAKING NEWS” hardly fits. I remember watching the video of it being tested back in October – and I’ve been excited about riding it for longer than I should admit to.

Click here to view the video on YouTube.

Photo credit

float oldx = -999;
float oldy = -999;
float x;
float y;
int colour = 0;

void setup ()
{
  smooth();
  size (600, 600);

  drawit ();
}

void drawit ()
{
  background(155);
  oldx = -999;
  oldy = -999;
  colour = 0;
  int spirals = floor(random(500));
  println("drawing" + spirals);
  for (int i = 0; i < spirals; i++)
  {

    stroke (colour, 0, random(colour), 10);
    strokeWeight(random(i / 10));
    spiral ();
    colour+=255/spirals;
  }
}

void spiral ()
{
  float variance = random(360);
  float angle = variance;
  float r = 0;
  float endangle = random(1500) + variance;
  float inc = random (1.6) - 0.8;
  while (abs(angle) < endangle)
  {

  x = cos(radians(angle)) * r + random(10);
  y = sin(radians(angle)) * r + random(10);
  if (abs(oldx) > -999)
  {
    line (x + width/2, y+ height/2, oldx + width/2, oldy + height/2);
  }
  oldx = x + cos(radians(angle));
  oldy = y + sin(radians(angle));
  angle+=inc;
  r+=.1;
}
}
void draw () 
{
}
void keyPressed () 
{

  if (keyCode == DOWN)
  {
    drawit ();
  }
  if (keyCode == RETURN || keyCode == ENTER)
  {
    saveFrame ("frame-####.tiff");
  }
}

int frame = 0;
void setup () {
  size (800, 300);
  background(0);
  smooth ();
}

void draw () {
  int step = 10;
  float lastx = -999;
  float lasty = -999;
  float ynoise = random(10);
  float y;
  float xsteps = width;
  float ysteps = 100;

  
  colorMode(HSB, ysteps);
  for (int i = 0; i < ysteps; i++) {
    for (int x = 0; x < xsteps; x++)
    {
      y = (height / ysteps) * i + (noise(ynoise) ) * 80 - 40;
      if (lastx > -999) {
        stroke (i, 100, 100);
        line (x, y, lastx, lasty);
      }
      lastx = x;
      lasty = y;
      ynoise += 0.1;
    }
  }
  if (frame > 20 && frame < 500)
  {
    // you can use quicktime to convert the image sequence to a movie. 
    saveFrame ("frame-####.png");
  }
  frame++;
}