Skip to content

Commit

Permalink
add modified easing functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@meodai
meodai committed Dec 17, 2023
1 parent c6efa5c commit 656b09b
Show file tree
Hide file tree
Showing 11 changed files with 383 additions and 29 deletions.
60 changes: 54 additions & 6 deletions dist/index.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
var __defProp = Object.defineProperty;
var __pow = Math.pow;
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
var __export = (target, all) => {
__markAsModule(target);
Expand All @@ -9,12 +8,55 @@ var __export = (target, all) => {

// src/index.ts
__export(exports, {
easingFunctions: () => easingFunctions,
generateRandomColorRamp: () => generateRandomColorRamp,
generateRandomColorRampParams: () => generateRandomColorRampParams,
hsv2hsl: () => hsv2hsl,
hsv2hsx: () => hsv2hsx,
pointOnCurve: () => pointOnCurve
});
var easingFunctions = {
linear: (x) => x,
easeInSine: (x, accentuation = 0) => 1 - Math.cos(x * Math.PI / 2 + accentuation * Math.PI / 2),
easeOutSine: (x, accentuation = 0) => Math.sin(x * Math.PI / 2 + accentuation * Math.PI / 2),
easeInOutSine: (x, accentuation = 0) => -(Math.cos(Math.PI * (x + accentuation) / (1 + 2 * accentuation)) - 1) / 2,
easeInQuad: (x, accentuation = 0) => x * x + accentuation * x * (1 - x),
easeOutQuad: (x, accentuation = 0) => 1 - (1 - x) * (1 - x) - accentuation * x * (1 - x),
easeInOutQuad: (x, accentuation = 0) => x < 0.5 ? 2 * x * x + accentuation * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 2) / 2 - accentuation * (2 * x - 1) * (1 - Math.pow(-2 * x + 2, 2) / 2),
easeInCubic: (x, accentuation = 0) => x * x * x + accentuation * x * x * (1 - x),
easeOutCubic: (x, accentuation = 0) => 1 - Math.pow(1 - x, 3) - accentuation * Math.pow(1 - x, 2) * (1 - x),
easeInOutCubic: (x, accentuation = 0) => x < 0.5 ? 4 * x * x * x + accentuation * x * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 3) / 2 - accentuation * Math.pow(-2 * x + 2, 2) * (2 * x - 1) / 2,
easeInQuart: (x, accentuation = 0) => x * x * x * x + accentuation * x * x * x * (1 - x),
easeOutQuart: (x, accentuation = 0) => 1 - Math.pow(1 - x, 4) - accentuation * Math.pow(1 - x, 3) * (1 - x),
easeInOutQuart: (x, accentuation = 0) => x < 0.5 ? 8 * x * x * x * x + accentuation * x * x * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 4) / 2 - accentuation * Math.pow(-2 * x + 2, 3) * (2 * x - 1) / 2,
easeInQuint: (x, accentuation = 0) => x * x * x * x * x + accentuation * x * x * x * x * (1 - x),
easeOutQuint: (x, accentuation = 0) => 1 - Math.pow(1 - x, 5) - accentuation * Math.pow(1 - x, 4) * (1 - x),
easeInOutQuint: (x, accentuation = 0) => x < 0.5 ? 16 * x * x * x * x * x + accentuation * x * x * x * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 5) / 2 - accentuation * Math.pow(-2 * x + 2, 4) * (2 * x - 1) / 2,
easeInExpo: (x, accentuation = 0) => (x === 0 ? 0 : Math.pow(2, 10 * x - 10)) + accentuation * Math.pow(2, 10 * (x - 1)),
easeOutExpo: (x, accentuation = 0) => (x === 1 ? 1 : 1 - Math.pow(2, -10 * x)) - accentuation * (1 - Math.pow(2, -10 * x)),
easeInOutExpo: (x, accentuation = 0) => {
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
if (x < 0.5) {
return Math.pow(2, 20 * x - 10) / 2 + accentuation * Math.pow(2, 20 * x - 10) / 2;
}
return (2 - Math.pow(2, -20 * x + 10)) / 2 - accentuation * (2 - Math.pow(2, -20 * x + 10)) / 2;
},
easeInCirc: (x, accentuation = 0) => 1 - Math.sqrt(1 - Math.pow(x, 2)) + accentuation * Math.sqrt(1 - Math.pow(x, 2)),
easeOutCirc: (x, accentuation = 0) => Math.sqrt(1 - Math.pow(x - 1, 2)) - accentuation * Math.sqrt(1 - Math.pow(x - 1, 2)),
easeInOutCirc: (x, accentuation = 0) => {
if (x < 0.5) {
return (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 + accentuation * (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2;
}
return (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2 - accentuation * (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
},
random: () => Math.random()
};
var easingFunctionsKeys = Object.keys(easingFunctions);
var hsv2hsl = (h, s, v, l = v - v * s / 2, m = Math.min(l, 1 - l)) => [h, m ? (v - l) / m : 0, l];
var hsv2hsx = (h, s, v, mode) => mode === "hsl" ? hsv2hsl(h, s, v) : [h, s, v];
var pointOnCurve = (curveMethod, i, total, curveAccent, min = [0, 0], max = [1, 1]) => {
Expand All @@ -27,8 +69,8 @@ var pointOnCurve = (curveMethod, i, total, curveAccent, min = [0, 0], max = [1,
const exp = 2 / (2 + 20 * curveAccent);
const cosT = Math.cos(t);
const sinT = Math.sin(t);
x = Math.sign(cosT) * __pow(Math.abs(cosT), exp);
y = Math.sign(sinT) * __pow(Math.abs(sinT), exp);
x = Math.sign(cosT) * Math.abs(cosT) ** exp;
y = Math.sign(sinT) * Math.abs(sinT) ** exp;
} else if (curveMethod === "arc") {
y = Math.cos(-Math.PI / 2 + i * slice + curveAccent);
x = Math.sin(Math.PI / 2 + i * slice - curveAccent);
Expand All @@ -42,8 +84,12 @@ var pointOnCurve = (curveMethod, i, total, curveAccent, min = [0, 0], max = [1,
x = Math.pow(percentile, curveAccent);
y = Math.pow(percentile, 1 - curveAccent);
} else if (typeof curveMethod === "function") {
x = curveMethod(percentile)[0];
y = curveMethod(percentile)[1];
const modifiedPositions = curveMethod(percentile, curveAccent);
x = modifiedPositions[0];
y = modifiedPositions[1];
} else if (easingFunctionsKeys.includes(curveMethod)) {
x = percentile;
y = 1 - easingFunctions[curveMethod](percentile, curveAccent * -1) || 0;
} else {
throw new Error(`pointOnCurve() curveAccent parameter is expected to be "lam\xE9" | "arc" | "pow" | "powY" | "powX" or a function but \`${curveMethod}\` given.`);
}
Expand Down Expand Up @@ -99,7 +145,9 @@ function generateRandomColorRamp({
var generateRandomColorRampParams = {
curveMethod: {
default: "lam\xE9",
props: { options: ["lam\xE9", "arc", "pow", "powY", "powX"] }
props: {
options: ["lam\xE9", "arc", "pow", "powY", "powX", ...easingFunctionsKeys]
}
},
curveAccent: {
default: 0,
Expand Down
34 changes: 31 additions & 3 deletions dist/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export declare type FuncNumberReturn = (arg0: number) => Vector2;
export declare type CurveMethod = "lamé" | "arc" | "pow" | "powY" | "powX" | FuncNumberReturn;
export declare type FuncNumberReturn = (arg0: number, arg1?: number) => Vector2;
export declare type CurveMethod = "lamé" | "arc" | "pow" | "powY" | "powX" | "linear" | "easeInSine" | "easeOutSine" | "easeInOutSine" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInExpo" | "easeOutExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "random" | FuncNumberReturn;
export declare type ColorModel = "hsl" | "hsv";
export declare type Vector2 = [number, number];
export declare type Vector3 = [number, number, number];
Expand All @@ -18,6 +18,34 @@ export declare type GenerateRandomColorRampArgument = {
maxSaturationLight?: Vector2;
colorModel?: ColorModel;
};
export declare type easingFunctionsType = {
CurveMethod: (x: number, accentuation?: number) => number;
};
export declare const easingFunctions: {
linear: (x: number) => number;
easeInSine: (x: number, accentuation?: number) => number;
easeOutSine: (x: number, accentuation?: number) => number;
easeInOutSine: (x: number, accentuation?: number) => number;
easeInQuad: (x: number, accentuation?: number) => number;
easeOutQuad: (x: number, accentuation?: number) => number;
easeInOutQuad: (x: number, accentuation?: number) => number;
easeInCubic: (x: number, accentuation?: number) => number;
easeOutCubic: (x: number, accentuation?: number) => number;
easeInOutCubic: (x: number, accentuation?: number) => number;
easeInQuart: (x: number, accentuation?: number) => number;
easeOutQuart: (x: number, accentuation?: number) => number;
easeInOutQuart: (x: number, accentuation?: number) => number;
easeInQuint: (x: number, accentuation?: number) => number;
easeOutQuint: (x: number, accentuation?: number) => number;
easeInOutQuint: (x: number, accentuation?: number) => number;
easeInExpo: (x: number, accentuation?: number) => number;
easeOutExpo: (x: number, accentuation?: number) => number;
easeInOutExpo: (x: number, accentuation?: number) => number;
easeInCirc: (x: number, accentuation?: number) => number;
easeOutCirc: (x: number, accentuation?: number) => number;
easeInOutCirc: (x: number, accentuation?: number) => number;
random: () => number;
};
/**
* function hsv2hsl
* @param h {Number} hue value 0...360
Expand Down Expand Up @@ -54,7 +82,7 @@ export declare const pointOnCurve: (curveMethod: CurveMethod, i: number, total:
* @param offsetShade: float 0...1 > Shade curve difference
* @param curveAccent: float 0...1 > How pronounced should the curve be, depends a lot on the curve method
* @param tintShadeHueShift: float 0...1 > Shifts the colors for the shades and tints
* @param curveMethod: string 'lamé'|'arc'|'pow'|'powY'|'powX' > method used to generate the curve
* @param curveMethod: string 'lamé'|'arc'|'pow'|'powY'|'powX'|function > method used to generate the curve
* @param offsetCurveModTint: float 0...1 > amplifies the curveAccent of for the tint colors
* @param offsetCurveModShade: float 0...1 > amplifies the curveAccent of for the shade colors
* @param minSaturationLight: array [0...1, 0...1] > minium saturation and light of the generated colors
Expand Down
4 changes: 2 additions & 2 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -671,7 +671,7 @@ <h2>Color Properties</h2>
<div data-names></div>
</aside>
</article>
<script src="https://cdn.jsdelivr.net/npm/culori@1.2.0/bundled/culori.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/culori@2.0.3/bundled/culori.umd.js"></script>

<script type="module">
import {
Expand Down Expand Up @@ -772,7 +772,6 @@ <h2>Color Properties</h2>
if (!$input) {
return;
}
console.log($input)
if ( $input.matches('select') ) {
Array.from($input.querySelectorAll('option')).forEach($input =>
$input.selected = $input.value === (value || ref[key])
Expand Down Expand Up @@ -990,6 +989,7 @@ <h2>Color Properties</h2>
}

function bam() {

colors = generateRandomColorRamp({
total: PARAMS.total,
centerHue: PARAMS.centerHue,
Expand Down
55 changes: 52 additions & 3 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,55 @@ var fettepalette = (() => {
// src/index.ts
var src_exports = {};
__export(src_exports, {
easingFunctions: () => easingFunctions,
generateRandomColorRamp: () => generateRandomColorRamp,
generateRandomColorRampParams: () => generateRandomColorRampParams,
hsv2hsl: () => hsv2hsl,
hsv2hsx: () => hsv2hsx,
pointOnCurve: () => pointOnCurve
});
var easingFunctions = {
linear: (x) => x,
easeInSine: (x, accentuation = 0) => 1 - Math.cos(x * Math.PI / 2 + accentuation * Math.PI / 2),
easeOutSine: (x, accentuation = 0) => Math.sin(x * Math.PI / 2 + accentuation * Math.PI / 2),
easeInOutSine: (x, accentuation = 0) => -(Math.cos(Math.PI * (x + accentuation) / (1 + 2 * accentuation)) - 1) / 2,
easeInQuad: (x, accentuation = 0) => x * x + accentuation * x * (1 - x),
easeOutQuad: (x, accentuation = 0) => 1 - (1 - x) * (1 - x) - accentuation * x * (1 - x),
easeInOutQuad: (x, accentuation = 0) => x < 0.5 ? 2 * x * x + accentuation * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 2) / 2 - accentuation * (2 * x - 1) * (1 - Math.pow(-2 * x + 2, 2) / 2),
easeInCubic: (x, accentuation = 0) => x * x * x + accentuation * x * x * (1 - x),
easeOutCubic: (x, accentuation = 0) => 1 - Math.pow(1 - x, 3) - accentuation * Math.pow(1 - x, 2) * (1 - x),
easeInOutCubic: (x, accentuation = 0) => x < 0.5 ? 4 * x * x * x + accentuation * x * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 3) / 2 - accentuation * Math.pow(-2 * x + 2, 2) * (2 * x - 1) / 2,
easeInQuart: (x, accentuation = 0) => x * x * x * x + accentuation * x * x * x * (1 - x),
easeOutQuart: (x, accentuation = 0) => 1 - Math.pow(1 - x, 4) - accentuation * Math.pow(1 - x, 3) * (1 - x),
easeInOutQuart: (x, accentuation = 0) => x < 0.5 ? 8 * x * x * x * x + accentuation * x * x * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 4) / 2 - accentuation * Math.pow(-2 * x + 2, 3) * (2 * x - 1) / 2,
easeInQuint: (x, accentuation = 0) => x * x * x * x * x + accentuation * x * x * x * x * (1 - x),
easeOutQuint: (x, accentuation = 0) => 1 - Math.pow(1 - x, 5) - accentuation * Math.pow(1 - x, 4) * (1 - x),
easeInOutQuint: (x, accentuation = 0) => x < 0.5 ? 16 * x * x * x * x * x + accentuation * x * x * x * x * (1 - 2 * x) : 1 - Math.pow(-2 * x + 2, 5) / 2 - accentuation * Math.pow(-2 * x + 2, 4) * (2 * x - 1) / 2,
easeInExpo: (x, accentuation = 0) => (x === 0 ? 0 : Math.pow(2, 10 * x - 10)) + accentuation * Math.pow(2, 10 * (x - 1)),
easeOutExpo: (x, accentuation = 0) => (x === 1 ? 1 : 1 - Math.pow(2, -10 * x)) - accentuation * (1 - Math.pow(2, -10 * x)),
easeInOutExpo: (x, accentuation = 0) => {
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
if (x < 0.5) {
return Math.pow(2, 20 * x - 10) / 2 + accentuation * Math.pow(2, 20 * x - 10) / 2;
}
return (2 - Math.pow(2, -20 * x + 10)) / 2 - accentuation * (2 - Math.pow(2, -20 * x + 10)) / 2;
},
easeInCirc: (x, accentuation = 0) => 1 - Math.sqrt(1 - Math.pow(x, 2)) + accentuation * Math.sqrt(1 - Math.pow(x, 2)),
easeOutCirc: (x, accentuation = 0) => Math.sqrt(1 - Math.pow(x - 1, 2)) - accentuation * Math.sqrt(1 - Math.pow(x - 1, 2)),
easeInOutCirc: (x, accentuation = 0) => {
if (x < 0.5) {
return (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 + accentuation * (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2;
}
return (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2 - accentuation * (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
},
random: () => Math.random()
};
var easingFunctionsKeys = Object.keys(easingFunctions);
var hsv2hsl = (h, s, v, l = v - v * s / 2, m = Math.min(l, 1 - l)) => [h, m ? (v - l) / m : 0, l];
var hsv2hsx = (h, s, v, mode) => mode === "hsl" ? hsv2hsl(h, s, v) : [h, s, v];
var pointOnCurve = (curveMethod, i, total, curveAccent, min = [0, 0], max = [1, 1]) => {
Expand Down Expand Up @@ -43,8 +86,12 @@ var fettepalette = (() => {
x = Math.pow(percentile, curveAccent);
y = Math.pow(percentile, 1 - curveAccent);
} else if (typeof curveMethod === "function") {
x = curveMethod(percentile)[0];
y = curveMethod(percentile)[1];
const modifiedPositions = curveMethod(percentile, curveAccent);
x = modifiedPositions[0];
y = modifiedPositions[1];
} else if (easingFunctionsKeys.includes(curveMethod)) {
x = percentile;
y = 1 - easingFunctions[curveMethod](percentile, curveAccent * -1) || 0;
} else {
throw new Error(`pointOnCurve() curveAccent parameter is expected to be "lam\xE9" | "arc" | "pow" | "powY" | "powX" or a function but \`${curveMethod}\` given.`);
}
Expand Down Expand Up @@ -100,7 +147,9 @@ var fettepalette = (() => {
var generateRandomColorRampParams = {
curveMethod: {
default: "lam\xE9",
props: { options: ["lam\xE9", "arc", "pow", "powY", "powX"] }
props: {
options: ["lam\xE9", "arc", "pow", "powY", "powX", ...easingFunctionsKeys]
}
},
curveAccent: {
default: 0,
Expand Down
Loading

0 comments on commit 656b09b

Please sign in to comment.