| 1 | page = require('webpage').create()
|
|---|
| 2 |
|
|---|
| 3 | page.viewportSize = { width: 400, height : 400 }
|
|---|
| 4 | page.content = '<html><body><canvas id="surface"></canvas></body></html>'
|
|---|
| 5 |
|
|---|
| 6 | page.evaluate ->
|
|---|
| 7 | el = document.getElementById 'surface'
|
|---|
| 8 | context = el.getContext '2d'
|
|---|
| 9 | width = window.innerWidth
|
|---|
| 10 | height = window.innerHeight
|
|---|
| 11 | cx = width / 2
|
|---|
| 12 | cy = height / 2
|
|---|
| 13 | radius = width / 2.3
|
|---|
| 14 | i = 0
|
|---|
| 15 |
|
|---|
| 16 | el.width = width
|
|---|
| 17 | el.height = height
|
|---|
| 18 | imageData = context.createImageData(width, height)
|
|---|
| 19 | pixels = imageData.data
|
|---|
| 20 |
|
|---|
| 21 | for y in [0...height]
|
|---|
| 22 | for x in [0...width]
|
|---|
| 23 | i = i + 4
|
|---|
| 24 | rx = x - cx
|
|---|
| 25 | ry = y - cy
|
|---|
| 26 | d = rx * rx + ry * ry
|
|---|
| 27 | if d < radius * radius
|
|---|
| 28 | hue = 6 * (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI)
|
|---|
| 29 | sat = Math.sqrt(d) / radius
|
|---|
| 30 | g = Math.floor(hue)
|
|---|
| 31 | f = hue - g
|
|---|
| 32 | u = 255 * (1 - sat)
|
|---|
| 33 | v = 255 * (1 - sat * f)
|
|---|
| 34 | w = 255 * (1 - sat * (1 - f))
|
|---|
| 35 | pixels[i] = [255, v, u, u, w, 255, 255][g]
|
|---|
| 36 | pixels[i + 1] = [w, 255, 255, v, u, u, w][g]
|
|---|
| 37 | pixels[i + 2] = [u, u, w, 255, 255, v, u][g]
|
|---|
| 38 | pixels[i + 3] = 255
|
|---|
| 39 |
|
|---|
| 40 | context.putImageData imageData, 0, 0
|
|---|
| 41 | document.body.style.backgroundColor = 'white'
|
|---|
| 42 | document.body.style.margin = '0px'
|
|---|
| 43 |
|
|---|
| 44 | page.render('colorwheel.png')
|
|---|
| 45 |
|
|---|
| 46 | phantom.exit()
|
|---|
