Concept
This concept originated from the fact that our lives are never still, and I recently have been getting more and more aware and educated about the importance of mental health which inspired me to do this design. The initial idea was inspired from this piece of art.
The core of the design lies within the order of our lives, which I will represent using a grid of rectangles with varying sizes to represent life responsibilities and events with varying importance which is relevant to the size of the rectangles. The grid then, after a set period of time, begins to mosh into itself creating a sense of confusion and loss of control, which will reset after the user clicks on the screen. This resembles the idea that, mental problems will follow people despite them avoiding them or not trying to get them. Then, to reset the grid, the user has to take action, not just give in into the moshing effect and allow the mental problems to consume them. After the user clicks, the grid comes back and the timer resets, but the grid doesn’t come back to the same initial state as some mental problems are life changing and can leave a scar.
Sketch
Code Highlights
for (let i = 0; i < 10; i++) { // using a for loop as a timer
timer++; // increment timer
}
if (timer >= timerLimit) {
// randomly mosh over time
}
This is my usage of a for loop for a timer, where the variables timer and timerLimit have been initialized as global variables.
let randomX = random(width); // grab random x location
let randomY = random(height); // grab random y location
let moshedArea = get(randomX, randomY, 30, 30); // get the specific area with the random x and y positions with size 30
let offsetX = random(-10, 10); // move the area randomly between a range of 10 and -10
let offsetY = random(-10, 10); // same thing
// redraw the image
image(moshedArea, randomX + offsetX, randomY + offsetY); }
This is how I did the moshing effect by grabbing random blocks in the sketch and offsetting them between a range of -10 and 10 pixels each direction. Here’s the link for the code I found online to help me/inspire me to write my own moshing code.
I wanted to use a while loop but that crashes my browser for some reason, potentially due to ram usage or the browser i am using is not compatible with p5, so I used the draw function for this effect which I interpreted basically as a while(true) loop.
For the drawing of rectangles, I made a function that draws rectangles through a for loop, where indices i and j indicate the amount of rectangles the loop is gonna draw. Since the time complexity is O(n * n), therefore the loop below with n = 30, will iterate 900 times, creating 900 rectangles. This could be changed to illustrate the drawing in a different way.
The x and y variables are set to the counters i and j respectively then multiplied by the value rectSize, which determines the spacing between the rectangles.
This is similar to the following:
where the n in this case in either i or j.
function drawGrid() {
let rectSize = 20; // base grid size
timer =0; // reset timer
background(0);
for (let i = 0; i < 30; i++) {
// rows
for (let j = 0; j < 30; j++) {
// columns
let x = j * rectSize; // X position
let y = i * rectSize; // Y position
let w = random(1, 20); // width between 1 and 20
let h = random(7, 20); // height between 7 and 20
fill(0);
stroke(255);
rect(x, y, w, h); // draw rectangle
}
}
}
Reflection and self improvement
I wanted to rotate each square, but the process of doing that seemed a little bit out of my knowledge scope and I did not want to just copy what I found online without understanding, so I assume the next step would be stepping out of my comfort zone and learning concepts I am not familiar with like the use of rotation when drawing shapes. This is also not the exact use of data moshing as it is sometimes used for transitions when video editing, I want to implement that using code but that is a little bit too hard with the limited knowledge I have right now.
I would also love to add an effect of pixel sorting, which I usually used to do when I used to create my motion graphics videos, but now with p5.js this is a new realm that I want to explore slowly and not rush, so I will probably come back to this sketch and improve it more when I have more experience with p5.js and implement the pixel sorting effect.
Thank you for reading.
-Mustafa Bakir
