thm/kollagen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

remove cleanCrops from config; split grid into two modes

Browse source
This commit is contained in:
Tomáš Mládek 2020-07-15 23:13:04 +02:00
parent 003c0be447
commit 8d05c4fb8f
3 changed files with 47 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/collages.ts
View file

@ -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;

9
src/components/Collage.vue
View file

@ -33,12 +33,6 @@
:disabled="Object.keys(forceConfig).includes('numImages')"
v-model="forceConfig.numImages || collageConfig.numImages">
</label>
<label>
<input type="checkbox"
:disabled="Object.keys(forceConfig).includes('cleanCrops')"
v-model="forceConfig.cleanCrops || collageConfig.cleanCrops">
Crop cleanly
</label>
</div>
</div>
</div>
@ -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;

1
src/types.d.ts vendored
View file

@ -7,5 +7,4 @@ export interface CollageMode {
export interface CollageConfig {
numImages?: number;
cleanCrops?: boolean;
}