Title: Neo Alabastro – Constellation
Subtitle: A looking glass into starlight
Elevator Pitch: Create constellations based on random user-generated restrictions.
https://editor.p5js.org/n30w/sketches/oFcnUffFG
Develop your own “constellations”, in other words intricate, web-like structures that grow on their own. The user places down a node that of which is where a point, or a star if you will, on the constellation spawns. Once placed, the point will start to extend and shoot out rays of opaque white lines toward the rest of the canvas, inevitably stopping at points called “boundaries”. These boundaries are intentionally invisible in order to add depth to the rays of constellations, because the rays create a sense of a finite space in such a way that when the rays do intersect, they will still terminate at a common boundary and do not continue on into infinity. Yet, there are an infinite number of possibilities to each canvas a user creates, since boundaries are placed on user control but at random points, the user can place nodes wherever they please on the canvas, and browser dimension changes aforementioned boundary placement. Furthermore, opaque white, triangular-prism shaped objects criss-cross about every placed node point. This adds a new third dimension to the piece, which adds literal depth, but also is used to illustrate a star system. The algorithm for the way these rings are generated can be toggled using “C” on the keyboard. Pressing backspace on the keyboard allows the user to remove placed nodes, but keeps the generation of the solar system at each node point. This allows the user to have a little more control over what nodes have what solar systems around them. Please keep in mind that controls are kept minimal and intentionally vague. Therefore, this is meant to be an exploratory project.
Reflection:
I wanted to create a minimalist design for this project, because the greater concept that I wanted to tackle from this project is the concept of user exploration. The initial concept for the project, as documented in my slide show for Project A, was to create a some kind of simulator that let the user create their own crystals. I also wanted to take inspiration from two games that had the essence of letting the user decide what to build by giving them options, instead of creating an all-out sandbox. After talking with professor, I decided that the crystal was not necessarily the way to go, because my idea seemed too foggy in my head. A suggestion by Professor was that I should take the action of something and remove that something from the action therefore only showing the consequence.
I was pretty fascinated by ray casting, so I decided to implement ray casting in some form in this project. Ray casting is a technique used in a lot of areas of computer science technology to aid guidance systems or create lighting in games. For this project, I did not use ray casting for either of these purposes, instead I decided to use it to shoot rays from a point, or a node, to hit boundaries. These boundaries are not rendered. Therefore, the only thing that is rendered is node of origination and the rays terminating at the invisible boundary. This created some neat effects, and followed the advice of making two things react and removing the things and just leaving the reaction.
I used a YouTube guide by The Coding Train on how to implement ray casting in P5. I referenced the source in my code. I did some minor edits to the ray code though in order to accommodate the use of arrays. The ray casting code is based off of the line-line intersection formula that is on Wikipedia. This formula is, as I would say, falls under the category of general mathematical knowledge and therefore the implementation of it does not necessarily need to be quoted perhaps. I am not using any novel or groundbreaking techniques to achieve this effect.
Technical challenges I faced regarding the raytracing was just using arrays for the entire thing. Arrays were definitely the way to go, however I kept getting confused as to which array index was which, since the equations were using x’s and y’s each individually denoted with different subscripts. Furthermore, I think that I will be utilizing ray casting more in future projects, because it is an interesting concept and has a multitude of applications in any kind of coding project.
In order to improve this project, I would like to have added more colors or more variance in the way that the rays are formed and cast. Right now the rays just follow a simple rule: hit a boundary and stop. However I find that it would be interesting to develop something where rays would interact with each other, based on placement or whether or not they intersect or are perpendicular to each other. This would create a more organic structure and texture to the entire piece. In fact, a way that I tried to add this organic nature to the piece was by implementing sphere generation. This sphere generation generated around each user placed point. The spheres generate via two different algorithms that employ trigonometric functions. To change the algorithm, the user presses the letter ‘c’ on the keyboard. This changes the way the spheres generate on the canvas. Backspace is then used to clear the user placed points. If there are no user placed points, then no ray nodes will generate, however these sphere structures will still generate around those user placed points, allowing some form of user control over the canvas drawings.
Some critique about the project:
A big part of this project was the exploratory nature of things. I wanted the user to explore how to do things instead of being told to do them a certain way. A lot of the controls were kept a little vague and the user is meant to figure it out on their own in order to let them have creative control over their piece in an abstract way.
– One piece of critique given to me was that the person would click and nothing would necessarily “happen”. I would say that I am at fault here. However, I think I failed to mention that it is exploratory and clicking would let you see the constellation grow from a singular point.
– Another piece of criticism was the idea of “boundaries” and what that meant since they were not showing up on the canvas. My argument is that the boundaries are existent but non-existent. They are there, just not displayed, something that I discussed with professor but perhaps I labeled them wrongly. They are really just termination points in a sense.
– Furthermore, another piece of critique is to adjust the canvas size to custom browser dimensions. I employed that and went from a 2000×2000 canvas size to the browser’s local dimensions.
I decided to choose the Bill Evans project that I had previously created for this mini project, because I felt that it lends itself to being framed in a portrait, or in this case, framed on a website. I added HTML and CSS to decorate and display the canvas. I took inspiration from art galleries and the way in which they display works of art. I put the title of the website at the top and three short paragraphs explaining my adoration for Bill Evans. I added a fade-in for these paragraphs because I thought that would make the introduction of them smoother, and let the viewer settle into the website.