p5.js Tiling and Repetition
Creating grids
Arrays in JavaScript have quirks of their own that you may not be expecting if you come from other languages. Two important ones for your use case are:
You cannot directly declare multidimensional arrays in JavaScript.
There's little efficiency benefit (and no added safety) when you set the size of the array at creation.
In order to create and initialize a multidimensional array, you first need to go through all elements of the one-dimensional array and add a second (third, fourth, etc.) dimension to it.
var x_length = 100
var y_length = 100
var map = []
for (var x = 0; x < x_length; x++) {
map[x] = []
for (var y = 0; y < y_length; y++) {
map[x][y] = new Element();
}
}
let gridW = 10; //amount of shapes in the width
let gridH = 10; //amount of shapes in the height
let stepX = 60; // horizontal distance between shapes
let stepY = 60; // vertical distance between shapes
let shapeWidth = 40;
let shapeHeight = 40;
var GraphicArray = [];
function setup()
{
createCanvas(800, 800);
noStroke();
fill(0);
background(255);
translate((width-(stepX*gridW))/2, (height-(stepY*gridH))/2); // translate graphic to the center of the screen
for (var i=0; i < gridW; i++)
{
GraphicArray[i] = []; //add a second dimension to the array
for (var j = 0; j < gridH; j++)
{
GraphicArray[i][j] = new Graphic(i * stepX, j * stepY, shapeWidth, shapeHeight);
GraphicArray[i][j].draw();
}
}
}
class Graphic
{
constructor(x,y, shapeW, shapeH)
{
this._pos = createVector(x, y);
this._shapeWidth = shapeW;
this._shapeHeight = shapeH;
}
draw()
{
push();
stroke(0);
fill(0);
rect(this._pos.x, this._pos.y, this._shapeWidth, this._shapeHeight);
pop();
}
}Example: Modifying distribution along width and height
let gridW = 10;
let gridH = 10;
let border = 100;
let stepX = 40;
let stepY = 40;
let distModifier = 1.05;
let graphicSize = 30;
function setup()
{
createCanvas(800,800);
background(255);
noStroke();
fill(0);
let distX = stepX;
let distY = stepY;
translate(border,border);
for(var i=0;i < gridH;i++){
for(var j= 0;j < gridW;j++) {
rect(j * distX, i * distY, graphicSize, graphicSize);
distX *= distModifier;
}
distX = stepX;
distY *= distModifier;
}
}
Example: Modifying distribution with scale
let gridW = 12;
let gridH = 12;
let border = 60;
let stepX = 60;
let stepY = 60;
let sizeModifier = 1.05;
let graphicSize = 30;
function setup()
{
createCanvas(800, 800);
noStroke();
fill(0);
background(255);
rectMode(CENTER);
let graphicSizeScaled = graphicSize;
translate(border, border);
for (var i=0; i < gridH; i++)
{
for (var j = 0; j < gridW; j++)
{
rect(j * stepX, i * stepY, graphicSizeScaled, graphicSizeScaled);
}
graphicSizeScaled *= sizeModifier;
}
}
Example: Modifying distribution by rotation
let gridW = 12;
let gridH = 12;
let border = 60;
let stepX = 60;
let stepY = 60;
let sizeModifier = 1.05;
let graphicSize = 30;
function setup()
{
createCanvas(800, 800);
noStroke();
fill(0);
background(255);
rectMode(CENTER);
var rotation = 0;
translate(border, border);
for (var i=0; i < gridH; i++)
{
for (var j = 0; j < gridW; j++)
{
rotation++;
push();
translate(j * stepX, i * stepY);
rotate(radians(rotation));
rect(0, 0, graphicSize, graphicSize);
pop();
}
}
}Related content
p5.js Arrays and Lists
p5.js Arrays and Lists
p5.js Introduction
p5.js Introduction
p5.js Coordinates
p5.js Coordinates
p5.js Animation Exercise 1
p5.js Animation Exercise 1
p5.js Particle System
p5.js Particle System
p5.js Simple Reactor
p5.js Simple Reactor