Skip to content

Commit

Permalink
Optimized shape definitions for JS minimizers.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmester
dmester committed Jul 31, 2020
1 parent e197ad5 commit 6b22e51
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 126 deletions.
12 changes: 6 additions & 6 deletions src/renderer/iconGenerator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import { Transform } from "./transform";
import { Graphics } from "./graphics";
import { CENTER_SHAPES, OUTER_SHAPES } from "./shapes";
import { centerShape, outerShape } from "./shapes";
import { colorTheme } from "./colorTheme";
import { parseHex } from "../common/parseHex";
import { getConfiguration } from "../common/configuration";
Expand Down Expand Up @@ -37,14 +37,14 @@ export function iconGenerator(renderer, hash, config) {
const y = 0 | (padding + size / 2 - cell * 2);

function renderShape(colorIndex, shapes, index, rotationIndex, positions) {
const shape = shapes[parseHex(hash, index, 1) % shapes.length];
const shapeIndex = parseHex(hash, index, 1);
let r = rotationIndex ? parseHex(hash, rotationIndex, 1) : 0;

renderer.beginShape(availableColors[selectedColorIndexes[colorIndex]]);

for (let i = 0; i < positions.length; i++) {
graphics._transform = new Transform(x + positions[i][0] * cell, y + positions[i][1] * cell, cell, r++ % 4);
shape(graphics, cell, i);
shapes(shapeIndex, graphics, cell, i);
}

renderer.endShape();
Expand Down Expand Up @@ -82,11 +82,11 @@ export function iconGenerator(renderer, hash, config) {

// ACTUAL RENDERING
// Sides
renderShape(0, OUTER_SHAPES, 2, 3, [[1, 0], [2, 0], [2, 3], [1, 3], [0, 1], [3, 1], [3, 2], [0, 2]]);
renderShape(0, outerShape, 2, 3, [[1, 0], [2, 0], [2, 3], [1, 3], [0, 1], [3, 1], [3, 2], [0, 2]]);
// Corners
renderShape(1, OUTER_SHAPES, 4, 5, [[0, 0], [3, 0], [3, 3], [0, 3]]);
renderShape(1, outerShape, 4, 5, [[0, 0], [3, 0], [3, 3], [0, 3]]);
// Center
renderShape(2, CENTER_SHAPES, 1, null, [[1, 1], [2, 1], [2, 2], [1, 2]]);
renderShape(2, centerShape, 1, null, [[1, 1], [2, 1], [2, 2], [1, 2]]);

renderer.finish();
}
241 changes: 121 additions & 120 deletions src/renderer/shapes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,148 +4,149 @@
* Copyright © Daniel Mester Pirttijärvi
*/

export const CENTER_SHAPES = [
/** @param {Graphics} g */
function (g, cell) {
const k = cell * 0.42;
/**
* @param {number} index
* @param {Graphics} g
* @param {number} cell
*/
export function centerShape(index, g, cell) {
index = index % 14;

let k, m, w, h, inner, outer;

!index ? (
k = cell * 0.42,
g.addPolygon([
0, 0,
cell, 0,
cell, cell - k * 2,
cell - k, cell,
0, cell
]);
},
/** @param {Graphics} g */
function (g, cell) {
const w = 0 | (cell * 0.5),
h = 0 | (cell * 0.8);
g.addTriangle(cell - w, 0, w, h, 2);
},
/** @param {Graphics} g */
function (g, cell) {
const s = 0 | (cell / 3);
g.addRectangle(s, s, cell - s, cell - s);
},
/** @param {Graphics} g */
function (g, cell) {
let inner = cell * 0.1,
// Use fixed outer border widths in small icons to ensure the border is drawn
outer =
cell < 6 ? 1 :
cell < 8 ? 2 :
(0 | (cell * 0.25));

])) :

index == 1 ? (
w = 0 | (cell * 0.5),
h = 0 | (cell * 0.8),

g.addTriangle(cell - w, 0, w, h, 2)) :

index == 2 ? (
w = 0 | (cell / 3),
g.addRectangle(w, w, cell - w, cell - w)) :

index == 3 ? (
inner = cell * 0.1,
// Use fixed outer border widths in small icons to ensure the border is drawn
outer =
cell < 6 ? 1 :
cell < 8 ? 2 :
(0 | (cell * 0.25)),

inner =
inner > 1 ? (0 | inner) : // large icon => truncate decimals
inner > 0.5 ? 1 : // medium size icon => fixed width
inner; // small icon => anti-aliased border

g.addRectangle(outer, outer, cell - inner - outer, cell - inner - outer);
},
/** @param {Graphics} g */
function (g, cell) {
const m = 0 | (cell * 0.15),
s = 0 | (cell * 0.5);
g.addCircle(cell - s - m, cell - s - m, s);
},
/** @param {Graphics} g */
function (g, cell) {
let inner = cell * 0.1,
outer = inner * 4;
inner, // small icon => anti-aliased border

// Align edge to nearest pixel in large icons
if (outer > 3) {
outer = 0 | outer;
}
g.addRectangle(outer, outer, cell - inner - outer, cell - inner - outer)) :

index == 4 ? (
m = 0 | (cell * 0.15),
w = 0 | (cell * 0.5),
g.addCircle(cell - w - m, cell - w - m, w)) :

g.addRectangle(0, 0, cell, cell);
index == 5 ? (
inner = cell * 0.1,
outer = inner * 4,

// Align edge to nearest pixel in large icons
outer > 3 && (outer = 0 | outer),

g.addRectangle(0, 0, cell, cell),
g.addPolygon([
outer, outer,
cell - inner, outer,
outer + (cell - outer - inner) / 2, cell - inner
], true);
},
/** @param {Graphics} g */
function (g, cell) {
], true)) :

index == 6 ?
g.addPolygon([
0, 0,
cell, 0,
cell, cell * 0.7,
cell * 0.4, cell * 0.4,
cell * 0.7, cell,
0, cell
]);
},
/** @param {Graphics} g */
function (g, cell) {
g.addTriangle(cell / 2, cell / 2, cell / 2, cell / 2, 3);
},
/** @param {Graphics} g */
function (g, cell) {
g.addRectangle(0, 0, cell, cell / 2);
g.addRectangle(0, cell / 2, cell / 2, cell / 2);
g.addTriangle(cell / 2, cell / 2, cell / 2, cell / 2, 1);
},
/** @param {Graphics} g */
function (g, cell) {
let inner = cell * 0.14,
// Use fixed outer border widths in small icons to ensure the border is drawn
outer =
cell < 4 ? 1 :
cell < 6 ? 2 :
(0 | (cell * 0.35));
]) :

