Making Tetris with p5.js - p5.js

Question

I have some code so far:
function setup() {
createCanvas(500,550);
}
function draw() {
background(150);
o();
}
function block(x,y) {
rectMode(CENTER)
rect(x,y, cols, rows, 2)
}
function o() {
fill(255, 255,0)
block(width/2, rows);
block(width/2, rows* 2);
block(width/2 + cols, cols)
block(width/2 + cols, cols * 2)
}
And I'm wondering what to do next. I thought of creating drop function and this is what it would look like:
function drop() {
rows += rows;
cols += cols;
}
Then add this to the setup function:
frameRate(10);
So it moves slower, but that wouldn't work.
I don't know how to make the block go down without changing the values of cols and rows. My question is, how can I make the blocks move down, in a function(for instance, a function called drop)?
EDIT: The drop function wouldn't have worked because it would change the size, not the position.

Answer 1

For the block to move, it needs to have an x and a y position.
Currently, you just hardcoded the position.
block(width/2, rows);
Instead, you should do something like this
let x;
let y = rows;
function setup() {
createCanvas(500, 500);
x = width / 2; //you could not set x before now, because the program didn't yet know what the width was
Then, replace your o() function with this:
function o() {
fill(255, 255,0)
block(x, y);
block(x, y + cols);
block(x + cols, y);
block(x + cols, y + cols);
}
Finally, you can change the x and y position in your drop() function (don't forget to actually call it, too)
function drop() {
y += 10;
}