Skip to content

Commit 7561db6

Browse files
franciscouzofranciscouzo
committed
Remove unnecessary options
1 parent e99f679 commit 7561db6

3 files changed

Lines changed: 58 additions & 152 deletions

File tree

‎ishihara/ishihara.js‎

Lines changed: 8 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,11 @@ const ishihara_input = {
3737
circular: true,
3838
resize: true,
3939
edge_detection: true,
40-
invert_colors: false,
41-
background_color: '#FFFFFF',
42-
n_colors_on: 3,
43-
n_colors_off: 6,
44-
color_on0: '#F9BB82',
45-
color_on1: '#EBA170',
46-
color_on2: '#FCCD84',
47-
color_on3: '#000000',
48-
color_on4: '#000000',
49-
color_on5: '#000000',
50-
color_off0: '#9CA594',
51-
color_off1: '#ACB4A5',
52-
color_off2: '#BBB964',
53-
color_off3: '#D7DAAA',
54-
color_off4: '#E5D57D',
55-
color_off5: '#D1D6AF',
56-
min_radius: (canvas.width + canvas.height) / 600,
57-
max_radius: (canvas.width + canvas.height) / 150,
58-
draw_ratio: 1,
40+
color_scheme: 'General 1',
41+
min_radius: (canvas.width + canvas.height) / 800,
42+
max_radius: (canvas.width + canvas.height) / 100,
5943
stop_after: 10000,
60-
incremental_radius: false,
44+
incremental_radius: true,
6145
shape_factory: 'Circle',
6246
sides: 4,
6347
pointiness: 0.75,
@@ -70,8 +54,7 @@ const ishihara_input = {
7054

7155
if (ishihara_input.text) renderText();
7256
const img_data = img_ctx.getImageData(0, 0, canvas.width, canvas.height);
73-
ctx.fillStyle = ishihara_input.background_color;
74-
ctx.fillRect(0, 0, canvas.width, canvas.height);
57+
ctx.clearRect(0, 0, canvas.width, canvas.height);
7558

7659
const FactoryClass = {
7760
'Circle': CircleFactory,
@@ -197,105 +180,15 @@ function renderText() {
197180
ctx.drawImage(img_canvas, 0, 0, canvas.width, canvas.height);
198181
}
199182

200-
function set_colors_folders() {
201-
for (let i = 0; i < 6; i++) {
202-
hide_gui_element(colors_on_folder, 'color_on' + i, i >= ishihara_input.n_colors_on);
203-
hide_gui_element(colors_off_folder, 'color_off' + i, i >= ishihara_input.n_colors_off);
204-
}
205-
}
206-
207-
const gui = new dat.GUI({
208-
load: {
209-
remembered: {
210-
'General 1': [{
211-
n_colors_on: 3,
212-
n_colors_off: 6,
213-
color_on0: '#F9BB82',
214-
color_on1: '#EBA170',
215-
color_on2: '#FCCD84',
216-
color_off0: '#9CA594',
217-
color_off1: '#ACB4A5',
218-
color_off2: '#BBB964',
219-
color_off3: '#D7DAAA',
220-
color_off4: '#E5D57D',
221-
color_off5: '#D1D6AF'
222-
}],
223-
'General 2': [{
224-
n_colors_on: 5,
225-
n_colors_off: 4,
226-
color_on0: '#89B270',
227-
color_on1: '#7AA45E',
228-
color_on2: '#B6C674',
229-
color_on3: '#7AA45E',
230-
color_on4: '#B6C674',
231-
color_off0: '#F49427',
232-
color_off1: '#C9785D',
233-
color_off2: '#E88C6A',
234-
color_off3: '#F1B081'
235-
}],
236-
'General 3': [{
237-
n_colors_on: 6,
238-
n_colors_off: 5,
239-
color_on0: '#89B270',
240-
color_on1: '#7AA45E',
241-
color_on2: '#B6C674',
242-
color_on3: '#7AA45E',
243-
color_on4: '#B6C674',
244-
color_on5: '#FECB05',
245-
color_off0: '#F49427',
246-
color_off1: '#C9785D',
247-
color_off2: '#E88C6A',
248-
color_off3: '#F1B081',
249-
color_off4: '#FFCE00'
250-
}],
251-
'Protanopia': [{
252-
n_colors_on: 2,
253-
n_colors_off: 3,
254-
color_on0: '#E96B6C',
255-
color_on1: '#F7989C',
256-
color_off0: '#635A4A',
257-
color_off1: '#817865',
258-
color_off2: '#9C9C84'
259-
}],
260-
'Protanomaly': [{
261-
n_colors_on: 2,
262-
n_colors_off: 3,
263-
color_on0: '#AD5277',
264-
color_on1: '#F7989C',
265-
color_off0: '#635A4A',
266-
color_off1: '#817865',
267-
color_off2: '#9C9C84'
268-
}],
269-
'Viewable by all': [{
270-
n_colors_on: 1,
271-
n_colors_off: 1,
272-
color_on0: '#FF934F',
273-
color_off1: '#9C9C9C'
274-
}],
275-
'Colorblind only': [{
276-
n_colors_on: 2,
277-
n_colors_off: 5,
278-
color_on0: '#A8AA00',
279-
color_on1: '#83BE28',
280-
color_off0: '#828200',
281-
color_off1: '#669A1B',
282-
color_off2: '#828200',
283-
color_off3: '#669A1B',
284-
color_off4: '#ED6311'
285-
}]
286-
}
287-
}
288-
});
289-
290-
gui.remember(ishihara_input);
183+
const gui = new dat.GUI();
291184

292185
gui.add(ishihara_input, 'load_image').name('Load image');
186+
gui.add(ishihara_input, 'color_scheme', ['General 1', 'General 2', 'General 3', 'Protanopia', 'Protanomaly', 'Viewable by all', 'Colorblind only']).name('Color scheme');
187+
293188
gui.add(ishihara_input, 'text').name('Text').onChange(() => renderText());
294189
gui.add(ishihara_input, 'circular').name('Circular');
295190
gui.add(ishihara_input, 'resize').name('Resize');
296191
gui.add(ishihara_input, 'edge_detection').name('Edge detection');
297-
gui.add(ishihara_input, 'invert_colors').name('Invert colors');
298-
gui.addColor(ishihara_input, 'background_color').name('Background color');
299192
gui.add(ishihara_input, 'shape_factory', ['Circle', 'Regular polygon', 'Cross', 'Star', 'Heart']).onChange(value => {
300193
hide_gui_element(gui, 'sides', value !== 'Regular polygon' && value !== 'Star');
301194
hide_gui_element(gui, 'pointiness', value !== 'Cross' && value !== 'Star');
@@ -304,15 +197,6 @@ gui.add(ishihara_input, 'shape_factory', ['Circle', 'Regular polygon', 'Cross',
304197
}).name('Shape');
305198
gui.add(ishihara_input, 'sides', 3, 12, 1).name('Sides');
306199
gui.add(ishihara_input, 'pointiness', 0.01, 0.99).name('Pointiness');
307-
gui.add(ishihara_input, 'n_colors_on', 1, 6, 1).name('Colors on').onChange(() => set_colors_folders());
308-
gui.add(ishihara_input, 'n_colors_off', 1, 6, 1).name('Colors off').onChange(() => set_colors_folders());
309-
310-
const colors_on_folder = gui.addFolder('Colors on');
311-
const colors_off_folder = gui.addFolder('Colors off');
312-
for (let i = 0; i < 6; i++) {
313-
colors_on_folder.addColor(ishihara_input, 'color_on' + i).name(i + 1);
314-
colors_off_folder.addColor(ishihara_input, 'color_off' + i).name(i + 1);
315-
}
316200

317201
gui.add(ishihara_input, 'min_radius', 2, 50).name('Min radius').onChange(() => {
318202
ishihara_input.max_radius = Math.max(ishihara_input.min_radius, ishihara_input.max_radius);
@@ -322,7 +206,6 @@ gui.add(ishihara_input, 'max_radius', 2, 50).name('Max radius').onChange(() => {
322206
ishihara_input.min_radius = Math.min(ishihara_input.min_radius, ishihara_input.max_radius);
323207
update_gui(gui);
324208
});
325-
gui.add(ishihara_input, 'draw_ratio', 0, 1, 0.01).name('Draw ratio');
326209
gui.add(ishihara_input, 'stop_after', 1000, 100000, 1).name('Stop after');
327210
gui.add(ishihara_input, 'incremental_radius').name('Incremental radius');
328211
gui.add(ishihara_input, 'generate').name('Generate');
@@ -334,7 +217,6 @@ gui.add(ishihara_input, 'download_svg').name('Download SVG');
334217
hide_gui_element(gui, 'sides', true);
335218
hide_gui_element(gui, 'pointiness', true);
336219
hide_gui_element(gui, 'stop', true);
337-
set_colors_folders();
338220

339221
let painting = false;
340222
let generating = false;

‎ishihara/shape_factories.js‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,13 @@ export class CircleFactory {
116116

117117
draw(ctx, circle) {
118118
ctx.beginPath();
119-
ctx.arc(circle.x, circle.y, circle.radius * this.options.draw_ratio, 0, 2 * Math.PI);
119+
ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
120120
ctx.fill();
121121
ctx.closePath();
122122
}
123123

124124
svg(circle, style) {
125-
return `<circle cx="${circle.x}" cy="${circle.y}" r="${circle.radius * this.options.draw_ratio}" fill="${style}" />`;
125+
return `<circle cx="${circle.x}" cy="${circle.y}" r="${circle.radius}" fill="${style}" />`;
126126
}
127127
}
128128

@@ -187,25 +187,19 @@ export class RegularPolygonFactory {
187187

188188
draw(ctx, polygon) {
189189
ctx.beginPath();
190-
ctx.moveTo(
191-
polygon.x + polygon.points[0].x * this.options.draw_ratio,
192-
polygon.y + polygon.points[0].y * this.options.draw_ratio
193-
);
190+
ctx.moveTo(polygon.x + polygon.points[0].x, polygon.y + polygon.points[0].y);
194191
for (let i = 1; i < polygon.points.length; i++) {
195-
ctx.lineTo(
196-
polygon.x + polygon.points[i].x * this.options.draw_ratio,
197-
polygon.y + polygon.points[i].y * this.options.draw_ratio
198-
);
192+
ctx.lineTo(polygon.x + polygon.points[i].x, polygon.y + polygon.points[i].y);
199193
}
200194
ctx.closePath();
201195
ctx.fill();
202196
}
203197

204198
svg(polygon, style) {
205199
const points = polygon.points.map(p =>
206-
`${polygon.x + p.x * this.options.draw_ratio},${polygon.y + p.y * this.options.draw_ratio}`
200+
`${polygon.x + p.x},${polygon.y + p.y}`
207201
);
208-
return `<polygon points="${points.join(' ')}" fill="${style}" />`;
202+
return `<polygon points="${points.join(" ")}" fill="${style}" />`;
209203
}
210204
}
211205

@@ -299,7 +293,7 @@ export class HeartFactory extends RegularPolygonFactory {
299293
}
300294

301295
draw(ctx, polygon) {
302-
const r = polygon.radius * this.options.draw_ratio;
296+
const r = polygon.radius;
303297
ctx.save();
304298
ctx.translate(polygon.x, polygon.y);
305299
ctx.rotate(polygon.rotation);
@@ -314,15 +308,15 @@ export class HeartFactory extends RegularPolygonFactory {
314308
}
315309

316310
svg(polygon, style) {
317-
const r = polygon.radius * this.options.draw_ratio;
311+
const r = polygon.radius;
318312
const deg = polygon.rotation * 180 / Math.PI;
319313
const d = [
320314
`M0,${r}`,
321315
`C${-r*0.75},${r*0.5} ${-r},0 ${-r},${-r*0.25}`,
322316
`C${-r},${-r*0.75} ${-r*0.5},${-r} 0,${-r*0.5}`,
323317
`C${r*0.5},${-r} ${r},${-r*0.75} ${r},${-r*0.25}`,
324318
`C${r},0 ${r*0.75},${r*0.5} 0,${r}Z`,
325-
].join(' ');
319+
].join(" ");
326320
return `<path d="${d}" transform="translate(${polygon.x},${polygon.y}) rotate(${deg})" fill="${style}" />`;
327321
}
328322
}

‎ishihara/worker.js‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,35 @@
1-
import { CircleFactory, RegularPolygonFactory, CrossFactory, StarFactory, HeartFactory } from './shape_factories.js';
1+
import { CircleFactory, RegularPolygonFactory, CrossFactory, StarFactory, HeartFactory } from "./shape_factories.js";
2+
3+
const COLOR_SCHEMES = {
4+
"General 1": {
5+
on: ["#F9BB82", "#EBA170", "#FCCD84"],
6+
off: ["#9CA594", "#ACB4A5", "#BBB964", "#D7DAAA", "#E5D57D", "#D1D6AF"]
7+
},
8+
"General 2": {
9+
on: ["#89B270", "#7AA45E", "#B6C674", "#7AA45E", "#B6C674"],
10+
off: ["#F49427", "#C9785D", "#E88C6A", "#F1B081"]
11+
},
12+
"General 3": {
13+
on: ["#89B270", "#7AA45E", "#B6C674", "#7AA45E", "#B6C674", "#FECB05"],
14+
off: ["#F49427", "#C9785D", "#E88C6A", "#F1B081", "#FFCE00"]
15+
},
16+
Protanopia: {
17+
on: ["#E96B6C", "#F7989C"],
18+
off: ["#635A4A", "#817865", "#9C9C84"]
19+
},
20+
Protanomaly: {
21+
on: ["#AD5277", "#F7989C"],
22+
off: ["#635A4A", "#817865", "#9C9C84"]
23+
},
24+
"Viewable by all": {
25+
on: ["#FF934F"],
26+
off: ["#9C9C9C"]
27+
},
28+
"Colorblind only": {
29+
on: ["#A8AA00", "#83BE28"],
30+
off: ["#828200", "#669A1B", "#828200", "#669A1B", "#ED6311"]
31+
}
32+
}
233

334
class SpatialHash {
435
constructor(cellSize, width, height) {
@@ -55,11 +86,11 @@ self.onmessage = function(e) {
5586
const { min_radius, max_radius, stop_after } = options;
5687

5788
const FactoryClass = {
58-
'Circle': CircleFactory,
59-
'Regular polygon': RegularPolygonFactory,
60-
'Cross': CrossFactory,
61-
'Star': StarFactory,
62-
'Heart': HeartFactory
89+
"Circle": CircleFactory,
90+
"Regular polygon": RegularPolygonFactory,
91+
"Cross": CrossFactory,
92+
"Star": StarFactory,
93+
"Heart": HeartFactory
6394
}[options.shape_factory];
6495

6596
let current_radius = max_radius;
@@ -111,15 +142,14 @@ self.onmessage = function(e) {
111142

112143
tries = 0;
113144

114-
const style = overlaps_image !== options.invert_colors
115-
? options[`color_on${Math.floor(Math.random() * options.n_colors_on)}`]
116-
: options[`color_off${Math.floor(Math.random() * options.n_colors_off)}`];
145+
const colors = COLOR_SCHEMES[options.color_scheme][overlaps_image ? "on" : "off"];
146+
const style = colors[Math.floor(Math.random() * colors.length)];
117147

118148
for (const shape of shapes) {
119-
postMessage({ action: 'shape', shape, style });
149+
postMessage({ action: "shape", shape, style });
120150
hash.insert(shape);
121151
}
122152
}
123153

124-
postMessage({ action: 'stop' });
154+
postMessage({ action: "stop" });
125155
};

0 commit comments

Comments
 (0)
⚡