-
Notifications
You must be signed in to change notification settings - Fork 62
/
halftone.js
58 lines (48 loc) · 1.61 KB
/
halftone.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
importScripts('helpers.js', 'external/stackblur.min.js')
postMessage(['sliders', defaultControls.concat([
{ label: 'Divisions', value: 25, min: 10, max: 100 },
{ label: 'Factor', value: 100, min: 10, max: 400 },
{ label: 'Cutoff', value: 0, min: 0, max: 254},
{ label: 'Interlaced', type: 'checkbox' },
{ label: 'Diamond', type: 'checkbox' },
])]);
onmessage = function (e) {
const [config, pixData] = e.data;
const major = (config.width + config.height) / config.Divisions / 2;
const interlaced = config.Interlaced;
const factor = config.Factor;
const diamond = config.Diamond;
StackBlur.imageDataRGB(pixData, 0, 0, config.width, config.height, Math.round(major / 2))
const getPixel = pixelProcessor(config, pixData)
let hm = major / 2
let tog = false
let circles = []
let lines = []
for (let y = hm; y < config.height; y += major) {
tog = !tog;
let xOff = (interlaced && tog) ? major / 2 : 0;
for (let x = hm + xOff; x < config.width; x += major) {
//circles in the pixel center
let z = getPixel(x, y);
if (z < config.Cutoff) continue;
let radious = z * hm / 255 * factor / 100;
if (!diamond) {
circles.push({ x: x - hm / 2, y: y - hm / 2, r: radious });
}
else {
let p1 = [x - radious, y];
let p2 = [x, y - radious];
let p3 = [x + radious, y];
let p4 = [x, y + radious];
lines.push([p1, p2]);
lines.push([p2, p3]);
lines.push([p3, p4]);
lines.push([p4, p1]);
}
}
}
if (circles.length>0)
postCircles(circles);
if (lines.length>0)
postLines(lines);
}