index == 7 ?
g.addTriangle(cell / 2, cell / 2, cell / 2, cell / 2, 3) :

index == 8 ? (
g.addRectangle(0, 0, cell, cell / 2),
g.addRectangle(0, cell / 2, cell / 2, cell / 2),
g.addTriangle(cell / 2, cell / 2, cell / 2, cell / 2, 1)) :

index == 9 ? (
inner = cell * 0.14,
// Use fixed outer border widths in small icons to ensure the border is drawn
outer =
cell < 4 ? 1 :
cell < 6 ? 2 :
(0 | (cell * 0.35)),

inner =
cell < 8 ? inner : // small icon => anti-aliased border
(0 | inner); // large icon => truncate decimals

g.addRectangle(0, 0, cell, cell);
g.addRectangle(outer, outer, cell - outer - inner, cell - outer - inner, true);
},
/** @param {Graphics} g */
function (g, cell) {
const inner = cell * 0.12,
outer = inner * 3;

g.addRectangle(0, 0, cell, cell);
g.addCircle(outer, outer, cell - inner - outer, true);
},
/** @param {Graphics} g */
function (g, cell) {
g.addTriangle(cell / 2, cell / 2, cell / 2, cell / 2, 3);
},
/** @param {Graphics} g */
function (g, cell) {
const m = cell * 0.25;
g.addRectangle(0, 0, cell, cell);
g.addRhombus(m, m, cell - m, cell - m, true);
},
/** @param {Graphics} g */
function (g, cell, index) {
const m = cell * 0.4, s = cell * 1.2;
if (!index) {
g.addCircle(m, m, s);
}
},
];

export const OUTER_SHAPES = [
/** @param {Graphics} g */
function (g, cell) {
g.addTriangle(0, 0, cell, cell, 0);
},
/** @param {Graphics} g */
function (g, cell) {
g.addTriangle(0, cell / 2, cell, cell / 2, 0);
},
/** @param {Graphics} g */
function (g, cell) {
g.addRhombus(0, 0, cell, cell);
},
/** @param {Graphics} g */
function (g, cell) {
const m = cell / 6;
g.addCircle(m, m, cell - 2 * m);
},
];
(0 | inner), // large icon => truncate decimals

g.addRectangle(0, 0, cell, cell),
g.addRectangle(outer, outer, cell - outer - inner, cell - outer - inner, true)) :

index == 10 ? (
inner = cell * 0.12,
outer = inner * 3,

g.addRectangle(0, 0, cell, cell),
g.addCircle(outer, outer, cell - inner - outer, true)) :

index == 11 ?
g.addTriangle(cell / 2, cell / 2, cell / 2, cell / 2, 3) :

index == 12 ? (
m = cell * 0.25,
g.addRectangle(0, 0, cell, cell),
g.addRhombus(m, m, cell - m, cell - m, true)) :

// 13
(
!index && (
m = cell * 0.4, w = cell * 1.2,
g.addCircle(m, m, w)
)
);
}

/**
* @param {number} index
* @param {Graphics} g
* @param {number} cell
*/
export function outerShape(index, g, cell) {
index = index % 4;

let m;

!index ?
g.addTriangle(0, 0, cell, cell, 0) :

index == 1 ?
g.addTriangle(0, cell / 2, cell, cell / 2, 0) :

index == 2 ?
g.addRhombus(0, 0, cell, cell) :

// 3
(
m = cell / 6,
g.addCircle(m, m, cell - 2 * m)
);
}

0 comments on commit 6b22e51

Please sign in to comment.