Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
Donnie Flood authored and Donnie Flood committed Nov 2, 2019
1 parent 747def6 commit e5b0406
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 73 deletions.
10 changes: 4 additions & 6 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
module.exports = {
"roots": [
"<rootDir>/src"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
roots: ["<rootDir>/src"],
transform: {
"^.+\\.tsx?$": "ts-jest",
},
}
};
19 changes: 7 additions & 12 deletions src/sketches/learn/gd-book/ch-1/p.1.2.2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,14 @@ import p5, { COLOR_MODE } from "p5";
import { sortColors, HsbgSortMode } from "../../../utils/color";
var image = require("./subway.jpg");



// Generative Design P.1.2.2
function sketch(p: p5) {

let img: p5.Image;
let sortMode: HsbgSortMode | undefined;


p.setup = () => {
p.createCanvas(420, 420);
img = p.loadImage(image)
img = p.loadImage(image);
};

p.draw = () => {
Expand Down Expand Up @@ -47,9 +43,8 @@ function sketch(p: p5) {
}
}
// show the sortMode
p.fill('black');
p.text(`sortMode: ${sortMode || 'none'}`, 0, 0, 100, 100);

p.fill("black");
p.text(`sortMode: ${sortMode || "none"}`, 0, 0, 100, 100);
};

// switch between color modes
Expand All @@ -59,16 +54,16 @@ function sketch(p: p5) {
sortMode = undefined;
break;
case "5":
sortMode = "hue"
sortMode = "hue";
break;
case "6":
sortMode = "saturation"
sortMode = "saturation";
break;
case "7":
sortMode = "brightness"
sortMode = "brightness";
break;
case "8":
sortMode = "grayscale"
sortMode = "grayscale";
break;
}
};
Expand Down
82 changes: 29 additions & 53 deletions src/sketches/utils/color.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,93 +3,69 @@ import chroma from "chroma-js";
import p5 from "p5";

describe("colorToGrayscale", () => {

it('calculates gray from red', () => {
it("calculates gray from red", () => {
const grayFromRed = colorToGrayscale("#ff0000");
expect(grayFromRed).toEqual("#363636");
});

it('calculates gray from green', () => {
it("calculates gray from green", () => {
const grayFromGreen = colorToGrayscale("#00ff00");
expect(grayFromGreen).toEqual("#b6b6b6");
});

it('calculates gray from blue', () => {
it("calculates gray from blue", () => {
const grayFromBlue = colorToGrayscale("#0000ff");
expect(grayFromBlue).toEqual("#121212");
});

it('calculates white from white', () => {
it("calculates white from white", () => {
const white = colorToGrayscale("#ffffff");
expect(white).toEqual("#ffffff")
})
expect(white).toEqual("#ffffff");
});

it('calculates black from black', () => {
it("calculates black from black", () => {
const black = colorToGrayscale("#000000");
expect(black).toEqual("#000000")
})

})
expect(black).toEqual("#000000");
});
});

describe("color sorting", () => {
const white_to_black = chroma.scale(['white', 'black']).colors(12);
const white_to_black = chroma.scale(["white", "black"]).colors(12);

it("ignores sorting for color mode undefined", () => {
expect(sortColors(white_to_black)).toEqual(white_to_black)
})
expect(sortColors(white_to_black)).toEqual(white_to_black);
});

it("sorts colors from black to white for grayscale", () => {
const black_to_white = chroma.scale(['black', 'white']).colors(12);
expect(sortColors(white_to_black, "grayscale")).toEqual(black_to_white)
})
const black_to_white = chroma.scale(["black", "white"]).colors(12);
expect(sortColors(white_to_black, "grayscale")).toEqual(black_to_white);
});

it("sorts by hue", () => {
const mixed_hue = [
chroma.hsv(200, 0, 0.1).hex(),
chroma.hsv(300, 0, 0.1).hex(),
chroma.hsv(100, 0, 0.1).hex(),
]
const sorted_hue = [
chroma.hsv(300, 0, 0.1).hex(),
chroma.hsv(200, 0, 0.1).hex(),
chroma.hsv(100, 0, 0.1).hex(),
]
const mixed_hue = [chroma.hsv(200, 0, 0.1).hex(), chroma.hsv(300, 0, 0.1).hex(), chroma.hsv(100, 0, 0.1).hex()];
const sorted_hue = [chroma.hsv(300, 0, 0.1).hex(), chroma.hsv(200, 0, 0.1).hex(), chroma.hsv(100, 0, 0.1).hex()];
// console.log("mixed_hue", mixed_hue, mixed_hue.map((value) => chroma(value).get('hsv.h')))
// console.log("sorted_hue", sorted_hue, sorted_hue.map((value) => chroma(value).get('hsv.h')))
expect(sortColors(mixed_hue, "hue")).toEqual(sorted_hue)
})
expect(sortColors(mixed_hue, "hue")).toEqual(sorted_hue);
});

it("sorts by saturation", () => {
const mixed_sat = [
chroma.hsv(300, 0.6, 0.1).hex(),
chroma.hsv(200, 1, 0.1).hex(),
chroma.hsv(100, 0.2, 0.1).hex(),
]
const mixed_sat = [chroma.hsv(300, 0.6, 0.1).hex(), chroma.hsv(200, 1, 0.1).hex(), chroma.hsv(100, 0.2, 0.1).hex()];
const sorted_sat = [
chroma.hsv(100, 0.2, 0.1).hex(),
chroma.hsv(300, 0.6, 0.1).hex(),
chroma.hsv(200, 1, 0.1).hex(),
]
];
// console.log("mixed_sat", mixed_sat, mixed_sat.map((value) => chroma(value).get('hsv.s')))
// console.log("sorted_sat", sorted_sat, sorted_sat.map((value) => chroma(value).get('hsv.s')))
expect(sortColors(mixed_sat, "saturation")).toEqual(sorted_sat)
})
expect(sortColors(mixed_sat, "saturation")).toEqual(sorted_sat);
});

it("sorts by brightness", () => {
const mixed_bright = [
chroma.hsv(180, 1, 0.2).hex(),
chroma.hsv(180, 1, 0.3).hex(),
chroma.hsv(180, 1, 0.1).hex(),
]
const sorted_bright = [
chroma.hsv(180, 1, 0.1).hex(),
chroma.hsv(180, 1, 0.2).hex(),
chroma.hsv(180, 1, 0.3).hex(),
]
const mixed_bright = [chroma.hsv(180, 1, 0.2).hex(), chroma.hsv(180, 1, 0.3).hex(), chroma.hsv(180, 1, 0.1).hex()];
const sorted_bright = [chroma.hsv(180, 1, 0.1).hex(), chroma.hsv(180, 1, 0.2).hex(), chroma.hsv(180, 1, 0.3).hex()];
// console.log("mixed_bright", mixed_bright, mixed_bright.map((value) => chroma(value).get('hsv.v')))
// console.log("sorted_bright", sorted_bright, sorted_bright.map((value) => chroma(value).get('hsv.v')))
expect(sortColors(mixed_bright, "brightness")).toEqual(sorted_bright)
})


})
expect(sortColors(mixed_bright, "brightness")).toEqual(sorted_bright);
});
});
4 changes: 2 additions & 2 deletions src/sketches/utils/color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ export function sortColors(colors: string[], sortMode?: HsbgSortMode) {
return -1;
}
return 0;
})
});
}

export function colorToGrayscale(rgbaHex: string): string {
// simply calculate C Linear (don't worry about nonlinear gamma correction)
// https://stackoverflow.com/questions/17615963/standard-rgb-to-grayscale-conversion
const [r, g, b] = chroma(rgbaHex).gl();
const clinear = 0.2126 * r + 0.7152 * g + 0.0722 * b;
return chroma([clinear, clinear, clinear], "gl").hex()
return chroma([clinear, clinear, clinear], "gl").hex();
}

0 comments on commit e5b0406

Please sign in to comment.