Link to sketch: https://editor.p5js.org/kh1785/sketches/hfVVWseC
![](https://static.wixstatic.com/media/2505f8_3d02ac561a004c9895103c53b6d61190~mv2.jpg/v1/fill/w_102,h_142,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_3d02ac561a004c9895103c53b6d61190~mv2.jpg)
I was inspired by the above image I found on Pinterest (https://www.pinterest.com/pin/651544271071767887/) and I would like to create a similar pattern with p5.js. I particularly found this image intriguing because I felt there is something special about the rhombus, the rectangle whose four sides have the same length.
![](https://static.wixstatic.com/media/2505f8_4b39329673904c1691ffb221b6020d5c~mv2.png/v1/fill/w_52,h_24,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_4b39329673904c1691ffb221b6020d5c~mv2.png)
Declaring variables. I haven't assigned any values for j and k since I wanted to add some random elements that can be changed by the user interacting with the sketch.
![](https://static.wixstatic.com/media/2505f8_895eac7534fc4abab7aa6b60c3782bfb~mv2.png/v1/fill/w_87,h_67,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_895eac7534fc4abab7aa6b60c3782bfb~mv2.png)
First, I declared a function named Rect to create multiple rhombi at once. The result is the image below.
![](https://static.wixstatic.com/media/2505f8_974495563b284ab193ceb674e9ad3be7~mv2.png/v1/fill/w_90,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_974495563b284ab193ceb674e9ad3be7~mv2.png)
![](https://static.wixstatic.com/media/2505f8_de2e8edae9494aa8a4dffce1d65f51b0~mv2.png/v1/fill/w_58,h_48,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_de2e8edae9494aa8a4dffce1d65f51b0~mv2.png)
I should've done a better job at finding a more elegant and computational way to call different functions; however, I just went through a trial and error method, to create somewhat visually interesting compositions.
![](https://static.wixstatic.com/media/2505f8_f4ca6f733e55491a9cc99083d5dc1965~mv2.png/v1/fill/w_61,h_19,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_f4ca6f733e55491a9cc99083d5dc1965~mv2.png)
When the mouse has clicked the values of j and k will be randomized.
![](https://static.wixstatic.com/media/2505f8_ab7873db73694999aa6389ea75bb9761~mv2.png/v1/fill/w_90,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_ab7873db73694999aa6389ea75bb9761~mv2.png)
![](https://static.wixstatic.com/media/2505f8_ab7873db73694999aa6389ea75bb9761~mv2.png/v1/fill/w_90,h_120,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/2505f8_ab7873db73694999aa6389ea75bb9761~mv2.png)