An object that does not reflect light that is at a constant temperature emits a spectrum of light according to Planck's law. At different temperatures the shape and intensity of the spectra are different. And so the colour of that object appears to be different.

Drag left and right to

]]>An object that does not reflect light that is at a constant temperature emits a spectrum of light according to Planck's law. At different temperatures the shape and intensity of the spectra are different. And so the colour of that object appears to be different.

Drag left and right to adjust the temperature. The sun is roughly 5800K, the spectrum underneath is the approximate shape of the spectrum of sunlight as it leaves the sun. Different stars are at different tempteratures and appear to be different colours.

Note the spectrum at the bottom is mixed with faint white light (or grey) here. This brings the colours within the renderable space of your screen and you can imagine how the true colours of the spectrum might appear without the grey.

]]>Here we take our spectral colour picker and plot the colours using the CIE xyY colour space.

How much of the space can you explore? What is the shape of explorable space? How do you create the colours on the boundary?

]]>Here we take our spectral colour picker and plot the colours using the CIE xyY colour space.

How much of the space can you explore? What is the shape of explorable space? How do you create the colours on the boundary?

]]>A colour picker with a difference. Drag over the bottom half to paint a spectrum. The colour we perceive from light with these wavelengths at these intensities is shown at the top. The brightest possible intensity of that colour your screen can display is chosen.

Note that some colours can

]]>A colour picker with a difference. Drag over the bottom half to paint a spectrum. The colour we perceive from light with these wavelengths at these intensities is shown at the top. The brightest possible intensity of that colour your screen can display is chosen.

Note that some colours can be created with totally different spectra.

Can you make white light?

]]>Here you can move and resize two different spectra to see how the colours interact.

Dragging left and right moves the position of the spectrum, up and down controls the size.

Drag at the top to move the top spectrum, at the bottom to move the bottom and in the

]]>Here you can move and resize two different spectra to see how the colours interact.

Dragging left and right moves the position of the spectrum, up and down controls the size.

Drag at the top to move the top spectrum, at the bottom to move the bottom and in the centre to move both.

Some quite pretty results are possible.

]]>Hello, I want to do some experiments in colour.

The way we usually treat colour in computer graphics is as a linear combination of red, green and blue components. Indeed this is how it is displayed to us by our screens. However the light that reaches our retina and makes

]]>Hello, I want to do some experiments in colour.

The way we usually treat colour in computer graphics is as a linear combination of red, green and blue components. Indeed this is how it is displayed to us by our screens. However the light that reaches our retina and makes us perceive colour is actually made up of lots of individual photons. Each of these has a wavelength. The different wavelengths activate our light receptors on our retinas to different degrees.

Light from a laser contains photons of only one wavelength. Light from other sources (e.g. the sun) contains photons of varying numbers at all different wavelengths. This is called a spectrum.

The real-time graphic above tries to show the closest colour on your monitor that matches the colour of a laser at each wavelength. The shortest wavelength is on the left [390nm] and the longest on the right [830nm]. I used color matching functions to calculate the tristimulus values then the sRGB specification to translate that into the familiar red, blue and green components for your screen to display.

New CIE XYZ functions transformed from the CIE (2006) LMS functions Wikipedia - sRGB

]]>I'm back, and it's time for something very unsexy. Blue (or Poisson disc) noise is a 2-dimensional noise where every pair of points is at least a certain distance apart. It's very useful for sampling or for generating eye-pleasing patterns. A progressive ranking of a set of points is such

]]>I'm back, and it's time for something very unsexy. Blue (or Poisson disc) noise is a 2-dimensional noise where every pair of points is at least a certain distance apart. It's very useful for sampling or for generating eye-pleasing patterns. A progressive ranking of a set of points is such that any subset of the first n points is also distributed in a blue noise pattern.

I read this paper and was very impressed by the beauty of the approach and the results. I recommend at least watching the video. I have implemented this partially in javascript above.

Drag right and left to alter the number of points.

