My 'Flower Blooming' storyboards
These storyboards will be helpful to me if I end up coding this idea if my dreamcatcher were to fail. It is important to create wireframes, sketches and thumbnails when coding because otherwise, it would be difficult to visualize the end outcome, especially for those who are beginners. By creating storyboards I can refer to them whenever I need, helping me stay on track of my work and organise my code into precise order.
Inspirational words from the one and only Mr Coding Train 🙏
Dreamcatcher Development
Weather data set pre-existing p5 file: https://editor.p5js.org/projects/SkXAr20Jx
Pendulum pre-existing p5 file: https://editor.p5js.org/zygugi/sketches/SkGvzmnyf
To my surprise, coding the dreamcatcher was a lot more challenging than I originally thought, especially since I am only a beginner working with JavaScript. I found it difficult to get around the coding function and variable during class, and the differences between them. Therefore referring to my peers for support, help and guidance with understanding how code works and the way it is processed. One of the biggest struggles was the organisation of my code - not necessarily in means of keeping it neat and tidy but more so with the order in which my code has to be placed in order for each function to successfully work. This is the part of coding I specifically struggled with and could not find a reliable solution before the last session I had in my Digital rotation.
Blooming Flowers Development
Therefore I reverted to my flowers blooming idea and started from scratch.
Again, I hit a brick wall as I failed to understand how I could make an element increase and then decrease, in terms of size, in a lopped state as at this stage I could only find examples of code online where an object, for example, a circle, would slowly increase and then stop completely.
The original flower shapes and colours in this code remind me of Takashi Murakami's rainbow Flower, one of my biggest inspirations and motivations for design and admiration for exploration with colour. I experimented with changing the flower sizes, to create the illusion of them blooming over time by also changing the speed, and colours of the flowers to match the brand identity colour pallet (light blue and yellow) of my E&E project. As you can see in the code below, even the changing of colours was a struggle for me because I mixed up the x and y-axis with RGB colour codes.
My blooming flowers: https://editor.p5js.org/mangamegs/sketches/KZcHnI69
The code producing random flowers below is sampled from an already existing p5 file: https://editor.p5js.org/ftobon@heartofla.org/sketches/r1KWUxDFQ
Even though my blooming flowers idea was originally going to be my plan B, I am not happy with its outcome because it hasn't met my aim and therefore I will go back to coding my dreamcatcher. To make coding my dreamcatcher easier for myself I may create an animation GIF on Photoshop instead of coding it out from scratch because after a mess of frustration and continuous trials (and a LOT of errors) I found that it was difficult to code every aspect of the clock at once, especially with only just over a week left and no prior experience to JavaScript.
Further Dreamcatcher Development
Frustration with trying to position red ellipse to the centre point of the stage.
The ellipse here currently represents what I hope to be a dreamcatcher web later on.
Finally getting the ellipse to centre with help from my peers but with the exception of getting the pendulum to extend the appropriate length. New problem alert! The pendulum knows only swings to the middle of the stage and back again, not completing the full length from left & right as before.
Personally I feel like this time round during code I have had a harder time for many reasons. Firstly I find it strange that we are being told to use javaScript when many of us only just learned, or rather skimmed over, the very basics of HTML & CSS only a couple of months ago before Christmas. I am aware that I could've used these languages within my clock's design when using p5, as they are located underneath the small arrow situated near the top left of the program, but in my eyes, this may be seen as cheating because after all the brief was set to p5 js. However, rules are made to be broken, briefs are made to be challenged and experimented with and therefore if I had the will maybe I could have filled my potential by using one of these languages instead. learning one language was already a tough challenge alone, and learning two brought me to my limits. I am interested in coding but only having two weeks to learn yet another language, this time extremely maths heavy (a weak point of mine), JavaScript in order to make something functional in order to represent a clock confined me to my abilities, which proved to later be very weak. I misunderstood the complexity and superiority of JavaScript, as I found it much harder to understand its mathematics. Furthermore, while writing and editing the code I often got confused between the 3 languages and used commands unavailable for JavaScript to read.
Although I did enjoy coding during Unit 2, I felt extremely overwhelmed this time around which forced myself to hold a grudge against coding because of the frustrations that it brings along. I also found it difficult to understand the code to begin with, even though I watched and enjoyed the tutorial videos we were given, this did not give me the possibility to ask questions and therefore forced me to work independently which is beneficial in terms of progression into the industry but not during first year when you do not have a clue what you're doing...again coming along with its positives as it allows for experimentation to take place. Moreover, I overestimated my abilities far more than I expected, even leaving my coding to the last week of the project, thinking it would be easy for me to do so since I understood the language of HTML and CSS I thought JavaScript wouldn't be much different - I was wrong! This is a good mistake for me to learn on because my frustrations with this language made me lose some of the love I originally had for programming, an essential for solving problems as a designer, and therefore taught me that sometimes you need to set your goals lower in order to create more ambitious works later in the future.
rtyujikl;
gif
Comments