wanted to create and interactive or moving piece as my first final product. So,
when I found P5.JS
rotation ellipse by Arjun Singh. I instantly decided to use it as my example to follow. I
chose this piece because all functions and code used to create it, could be
linked to topics that I had learned in the lecture workshops.
his work as my starting point, I began to alter code deleting and adding
different objects that I thought could work with the idea I had in mind. Until
I saw myself with my desire finished product.
When it come to this piece, I cannot say that I had really
planned it out, much.
I was going over a site I was recommended by one of my
lectures, as I has easy to understand definitions and good examples.
The specific code composition that inspire this drawing can
be found in “genekogan.com” under
combining transformation functions.
The original piece is made out triangle that are aligned one
after another in a circular shape. It creates the sensation of a spiral stairs,
this is also due the fact that the size of this triangle becomes bigger the
more that are created.
Using his work as guidance I manage to create my own. I
decided to make a sphere-shaped pattern which it is composed out of other
In this occasion, I used P5.JS colour variables as main
guidance. In this example, you are able to admire how different sized objects
lay inside the other with different shades of a defined colour so they are able
to be seen.
I implemented this idea to my own vision. I transformed it
to create Order Blue. On my drawing,
I swapped the square for decagons. I also added and extra object (decagon) as I
wanted to have more colour positioning variation.
To create the decagon, I had to create a function the call
it back into function draw.
My overall experience for this module was very satisfying as
well as frustrating.
At the very beginning, I was not able to make any of the
code I wanted to implement to piece, this would cause my drawing to keep
crashing. This was due to me not being capable on of understanding the basics
of creating a code file using p5.js. However, the more I researched and look at
code it became a lot easier to understand.
When I come to the quality of my work, I have to say that I
could have been a lot better, as I did not manage to include all of the aspects
included on the assignment brief. On the other hand, I would insist that I do
not think if I had implemented all of them I would had been able to create the
quality drawing I had in mind. Therefore, I do not regret making the decision
of not using them.
Also, if I had managed my time efficiently and not
procrastinated so much, I think I would had been able to create more complex
figures but due to the short time I had left to create them I am proud of the
results. For future projects, I would focus giving myself enough time to finish
the task and window for improvement.
Generative Art: Engin Arsian , created March 10th
Website (examples): https://p5js.org/examples/
Getting Started with P5.JS. Author ,Lauren
McCarthy Reas, and Ben Fry. Published October 2015, Marker Media.246 pages.
P5.JS rotation ellipse : Arjun Singh, created February 21st , 2016//Updated
March 7th, 2016. https://codepen.io/zoravar/pen/OMeRPa
Transformation , Rotation and Translation: http://genekogan.com/code/p5js-transformations/