This week was the most challenging and took the longest time out of my weekly home-works because of the new experiments I did with the new medium: p5.js.
For this week, I started my work based on last week’s homework. P5.js combines with html, css, and js, so I wanted to pull up the previous week’s task to continue the journey. Based on the code, I tried to use noise interactively by texturing the picture by reading the mouse position. I loved the ending, but I needed to take this further.
For further steps, I changed the picture to a different one for visibility. Moreover, I also adjusted the coding to create a different shape as a new work of art. In the end, I liked how it turned out since it reminded me of the flower shape, the object of the picture I used. Moreover, it created a connection for delivering the story, so I decided to step further to explain my design intention of the code.
My thesis project is about adding multiple layers for various target audiences for inclusive and clear communication. Therefore, if I said another perspective that shows the design motive, it could give the audience a clearer image of the shader I created.
From the last week’s homework, I wanted to create multiple layers, so I got inspired by the first picture and tried to add the shader. However, I realized I could not apply the shader this way. I learned that there are ways to use texture to the shape, but for this trial, I could not direct the shader by putting “leftBuffer.” or “rightBuffer.” in front of the “shader(shader1);” I even tried multiple times to fix the code in different ways, but I still did not figure out.
For this stage, I tried the new method of creating two canvases. It seemed successful initially because it worked well if I applied the shader on the left side canvas and left the suitable side canvas without the shader but placing the rotating shape. However, the problem occurred when I tried to add a different texture to the right side shape. Even though I directed the two additional shader files for two separate canvases, the shader would only work for one canvas. Furthermore, the shader needed to be successfully applied on the shape I created on java script since two canvases’ coding were colliding and causing a technical issue.
While trying to find a new way to solve the problem, I came up with an idea to use other png pictures to blend two different textures on one screen by reading the mouse position to control the visibility of the photographs. This way is much better than splitting the view by using one canvas. Moreover, the overlapping effect will create a much stronger bond and make a more neutral way of flow and transition that will help audiences to come up with the idea of the design intention that I was trying to express the natural object: a flower, which I tend to use in my project often as a symbol.
Link of the Final Work:
https://editor.p5js.org/AlexNim/sketches/Li950C3D3