Wednesday, March 31st, 2010

text/x-artwork with some coffee and graphics

Category: JavaScript, Showcase

<>p>Chris Lloyd has a fun demo that randomly shows off some art using CoffeeScript and Raphael in an interesting way.

lincolnshire

There is some choice coffee in there:

javascript
< view plain text >
  1. for tag in document.getElementsByTagName('script') when tag.type is 'text/x-artwork'
  2.         eval(CoffeeScript.compile(tag.innerHTML))

The coffee creates some Art which is encapsulated as:

  1. <script type='text/x-artwork'>
  2.       Art.add (color, focus) ->
  3.         min: 20
  4.         max: 300
  5.         for i in [0..rand(6)]
  6.           @circle(focus.x - max*0.5 + rand(max),
  7.                   focus.y - max*0.5 + rand(max), min + rand(max - min)).attr({
  8.                     stroke: color
  9.                   })
  10.     </script>
  11.     <script type='text/x-artwork'>
  12.       Art.add (color, focus) ->
  13.         size: 50+rand(150)
  14.         s: @set()
  15.      
  16.         for dir in [{x:0,y:1},{x:1,y:0},{x:0,y: -1},{x: -1,y:0}]
  17.           x: focus.x - size*0.5 + size*dir.x
  18.           y: focus.y - size*0.5 + size*dir.y
  19.           s.push @rect(x, y, size, size).attr({fill: color, stroke: 'none'})
  20.         s.rotate(45, focus.x, focus.y)
  21.     </script>

Posted by Dion Almaer at 6:26 am
3 Comments

+----
1.2 rating from 452 votes

3 Comments »

Comments feed TrackBack URI

This is nice. It’s not very obvious that there’s a small refresh button at the bottom right of the artwork for generating a new one.

Comment by Skilldrick — March 31, 2010

@Skilldrick – thanks for pointing that out – I was underwhelmed for a second

Comment by AngusC — March 31, 2010

Chris’s page is probably one of the most gorgeous and technically impressive personal sites I’ve seen. Bravo.

Comment by PaulIrish — March 31, 2010

Leave a comment

You must be logged in to post a comment.