It has been a long time since I coded last time. It was about two years ago when I studied Java in high school. As a math major student, I consider it crucial to own some computer programming skills. I have always wanted to pick up my skills but have been too busy with other stuff to do so. I’m finally back to the world of programming and it feels extremely great.
For the first assignments I was just messing around with p5.js and trying to remember the things I had learnt about Java (since its grammar is very similar to the one of Javascript).
For the static image I drew a pattern with circles and squares only. As a math student I have always had an obsession with circles and squares since they are considered as the most “perfect” shapes of geometry. It makes even more perfection if they could cut each other. Thus I made an image with circles and squares cutting each other with the ratio of their radius either 1/2 or 1/√2.
Then I tried to use the functions fill(), stroke() and random () to add some random colors to my image. so the final pattern is like this:
(The colors are completely random so the colors will change each time you refresh the page.)
For the animated one I tried to use something that I’ve learnt in Java: the for-loop. Fortunately Javascript shares this grammatical feature with Java so I succeeded at the first attempt. I created some bizarre pattern like this:
Then I tried to use the argument mouseIsPressed and ended up with a drawing tool:
(Try to click your mouse inside the canvas.)
Then I also tried to make something else with p5.js. I tried to create a circle moving around inside the canvas toward a random direction with a constant speed:
This one is more complicated since I have to think about the conditions of the loops to ensure that the direction is random and the circle remains inside the canvas. (I didn’t know of the function constrain() until I saw the example of “nervous square” given by Professor Shiffman, so I used if() to achieve this. Also, letting it move at a constant speed requires some mathematical knowledge.)
These are just me messing around with p5.js. These example probably will have nothing to do with my final project. For the final project I want to devise a simple graphing calculator. I expect it to not only track the graph of a function but also do some calculation as well such as its maxima, minima, domain, range, or even derivatives and integrals. I will elaborate on this in my process of learning p5.js.