Mesh & Shapes (English)

I waited for the release of Construct 3 beta r235) before publishing this post. I needed the IWorldInstance.getMeshSize() function to be able to randomly change the shape of objects in C3. Mesh Distorsion and JavaScript allow you to get nice effects with just a few lines of code:

To create this template I used only one module, mesh.js, and a json object, MeshPremadeShapes. The template’s core are these two functions:

setMeshPointAbsolute
drawShape

function setMeshPointAbsolute(instance,
    { col = 0, row = 0, x = 0.5, y = 0.5} = {})
{ instance.setMeshPoint(col, row, {mode: "absolute", x, y}); }

The first alter a point in a mesh. The coordinates x and y are determined in absolute mode, in normalized co-ordinates [0, 1] across the object size. The left up angle is the point (0;0), the right down is (1;1). The object’s center is the point (0.5;0.5).

Starting from this function I can write the drawShape function

function drawShape(instance, shape) {
	const points = shape.points;
	points.forEach(point => setMeshPointAbsolute(instance, point));
}

This function moves each point of the mesh to the position indicated by the shape. The shape is defined in the MeshPremadeShapes object

pentagon: {
	meshSize: {
		columns: 3,
		rows: 2
	},
	points: [
		{col: 0, row: 0, x: 0.00, y: 0.39},
		{col: 1, row: 0, x: 0.50, y: 0.00},
		{col: 2, row: 0, x: 1.00, y: 0.39},
		{col: 0, row: 1, x: 0.20, y: 1.00},
		{col: 1, row: 1, x: 0.50, y: 1.00},
		{col: 2, row: 1, x: 0.80, y: 1.00},
	]
}

It’s an object with only two properties: meshSize and points. The latter contains an array of points in the format {col, row, x, y}. Starting from this array, drawShape scrolls the various items and places them on the mesh.

Starting from the same object it is possible to use a setSizeShape function to automatically generate a mesh in C3.

function setSizeShape(instance, shape){
	const columns = shape.meshSize.columns;
	const rows = shape.meshSize.rows;
	createMesh(instance, { columns, rows });
}

How to create random shapes

To make the template more interesting, I created a function to create random shapes

function randomize(instance, { min = -0.5, max = 0.5 } = {}) {
	const { rows } = getMeshSize(instance);
	for (let row = 0; row < rows; row++){
		randomizeRow(instance, {row, min, max});
	}
}

getMeshSize allows you to get the mesh size. randomizeRow changes the position of individual points randomly

function randomizeRow(instance, {row = 0, min = -0.5, max = 0.5 } = {}) {
	const { columns } = getMeshSize(instance);
	for (let col = 0; col < columns; col++) {
  		const value = getRandomArbitraryXY(min, max);
		setMeshPointRelative(instance, {col, row, ...value});
	}
	return instance;
}

I modify the points in relative mode: I think it allows to obtain a harmonic effect.

You can see interesting shapes even modifying only the margins

function randomizeMargins(instance, { min = -0.5, max = 0.5 } = {}){
	const { lastRow, lastColumn } = getMeshSize(instance);
	randomizeRow(instance, {row: 0, min, max});
	randomizeRow(instance, {row: lastRow, min, max});
	randomizeColumn(instance, {col: 0, min, max});
	randomizeColumn(instance, {col: lastColumn, min, max});
}