Background: I used p5.js to create a logo that I designed for my startup FlipWord. The logo is composed by two triangles with gradient colors.
Assumption: Use triangle( ) and fill( )
Reality: fill( ) only works for solid color // I might be wrong, but it didn't work for me.
Initial Implementation: I created two functions with for loops inside to draw the gradient-colored triangles. In this initial implementation, I only used 1 gradient color.
Final Version: Besides the two modifications, I also added another gradient color to the sketch. Github link
1. Since the shape is a triangle, not a rectangle, it's not enough to only have 1 statement in the for loop inside the setGradient( ) function. I ended up using 3 statements for the bottom triangle.
2. The two triangles are not symmetric and are not facing the same angles. The first setGradient( ) function I created for the bottom triangle won't work for the top triangle. Therefore, I created another setGradient( ) function specific for the top triangle. Since the top triangle not only has a right angle but also stands upright, I only need to use 2 statements in the for loop this time.
3. The software engineer suggested me to make the code more concise by assigning the color value at the same line which the variables were declared, instead of inside the function setup( ), so I did...it turned out to be a mistake...Nothing would be drawn anymore. I spent tons of time debugging before knowing that it was actually caused by this change.
Mystery: Even though the logo looks fine, but there might be something wrong with some of the coordinates or the for loops I wrote, because I had to use different values from the original design file. I still haven't figured it out why.
Question: Is there an easier way to draw gradient colors using p5.js? I thought p5.js, as a library that is specifically developed for interactive design, should be much easier than CSS.
Experience with the Web Editor: I only used the p5.js web editor to complete the optional quizzes. I encountered delays, responsive issues, and usability issues, such as I cannot use shortcut to refresh the sketch if I made some changes in the code. Therefore, I'd like to continue using my WebStorm editor.
Thoughts in Computation and How it Applies to My Interests:
Knowing a foreign language, esp. English, once was considered as a golden skill in Asia for a long time until nowadays when everyone can speak some and there are tons of translation tools available at our fingertips. Although the value of being able to code is still at its peak, I tend to think its near future will fall into the same trajectory. The more I think of this, the more I feel urgent to learn, not just to learn how to code but also how to use the "superpower" to fulfill a meaningful pursuit. The direct application of computation will definitely be my startup project, which hopes to change the way people to learn things. I'm also excited to explore more applications, especially in the augmented reality field. I'm not sure what project I'd like to work on this term yet, but I hope it's something that I can combine the startup project with augmented reality.