W01 – Generative Visuals with Transformations and Vectors in p5.js

For this assignment I would say that it was really a challenge.
To be fairly honest I have been using P5 for many classes in IMA, but such usage rarely connects with vector and any higher level functions, so this is new stuff for me.

This assignment starts out in a struggle.
I originally thinks to create something completely out of nowhere in my brain, somehow worked, somehow not, and in the end I decided to revamp it, and at that moment I came to realized, I been coding on guest accont, and all the codes I have done had not been saved.

Thus there is no screenshot for that, my apologies.
For the second attempt, this time I stared with looking at videos from references. It went ok, here is the first image.

https://drive.google.com/file/d/16DoTVilE5qkSnKZpwhHLndSPe-TEjujj/view?usp=sharing

After several attempts I had let the ellipse moving using vector.

Then there is the line, I had it working as well, only separately

https://drive.google.com/file/d/1vix9fB_q7SmO7xWZ5RCC_TRRjiWHVZQB/view?usp=sharing

when working together, the code run into some problems, such as the line or the ellipse wouldn’t show, etc.

https://drive.google.com/file/d/1OCbnt7F2Rb5YAvs-pEvGQursPiyQGGjx/view?usp=sharing

These are minor errors that later came to the fix, but there is one that I found most interesting, and that is when I had the two parts of the code working but not as intended. The ellpise are working properly but the line does know follow my mose cursor, it seems really dull to the mouse movements, are not as reactive.
I later realized that it was because I translate the origin to the center of the canvas, so that the line reads my mouse cursor and movements in a awkward manner.
https://drive.google.com/file/d/1qM11S8yQS4ChGWklVrbQgZNCiZntFoiw/view?usp=sharing

With that being fixed I later added some more codes to fit the assignemnt requirements, but some I just don’t find a chance to add in, in the end the code results like this.
https://drive.google.com/file/d/1YQ0uFbrursmF59d9vEDHudFj-fOu371k/view?usp=sharing

Here is the code on P5.
https://editor.p5js.org/hz2504/sketches/T6nPhbacr

Leave a comment

Your email address will not be published. Required fields are marked *