Coded in javascript using HTML5 canvas (2d) for rendering.

]]>After making the voronoi sphere generator I wanted to show how nice meshes are created if the points are evenly distributed. One way of doing this would be to write a blue noise algorithm. I also wanted to show how the mesh can be dynamic if the points move.

I

]]>After making the voronoi sphere generator I wanted to show how nice meshes are created if the points are evenly distributed. One way of doing this would be to write a blue noise algorithm. I also wanted to show how the mesh can be dynamic if the points move.

I then realised I could show both of these at once by allowing the points to repel each other. The points are moving on the surface of a spher and repelled from each other proportional to the inverse square of the angle between them. There is a constant drag on the velocity which allows the points to settle.

Drag the points around to see the others react. Drag elsewhere to move the camera.

Coded in javascript using HTML5 canvas (2d) for rendering.

Colours from Kuler.

I recently played Polyfauna by Radiohead. Lovely app plus the intro was in this great vector style. It reminded me a lot of Vib-Ribbon.

I thought I'd try my hand at recreating a similar effect. Here it is! I designed the typeface myself (also a new experience).

Tap the screen

]]>I recently played Polyfauna by Radiohead. Lovely app plus the intro was in this great vector style. It reminded me a lot of Vib-Ribbon.

I thought I'd try my hand at recreating a similar effect. Here it is! I designed the typeface myself (also a new experience).

Tap the screen to make everything go 'squiggly'.

Coded in javascript using HTML5 canvas (2d) for rendering.

]]>We were watching a 'making of' where GMUNK was discussing an effect in TRON Legacy. He mentioned using a Voronoi diagram for a geometric shape. Now a simple 2d plane made up of voronoi cells will break if you warp it around, the faces will not remain planar in general.

]]>We were watching a 'making of' where GMUNK was discussing an effect in TRON Legacy. He mentioned using a Voronoi diagram for a geometric shape. Now a simple 2d plane made up of voronoi cells will break if you warp it around, the faces will not remain planar in general. There is a natural 3-dimensional analogue to the Voronoi diagram, with three dimensional cells, but it has a different aesthetic.

Here I have created a natural analogue to the 2d voronoi diagram but on the surface of a sphere. Each of the blue dots generates a plane normal to it and edges and vertices are calculated as intersections between those planes. Edges are equidistant from generating points.

Drag the points around to change the polyhedron. Drag elsewhere to move the camera.

Coded in javascript using HTML5 canvas (2d) for rendering.

Colours from Kuler.

In my last post I showed a toy I made. Although I was happy with what I'd made in a day. It had a bunch of bugs and annoyances I was pretty sure I could sort out with a little more time.

The points could easily get stuck. They didn't

]]>In my last post I showed a toy I made. Although I was happy with what I'd made in a day. It had a bunch of bugs and annoyances I was pretty sure I could sort out with a little more time.

The points could easily get stuck. They didn't move smoothly against each other. It was possible to break the connections by moving things at awkward angles.

My day dedicating to fixing it didn't go as smoothly as hoped, and it's probably not worth spending any longer on the idea. Above is a work in progress that can generate some quite pretty results. I have implemented continuous collision detection and multitouch.

Drag the circles around. When touching they will be connected with a line.

]]>Here's a little toy I made. Drag the blobs around and see how the lines wrap around each other.

I'm really happy with the result. The whole thing was written from scratch, and despite no traditional physics engine or techniques being used the result feels tactile and solid.

If I

]]>Here's a little toy I made. Drag the blobs around and see how the lines wrap around each other.

I'm really happy with the result. The whole thing was written from scratch, and despite no traditional physics engine or techniques being used the result feels tactile and solid.

If I were to spend more time it would be to rewrite a lot of the code to allow for variable line widths, blobs being able to slide past each other rather than just getting stuck and multitouch support.

Coded in javascript using HTML5 canvas for rendering.

Colours from Kuler.

Line-line intersection test from jsPerf.

]]>