split concentric into two modes
This commit is contained in:
parent
5caaf81699
commit
7711f19810
1 changed files with 32 additions and 22 deletions
|
@ -1,7 +1,7 @@
|
||||||
import {CollageMode} from "@/types";
|
import {CollageMode} from "@/types";
|
||||||
import {randint, shuffle} from "@/utils";
|
import {randint, shuffle} from "@/utils";
|
||||||
|
|
||||||
const collageModeType = ["grid", "row", "irow", "col", "icol", "center"] as const;
|
const collageModeType = ["grid", "row", "irow", "col", "icol", "concentric_factor", "concentric_spaced"] as const;
|
||||||
export type CollageModeType = typeof collageModeType[number];
|
export type CollageModeType = typeof collageModeType[number];
|
||||||
|
|
||||||
function cleanDraw(ctx: CanvasRenderingContext2D, image: ImageBitmap,
|
function cleanDraw(ctx: CanvasRenderingContext2D, image: ImageBitmap,
|
||||||
|
@ -126,8 +126,8 @@ const modes: { [key in CollageModeType]: CollageMode } = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
"center": {
|
"concentric_factor": {
|
||||||
name: "Concentric",
|
name: "Constant factor concentric",
|
||||||
minImages: 2,
|
minImages: 2,
|
||||||
forceConfig: {
|
forceConfig: {
|
||||||
cleanCrops: true
|
cleanCrops: true
|
||||||
|
@ -137,27 +137,37 @@ const modes: { [key in CollageModeType]: CollageMode } = {
|
||||||
const x = ctx.canvas.width / 2;
|
const x = ctx.canvas.width / 2;
|
||||||
const y = ctx.canvas.height / 2;
|
const y = ctx.canvas.height / 2;
|
||||||
|
|
||||||
if (Math.random() < .66) {
|
let factor: number;
|
||||||
selectedImages.forEach((image, idx) => {
|
if (Math.random() > .5) {
|
||||||
cleanDraw(
|
const factors = [1 / Math.sqrt(2), .5, .88];
|
||||||
ctx, image, x, y,
|
factor = factors[Math.floor(Math.random() * factors.length)];
|
||||||
ctx.canvas.width - (ctx.canvas.width / selectedImages.length * idx),
|
|
||||||
ctx.canvas.height - (ctx.canvas.height / selectedImages.length * idx),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
let factor: number;
|
factor = 1 - (1 / selectedImages.length);
|
||||||
if (Math.random() > .5) {
|
|
||||||
const factors = [1 / Math.sqrt(2), .5, .88];
|
|
||||||
factor = factors[Math.floor(Math.random() * factors.length)];
|
|
||||||
} else {
|
|
||||||
factor = 1 - (1 / selectedImages.length);
|
|
||||||
}
|
|
||||||
selectedImages.forEach((image, idx) => {
|
|
||||||
const ratio = Math.pow(factor, idx);
|
|
||||||
cleanDraw(ctx, image, x, y, ctx.canvas.width * ratio, ctx.canvas.height * ratio);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
selectedImages.forEach((image, idx) => {
|
||||||
|
const ratio = Math.pow(factor, idx);
|
||||||
|
cleanDraw(ctx, image, x, y, ctx.canvas.width * ratio, ctx.canvas.height * ratio);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"concentric_spaced": {
|
||||||
|
name: "Equally spaced concentric",
|
||||||
|
minImages: 2,
|
||||||
|
forceConfig: {
|
||||||
|
cleanCrops: true
|
||||||
|
},
|
||||||
|
place: (ctx, images, config) => {
|
||||||
|
const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2);
|
||||||
|
const x = ctx.canvas.width / 2;
|
||||||
|
const y = ctx.canvas.height / 2;
|
||||||
|
|
||||||
|
selectedImages.forEach((image, idx) => {
|
||||||
|
cleanDraw(
|
||||||
|
ctx, image, x, y,
|
||||||
|
ctx.canvas.width - (ctx.canvas.width / selectedImages.length * idx),
|
||||||
|
ctx.canvas.height - (ctx.canvas.height / selectedImages.length * idx),
|
||||||
|
);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue