diff --git a/src/collages.ts b/src/collages.ts index b06c4d0..661311c 100644 --- a/src/collages.ts +++ b/src/collages.ts @@ -1,7 +1,7 @@ import {CollageMode} from "@/types"; import {randint, shuffle} from "@/utils"; -const collageModeType = ["grid", "row", "irow", "col", "icol", "concentric_factor", "concentric_spaced"] as const; +const collageModeType = ["clean_grid", "chaos_grid", "row", "irow", "col", "icol", "concentric_factor", "concentric_spaced"] as const; export type CollageModeType = typeof collageModeType[number]; function cleanDraw(ctx: CanvasRenderingContext2D, image: ImageBitmap, @@ -16,9 +16,47 @@ function cleanDraw(ctx: CanvasRenderingContext2D, image: ImageBitmap, ); } +function getGridPoints(ctx: CanvasRenderingContext2D, idx: number) { + let x!: number, y!: number; + switch (idx) { + case 0: + x = ctx.canvas.width * .25; + y = ctx.canvas.height * .25; + break; + case 1: + x = ctx.canvas.width * .75; + y = ctx.canvas.height * .25; + break; + case 2: + x = ctx.canvas.width * .25; + y = ctx.canvas.height * .75; + break; + case 3: + x = ctx.canvas.width * .75; + y = ctx.canvas.height * .75; + break; + } + return [x, y]; +} + const modes: { [key in CollageModeType]: CollageMode } = { - "grid": { - name: "Regular Grid", + "clean_grid": { + name: "Clean Grid", + minImages: 4, + forceConfig: { + numImages: 4 + }, + place: (ctx, images, config) => { + const quadrantSize = [ctx.canvas.width / 2, ctx.canvas.height / 2]; + const selectedImages = shuffle(images).slice(0, 4); + selectedImages.forEach((image, idx) => { + const [x, y] = getGridPoints(ctx, idx); + cleanDraw(ctx, image, x, y, quadrantSize[0], quadrantSize[1]); + }); + } + }, + "chaos_grid": { + name: "Irregular Grid", minImages: 4, forceConfig: { numImages: 4 @@ -28,42 +66,17 @@ const modes: { [key in CollageModeType]: CollageMode } = { const selectedImages = shuffle(images).slice(0, 4); shuffle(selectedImages.map((image, idx) => [image, idx] as [ImageBitmap, number])) .forEach(([image, idx]) => { - let x!: number, y!: number; - switch (idx) { - case 0: - x = ctx.canvas.width * .25; - y = ctx.canvas.height * .25; - break; - case 1: - x = ctx.canvas.width * .75; - y = ctx.canvas.height * .25; - break; - case 2: - x = ctx.canvas.width * .25; - y = ctx.canvas.height * .75; - break; - case 3: - x = ctx.canvas.width * .75; - y = ctx.canvas.height * .75; - break; - } - if (config.cleanCrops) { - cleanDraw(ctx, image, x, y, quadrantSize[0], quadrantSize[1]); - } else { - const scaleRatio = Math.max(quadrantSize[0] / image.width, quadrantSize[1] / image.height); - ctx.drawImage(image, - x - (image.width * scaleRatio / 2), y - (image.height * scaleRatio / 2), - image.width * scaleRatio, image.height * scaleRatio); - } + const [x, y] = getGridPoints(ctx, idx); + const scaleRatio = Math.max(quadrantSize[0] / image.width, quadrantSize[1] / image.height); + ctx.drawImage(image, + x - (image.width * scaleRatio / 2), y - (image.height * scaleRatio / 2), + image.width * scaleRatio, image.height * scaleRatio); }); } }, "row": { name: "Regular Row", minImages: 2, - forceConfig: { - cleanCrops: true - }, place: (ctx, images, config) => { const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2); const quadrantSize = [ctx.canvas.width / selectedImages.length, ctx.canvas.height]; @@ -77,9 +90,6 @@ const modes: { [key in CollageModeType]: CollageMode } = { "irow": { name: "Irregular Row", minImages: 2, - forceConfig: { - cleanCrops: true - }, place: (ctx, images, config) => { const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2); const quadrantSize = [ctx.canvas.width / selectedImages.length, ctx.canvas.height]; @@ -95,9 +105,6 @@ const modes: { [key in CollageModeType]: CollageMode } = { "col": { name: "Regular Column", minImages: 2, - forceConfig: { - cleanCrops: true - }, place: (ctx, images, config) => { const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2); const quadrantSize = [ctx.canvas.width, ctx.canvas.height / selectedImages.length]; @@ -111,9 +118,6 @@ const modes: { [key in CollageModeType]: CollageMode } = { "icol": { name: "Irregular Column", minImages: 2, - forceConfig: { - cleanCrops: true - }, place: (ctx, images, config) => { const selectedImages = shuffle(images).slice(0, config.numImages || randint(4) + 2); const quadrantSize = [ctx.canvas.width, ctx.canvas.height / selectedImages.length]; @@ -129,9 +133,6 @@ const modes: { [key in CollageModeType]: CollageMode } = { "concentric_factor": { name: "Constant factor 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; @@ -153,9 +154,6 @@ const modes: { [key in CollageModeType]: CollageMode } = { "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; diff --git a/src/components/Collage.vue b/src/components/Collage.vue index c158e15..cc28fd9 100644 --- a/src/components/Collage.vue +++ b/src/components/Collage.vue @@ -33,12 +33,6 @@ :disabled="Object.keys(forceConfig).includes('numImages')" v-model="forceConfig.numImages || collageConfig.numImages"> - @@ -60,8 +54,7 @@ export default class Collage extends Vue { height: 640 }; private collageConfig: CollageConfig = { - numImages: undefined, - cleanCrops: false + numImages: undefined }; private currentModeType: DisplayCollageModeType = "shuffle"; private lastActiveModeType: DisplayCollageModeType | null = null; diff --git a/src/types.d.ts b/src/types.d.ts index 04695d0..dd81af9 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -7,5 +7,4 @@ export interface CollageMode { export interface CollageConfig { numImages?: number; - cleanCrops?: boolean; }