radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add reverse stripes

main
Isaiah Odhner 2019-12-20 11:31:01 -05:00
parent f14a158ffd
commit bc7dc02b19
2 changed files with 47 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/app.js
View File

@ -506,80 +506,62 @@ const update_palette_from_theme = ()=> {
"hsl(355, 78%, 46%)",
"hsl(356, 97%, 64%)",
"#fcbaf8", // pink
// "hsl(56, 61%, 41%)", // green gold barf
// brown
"#ad4632",
"#5b3b1d",
// silver
"hsl(0, 0%, 90%)",
"hsl(22, 5%, 71%)",
// gold
"yellow",
"hsl(56, 61%, 41%)", // greenish gold
"hsl(48, 82%, 54%)",
"hsl(49, 82%, 72%)",
// "hsl(70, 46%, 95%)",
// red
// ...color_ramp(
// 4,
// [360, 100, 20, 100],
// [340, 100, 70, 100],
// ),
// red
// ...color_ramp(
// 4,
// [360, 100, 100, 100],
// [340, 100, 20, 100],
// ),
// "red", "green", "lime", "yellow",
// white to blue
...color_ramp(
6,
[200, 100, 100, 100],
[200, 100, 10, 100],
),
//
"#ad4632", // brown
"#5b3b1d", // brown
//
make_stripe_pattern([
"hsl(166, 93%, 38%)",
"hsl(355, 78%, 46%)",
]),
make_stripe_pattern([
"hsl(166, 93%, 38%)",
"white",
]),
make_stripe_pattern([
"white",
"hsl(355, 78%, 46%)",
]),
make_stripe_pattern([
"hsl(355, 78%, 46%)",
"white",
"white",
"hsl(355, 78%, 46%)",
"hsl(355, 78%, 46%)",
"hsl(355, 78%, 46%)",
"white",
"white",
"hsl(355, 78%, 46%)",
"white",
], 2),
make_stripe_pattern([
"hsl(166, 93%, 38%)",
"white",
"white",
"hsl(166, 93%, 38%)",
"hsl(166, 93%, 38%)",
"hsl(166, 93%, 38%)",
"white",
"white",
"hsl(166, 93%, 38%)",
"white",
], 2),
make_stripe_pattern([
"hsl(166, 93%, 38%)",
"white",
"hsl(355, 78%, 46%)",
"white",
], 2),
...([false, true].flatMap((reverse)=> [
make_stripe_pattern(reverse, [
"hsl(166, 93%, 38%)",
"white",
]),
make_stripe_pattern(reverse, [
"white",
"hsl(355, 78%, 46%)",
]),
make_stripe_pattern(reverse, [
"hsl(355, 78%, 46%)",
"white",
"white",
"hsl(355, 78%, 46%)",
"hsl(355, 78%, 46%)",
"hsl(355, 78%, 46%)",
"white",
"white",
"hsl(355, 78%, 46%)",
"white",
], 2),
make_stripe_pattern(reverse, [
"hsl(166, 93%, 38%)",
"white",
"white",
"hsl(166, 93%, 38%)",
"hsl(166, 93%, 38%)",
"hsl(166, 93%, 38%)",
"white",
"white",
"hsl(166, 93%, 38%)",
"white",
], 2),
make_stripe_pattern(reverse, [
"hsl(166, 93%, 38%)",
"white",
"hsl(355, 78%, 46%)",
"white",
], 2),
])),
];
$colorbox.rebuild_palette();
} else {

5
src/functions.js
View File

@ -1612,7 +1612,7 @@ function make_monochrome_palette(){
return palette;
}
function make_stripe_pattern(colors, stripe_size=4){
function make_stripe_pattern(reverse, colors, stripe_size=4){
const rgba_colors = colors.map(get_rgba_from_color);
const pattern_canvas = document.createElement("canvas");
@ -1627,7 +1627,8 @@ function make_stripe_pattern(colors, stripe_size=4){
for(let y = 0; y < pattern_canvas.height; y += 1){
const pixel_index = ((y * pattern_image_data.width) + x) * 4;
// +1000 to avoid remainder on negative numbers
const color_index = Math.floor((x - y + 1000) / stripe_size) % colors.length;
const pos = reverse ? (x - y) : (x + y);
const color_index = Math.floor((pos + 1000) / stripe_size) % colors.length;
const rgba = rgba_colors[color_index];
pattern_image_data.data[pixel_index + 0] = rgba[0];
pattern_image_data.data[pixel_index + 1] = rgba[1];