We started this week with a new tutorial about generating visual grid patterns using the p5.js library. We created two different approaches to make grid-based artwork. The purpose was to experiment with randomness in grid layouts and demonstrate the creative possibilities of coding with various shapes.
We created our repository in GitHub and made folders and files. In the sketch.js file, we used global constants; an array of possible sizes of grid cells and their values, and another array for three different colours. Then, we a code which was the inspiration for Piet Mondrian’s art.
This is the final code that generates it:
The output:
We also made a simple grid code and added it to our little project. Piet Mondrian’s art generation code was commented out. For this one, we added a new constant which is an array of angle values, which are fractions of π.
The output:
Both codes demonstrate how randomness and creative experimentation can be used to produce distinct visual effects in grid-based compositions.
Later in the week, we started working on our projects. I wrote a code that displays a grid canvas where the user can “draw” by hovering over cells on the grid, and each cell changes its colour to shades of grey from black to white.
The output:
The project is not completed as I didn’t add the option to draw on click and it draws on every cell I hover over.
I did continue working on it on Week 12. My Tutor helped me with some of the code when I was stuck. After all, I think, I enjoyed transforming lines of code into an art and I can’t wait for my next projects.
Leave a Reply