My group had a discussion with our lecturer’s this week about how we were going to manage our code. At first I assumed that all the code would have to be the same repository with one language (python) so that communication with the raspberry pi would be easier.
however, I was glad to find out that there was a solution to this issue, websockets. With using websockets, we can allow communication between different modules.
I knew that we wanted to project some visuals, so I had an idea of making a moth in p5js with moveable wings. To accomplish this, I researched about how to make curved shapes in p5js.
This is where I came across bezier curves. They allowed me to have a more specific shape, unlike the circle and square functions which couldn’t accurately replicate the shape of a moth wing.
I did initially struggle with mirroring my moth wings. However, then I realised that flipping them is actually quite simple! Since the upper and lower wings share the same y axis position respectively, they can stay the same. The x axis signs change from positive to negative ->this transformation acts like mirroring. When the translating value is different between wings, take this difference into account when translating the values.
For the bottom and lower wings on the same side, just shift the translating y point.
To animate the wings, I discovered the sin function. This sin function oscillates between 1 and 0, kind of like how a sine wave does, which I discovered when I made my water wave shape in my backend development project. When looking at the documentation, I realised that I could have my wing movement update based on a multiple of this ‘sine’ function. So, I multiplied it based on the frameCount. Since the frameCount variable constantly updates, this allows the flap value to continue to update.
Changes after feedback
I did realise though that this moth’s antennae and wings weren’t very moth-like, so after some adjusting I changed them and look more moth like. I’m quite happy with this result! Guesstimating which coordinate I needed to change was annoying, so I used this website to help me plan, which helped a lot. Bezier Curve Online Drawing Tool – Supports linear curves, quadratic curves, cubic curves, wavy curves, Bezier curve formulas, coordinate point acquisition, and SVG image export
I was happy with this result, but I wanted to add some customization to my moths patterns. Using shapes could only get me so far in the making of a pattern, so I researched the clip function. This allows me to clip an image to a shape.
I made a separate test with a simpler shape to clip and image to, to test how rotation would affect it. By doing this, I figured out by default, the upper left corner of an image is rotated. I needed to make sure that the wing and the image clipping were aligned for rotation, otherwise the mask and the shape would move differently, which causes the rotation movement to change the part of the mask that is being displayed, rather than just using the same part of the clipped image.
I didn’t want to effect my current code that I made in VSCode so I used the p5Js editor to make some prototypes. This was really helpful as it kept my project code clean and tidy while I made messy changes in the editor. Before transferring the p5js code over, I tided it up so that I could easily spot any changes I needed to make to the code.
(A few weeks after writing this entry, I wish I transferred my code over earlier as it would’ve been easier to manage with github’s push and pulling system.)
Essay
I finally decided my essay topic! I’ve really been interested in the emotional impact of technology, and how societal issues can be addressed with it. I’ve found connection and social isolation to be interesting and wondered how I could use technology to address it. I decided to address a real world topic (decline of third spaces) and how tech can help provide these spaces digitally. This allowed me to tie in some of my interests together.
I’ve tried to be more organised with this essay, as well as trying harder to stay under the wordcount. This has been helpful as it made editing and adding things less stressful compared to other essays where I wrote way over the wordcount during my drafting process.
I’ve been finding research on this interesting, and when I talk about it next year I’m excited to potentially expand my research into other similar areas, such as identity, self expression, connection, parasocialism, interaction/interactive design and mental health. I still do not know what I want to create in 3rd year, however I know I want to make something that is memorable and sticks with people and I hope to go on from there.