This week the assignment I had to do involved learning some fundamentals of coding and trying to change my original self portrait. It was going to be several days of frustration as I have zero coding experience!
For my original sketch I created a wheelchair and user motif, my challenge was to try and do the following.
One element controlled by the mouse.
One element that changes over time, independently of the mouse.
One element that is different every time you run the sketch.
Did I do this? Yes and no! I did manage to do get a sketch created with an element controlled by a mouse but it was not my portrait sketch. I did manage to create a sketch that one element changed or was different every time I ran the sketch. I didn’t mange to create a sketch with an element that changed over time, independently of the mouse. However I did manage o learn how to animate my original self portrait with what I learned from this weeks video tutorials!
I really struggled with learning about variables which meant many hours of repeatedly watching the videos until some of the information stuck, then I just repeated exactly what was going on in the tutorials to really try to grasp the lessons. It was a laborious process but I feel like I am starting to understand!
This is the code I created to declare elements of the sketch. In order to make the elements move I had to apply a speed declaration to each of the elements too! I am sure that this can be done much more quickly and much more easily! I got it to work however!
This video shows how the animation works. Where I ran into some problems was when I tried to apply the same speed variable to all of the elements. It didn’t work at all. What I had to do then was create an individual speed variable for each element and then had to further apply the speed variables to specific points on some of the elements. For example on the arm2 element I had to apply the speed9 variable at x1 and x2 to get it to move correctly! It took a while to do all of the elements once I figured this out.
This image shows how I applied the variables as part of the draw function. This was a steep learning curve!
https://editor.p5js.org/Joycey210/sketches/UsquPh_zR
This is the link to the sketch of my updated self portrait.
https://editor.p5js.org/Joycey210/sketches/SYgifJsX0
This sketch is the one I used the mouse to control the sketch. The mouse click reset the sketch.
https://editor.p5js.org/Joycey210/sketches/_8GPC7yqs
In this sketch I tried some more experimentation with moving elements with the mouse while implementing object literals!
It’s been a challenge for me as a person with zero coding but I hope that I can grasp things a little quicker as a result of learning the fundamentals!
Designing, Educating, Exploring 
Hi Noel, you are off to a great start in creative coding, and it’s completely okay that the exercises were not combined into one sketch as long as you had a chance to practice some of the new concepts.
I recall you mentioning during class that you spent a lot of time on this week’s homework. Thank you for your hard work this week and for your ongoing contributions in class. I’m glad that the videos were helpful to you. I’m curious: did you mainly watch The Coding Train or any of the supplemental videos on the syllabus page?
For your first sketch–your updated portrait–great strategy to organize all the components into object literals. It was extremely easy to follow your code below, especially with the added animation. I notice that you’re using the same value, -2, for nearly all the elements’ speeds, except for wheel1 and wheel3, so you could use one speed variable for all the rest (an intention you mention here). Or, you could use it for all them and then scale the variable for the other two elements. Either way, the resulting animation with the decreasing strokeWeights on the wheels is a really nice touch.
Let me know if you have additional questions!
LikeLike