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