Improved color palette
This commit is contained in:
parent
c53373ea47
commit
5ed92b5ff4
1
carts/tmp/some_sprites.fx
Normal file
1
carts/tmp/some_sprites.fx
Normal file
File diff suppressed because one or more lines are too long
@ -351,9 +351,9 @@ const valueColor = COLOR.ORANGE;
|
|||||||
const stringColor = COLOR.GREEN;
|
const stringColor = COLOR.GREEN;
|
||||||
const regexColor = stringColor;
|
const regexColor = stringColor;
|
||||||
const punctuationColor = COLOR.LIGHTGRAY;
|
const punctuationColor = COLOR.LIGHTGRAY;
|
||||||
const commentColor = COLOR.GRAY;
|
const commentColor = COLOR.DARKGREEN;
|
||||||
const identifierColor = COLOR.REDDISH;
|
const identifierColor = COLOR.RED;
|
||||||
const invalidColor = COLOR.RED;
|
const invalidColor = COLOR.DARKRED;
|
||||||
|
|
||||||
const tokenColors = {
|
const tokenColors = {
|
||||||
"StringLiteral": stringColor,
|
"StringLiteral": stringColor,
|
||||||
@ -382,7 +382,7 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number)
|
|||||||
focusX,
|
focusX,
|
||||||
focusY,
|
focusY,
|
||||||
} = state;
|
} = state;
|
||||||
fillRect(x, y, w, h, COLOR.DARKBLUE);
|
fillRect(x, y, w, h, COLOR.DARKERBLUE);
|
||||||
if (anchor === focus) {
|
if (anchor === focus) {
|
||||||
fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
|
fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
|
||||||
} else {
|
} else {
|
||||||
|
127
colors.ts
127
colors.ts
@ -1,22 +1,119 @@
|
|||||||
|
const hue_gray = 230;
|
||||||
|
const hue_brown = 30;
|
||||||
|
const hue_orange = 37;
|
||||||
|
const hue_purple = 280;
|
||||||
|
const hue_pink = 310;
|
||||||
|
const hue_red = 340;
|
||||||
|
const hue_red_shade = 335;
|
||||||
|
const hue_yellow = 57;
|
||||||
|
const hue_green = 130;
|
||||||
|
const hue_green_shade = 145;
|
||||||
|
const hue_sky = 203;
|
||||||
|
const hue_blue = 224;
|
||||||
|
const hue_blue_shade = 235;
|
||||||
|
const hue_blue_shade_2 = 240;
|
||||||
|
|
||||||
|
const saturation_max = 90;
|
||||||
|
const saturation_normal = 60;
|
||||||
|
const saturation_low = 40;
|
||||||
|
const saturation_min = 13;
|
||||||
|
|
||||||
|
const lightness_max = 95;
|
||||||
|
const lightness_light = 67;
|
||||||
|
const lightness_mediumlight = 62;
|
||||||
|
const lightness_medium = 50;
|
||||||
|
const lightness_mediumdark = 40;
|
||||||
|
const lightness_dark = 30;
|
||||||
|
const lightness_almostverydark = 25;
|
||||||
|
const lightness_verydark = 20;
|
||||||
|
const lightness_min = 5;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts an HSL color value to RGB. Conversion formula
|
||||||
|
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
|
||||||
|
* Assumes h, s, and l are contained in the set [0, 1] and
|
||||||
|
* returns r, g, and b in the set [0, 255].
|
||||||
|
*
|
||||||
|
* @param Number h The hue
|
||||||
|
* @param Number s The saturation
|
||||||
|
* @param Number l The lightness
|
||||||
|
* @return Array The RGB representation
|
||||||
|
*/
|
||||||
|
function hsl(h: number, s: number, l: number): [number, number, number] {
|
||||||
|
h = h / 360;
|
||||||
|
s = s/100;
|
||||||
|
l = l/100;
|
||||||
|
let r, g, b;
|
||||||
|
|
||||||
|
if (s == 0) {
|
||||||
|
r = g = b = l; // achromatic
|
||||||
|
} else {
|
||||||
|
const hue2rgb = (p: number, q: number, t: number) => {
|
||||||
|
if (t < 0) t += 1;
|
||||||
|
if (t > 1) t -= 1;
|
||||||
|
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||||
|
if (t < 1/2) return q;
|
||||||
|
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
|
||||||
|
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||||
|
const p = 2 * l - q;
|
||||||
|
|
||||||
|
r = hue2rgb(p, q, h + 1/3);
|
||||||
|
g = hue2rgb(p, q, h);
|
||||||
|
b = hue2rgb(p, q, h - 1/3);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [ r , g , b ];
|
||||||
|
}
|
||||||
|
|
||||||
const colors = {
|
const colors = {
|
||||||
TRANSPARENT: [0, 0, 0],
|
TRANSPARENT: [0, 0, 0],
|
||||||
BLACK: [0, 0, 0],
|
BLACK2: [0, 0, 0],
|
||||||
WHITE: [1, 1, 1],
|
BLACK3: [0, 0, 0],
|
||||||
RED: [1, 0, 0],
|
BLACK4: [0, 0, 0],
|
||||||
YELLOW: [1, 1, 0],
|
WHITE: hsl(hue_gray, saturation_min, lightness_max),
|
||||||
GREEN: [0, 1, 0],
|
LIGHTGRAY: hsl(hue_gray, saturation_min, lightness_light),
|
||||||
BLUE: [0.1, 0.5, 1],
|
DARKGRAY: hsl(hue_gray, saturation_min, lightness_dark),
|
||||||
DARKBLUE: [0.05, 0.1, 0.3],
|
BLACK: hsl(hue_gray, saturation_min, lightness_min),
|
||||||
BROWN: [0.6, 0.5, 0.4],
|
ORANGE: hsl(hue_orange, saturation_normal, lightness_medium),
|
||||||
GRAY: [0.5, 0.5, 0.5],
|
TAN: hsl(hue_brown, saturation_low, lightness_light),
|
||||||
PURPLE: [0.7, 0.1, 0.85],
|
BROWN: hsl(hue_brown, saturation_low, lightness_mediumdark),
|
||||||
ORANGE: [0.95, 0.75, 0.25],
|
DARKBROWN: hsl(hue_brown, saturation_low, lightness_almostverydark),
|
||||||
CYAN: [0, 0.9, 0.9],
|
PURPLE: hsl(hue_purple, saturation_normal, lightness_medium),
|
||||||
LIGHTGRAY: [0.75, 0.75, 0.75],
|
PINK: hsl(hue_pink, saturation_normal, lightness_light),
|
||||||
REDDISH: [216/255, 59/255, 113/255],
|
RED: hsl(hue_red, saturation_normal, lightness_medium),
|
||||||
DARKGREEN: [0, 0.6, 0.2],
|
DARKRED: hsl(hue_red_shade, saturation_normal, lightness_dark),
|
||||||
|
YELLOW: hsl(hue_yellow, saturation_max, lightness_mediumlight),
|
||||||
|
GREEN: hsl(hue_green, saturation_normal, lightness_medium),
|
||||||
|
DARKGREEN: hsl(hue_green_shade, saturation_normal, lightness_dark),
|
||||||
|
DARKERGREEN: hsl(hue_green_shade, saturation_normal, lightness_verydark),
|
||||||
|
CYAN: hsl(hue_sky, saturation_max, lightness_light),
|
||||||
|
BLUE: hsl(hue_blue, saturation_normal, lightness_medium),
|
||||||
|
DARKBLUE: hsl(hue_blue_shade, saturation_normal, lightness_mediumdark),
|
||||||
|
DARKERBLUE: hsl(hue_blue_shade_2, saturation_normal, lightness_dark),
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
|
// const colors = {
|
||||||
|
// TRANSPARENT: [0, 0, 0],
|
||||||
|
// BLACK: [0, 0, 0],
|
||||||
|
// WHITE: [1, 1, 1],
|
||||||
|
// RED: [1, 0, 0],
|
||||||
|
// YELLOW: [1, 1, 0],
|
||||||
|
// GREEN: [0, 1, 0],
|
||||||
|
// BLUE: [0.1, 0.5, 1],
|
||||||
|
// DARKBLUE: [0.05, 0.1, 0.3],
|
||||||
|
// BROWN: [0.6, 0.5, 0.4],
|
||||||
|
// GRAY: [0.5, 0.5, 0.5],
|
||||||
|
// PURPLE: [0.7, 0.1, 0.85],
|
||||||
|
// ORANGE: [0.95, 0.75, 0.25],
|
||||||
|
// CYAN: [0, 0.9, 0.9],
|
||||||
|
// LIGHTGRAY: [0.75, 0.75, 0.75],
|
||||||
|
// REDDISH: [216/255, 59/255, 113/255],
|
||||||
|
// DARKGREEN: [0, 0.6, 0.2],
|
||||||
|
// } as const;
|
||||||
|
|
||||||
export const palette: Array<[number, number, number, number]> = Object.values(colors).map(val => [...val, 1]);
|
export const palette: Array<[number, number, number, number]> = Object.values(colors).map(val => [...val, 1]);
|
||||||
|
|
||||||
export const COLOR = Object.fromEntries(Object.keys(colors).map((name, i) => [name, Number(i)])) as {[key in keyof typeof colors]: number};
|
export const COLOR = Object.fromEntries(Object.keys(colors).map((name, i) => [name, Number(i)])) as {[key in keyof typeof colors]: number};
|
@ -1 +1 @@
|
|||||||
[{"sheet_type":"code","value":""},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null}]
|
[{"sheet_type":"code","value":"// Sample\n\nreturn {\n\tinit() {},\n\tupdate() {},\n\tdraw() {\n\t\tcls();\n\t\ttxt(10,10,\"Hello, World!\");\n\t}\n}"},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null}]
|
14
spritetab.ts
14
spritetab.ts
@ -19,14 +19,14 @@ const state = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const paletteX = 88;
|
const paletteX = 88;
|
||||||
const paletteY = 12;
|
const paletteY = 16;
|
||||||
const swatchW = 8;
|
const swatchW = 8;
|
||||||
const swatchH = 8;
|
const swatchH = 8;
|
||||||
const paletteW = 4;
|
const paletteW = 4;
|
||||||
const paletteH = 4;
|
const paletteH = 6;
|
||||||
|
|
||||||
const spriteX = 8;
|
const spriteX = 8;
|
||||||
const spriteY = 12;
|
const spriteY = 16;
|
||||||
const pixelW = 8;
|
const pixelW = 8;
|
||||||
const pixelH = 8;
|
const pixelH = 8;
|
||||||
|
|
||||||
@ -71,7 +71,7 @@ const drawTransparentRect = (x: number, y: number, w: number, h: number) => {
|
|||||||
Array(w*h).fill(0).map((_z, j) => {
|
Array(w*h).fill(0).map((_z, j) => {
|
||||||
const jx = j%w;
|
const jx = j%w;
|
||||||
const jy = Math.floor(j/w);
|
const jy = Math.floor(j/w);
|
||||||
setPixelColor(x+jx, y+jy, (jx+jy)%2 ? COLOR.BLACK : COLOR.DARKBLUE);
|
setPixelColor(x+jx, y+jy, (jx+jy)%2 ? COLOR.BLACK : COLOR.DARKGRAY);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -79,7 +79,7 @@ const draw = () => {
|
|||||||
const {sprites, selectedSprite, selectedColor} = state;
|
const {sprites, selectedSprite, selectedColor} = state;
|
||||||
clearScreen();
|
clearScreen();
|
||||||
useSpritesheet(page.activeSheet);
|
useSpritesheet(page.activeSheet);
|
||||||
fillRect(0, 8, 128, 112, COLOR.BROWN);
|
fillRect(0, 8, 128, 112, COLOR.DARKGRAY);
|
||||||
|
|
||||||
// Draw the palette
|
// Draw the palette
|
||||||
fillRect(paletteX-1, paletteY-1, (paletteW*swatchW)+2, (paletteH*swatchH)+2, COLOR.BLACK);
|
fillRect(paletteX-1, paletteY-1, (paletteW*swatchW)+2, (paletteH*swatchH)+2, COLOR.BLACK);
|
||||||
@ -87,12 +87,12 @@ const draw = () => {
|
|||||||
const swatchX = paletteX+swatchW*(i%paletteW);
|
const swatchX = paletteX+swatchW*(i%paletteW);
|
||||||
const swatchY = paletteY+swatchH*Math.floor(i/paletteW);
|
const swatchY = paletteY+swatchH*Math.floor(i/paletteW);
|
||||||
fillRect(swatchX, swatchY, swatchW, swatchH, COLOR[name as keyof typeof COLOR]);
|
fillRect(swatchX, swatchY, swatchW, swatchH, COLOR[name as keyof typeof COLOR]);
|
||||||
if (i === 0) {
|
if (name == "TRANSPARENT") {
|
||||||
// transparent
|
// transparent
|
||||||
drawTransparentRect(swatchX, swatchY, swatchW, swatchH);
|
drawTransparentRect(swatchX, swatchY, swatchW, swatchH);
|
||||||
}
|
}
|
||||||
if (i === selectedColor) {
|
if (i === selectedColor) {
|
||||||
outlineRect(swatchX, swatchY, swatchW, swatchH, COLOR.WHITE);
|
outlineRect(swatchX, swatchY, swatchW, swatchH, name === "WHITE" ? COLOR.BLACK : COLOR.WHITE);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -31,7 +31,7 @@ const update = () => {
|
|||||||
|
|
||||||
const draw = () => {
|
const draw = () => {
|
||||||
clearScreen();
|
clearScreen();
|
||||||
fillRect(0, 8, 128, 112, COLOR.BROWN);
|
fillRect(0, 8, 128, 112, COLOR.DARKGRAY);
|
||||||
|
|
||||||
// Draw the sheet grid
|
// Draw the sheet grid
|
||||||
getCart().forEach((sheet, i) => {
|
getCart().forEach((sheet, i) => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user