Project Name:
Endless Timelines — User-genarated drawing program
Author:
Jiapei Yao
A sophomore student at NYU Shanghai, intended to major in Interactive Media Arts.
Link to the project: p5.js Web Editor | Endless Timelines (p5js.org)Description & Concept:
The project, “Endless Timelines,” demonstrates the imaginary timelines. It contains mainly two parts. One is the main stem, which is drawn on the canvas according to the route that users draw by connecting each dot they create; the other is the randomly-generated branches from the main stem. For the main stem, users can control its thickness by pressing the upward or downward arrows on the keyboard. And by pressing “enter”, the stroke of the main stem will return to the original one. For the branches, they will start growing from the dots on the main stem when users hit the space bar. The branches change direction randomly at a degree of 60. Besides, by pressing Esc, the generation of the branches will stop, and the users can now draw a new timeline. Moreover, the screen will darken when pressing the “backspace”, in order to create a spatial visualization.
Visually speaking, the “timelines” create a kind of high-tech, mysterious atmosphere. This is due to the neon-like color and the branches that look like the circuit diagrams. These components correspond to Cyber-punk, which strengthens the atmosphere of mystery and high-tech.
The main concept of this project is to let the users be the creator of a multiverse. Users will be able to create the main stem of the timelines. However, they won’t be able to control the growth of the branches, as these branches are randomly generated. Like most things in life, we can create and manage the main parts, but we can’t fully control the minor components.
Reflection
Process: Design & Composition
At first, I took reference from the TV series “Loki” and wanted to create a
timeline similar to the visual effect in the series. However, when sketching the first edition of the design, I encountered the problem that the branches will keep generating because of the “for” loop that I use to generate the Main Stem’s “class”. Thus, Professor Moon suggested I change to another style of design. That is, the main stem is not generated whenever the mouse is pressed, but by connecting to dots that are created by clicking the mouse. In this way, the former problem is then solved.
On the interaction day, however, many classmates gave me suggestions that the mainstem’s color might be too strong compared to the other components of the project and that the branches can’t stand out because of that. Thus, after communicating with Professor Moon about this problem, he suggested I change to another style that allows the current intensiveness of the main stem and still has a great visual outcome. And the reason why I can’t stick to the former visual effect is that because of the “for” loop I use to generate the main stem, the main stem will get brighter and brighter no matter what.
Therefore, the design was finalized at the current stage, in which the brightness strengthens the glowing effect of the timelines other than extracting attention from the branches.
Process: Technical
Describe the technical development process of your project. Describe the technical challenges that you faced, solutions you found as well as compromises you had to make.
What could have been implemented better and what changes you would make if you had the chance to do it all over again. What discoveries did you make along the way? Be as detailed and specific as you can.
The code had a major change from the first design to the second. The mainstem was first generated by circles along the route of the mouse. However, because I wrote the main stem in OOP, thus it would be very troublesome to draw the line in this way. After talking to Professor Moon, he suggested I change the code to the second design, which is much easier to run. I also learned from this change, how to take the value of the former object in an array when executing a “for” loop.
for (let i = 0; i < mainStem.length; i++) {
this.Mcolor = 255;
let m = mainStem[i];
if (i != 0) {
let pm = mainStem[i - 1];
m.displayLine(pm);
}
Also, when solving this problem, I encountered a dilemma. Because I am drawing traces on the background again and again, in order to make the main stem less bright, I have 3 options:
- remove the background;
- remain the background, but the background will keep becoming brighter and extract the attention from the timelines;
- change a new design that looks good when the main stem is very bright.
At last, due to Professor Moon’s suggestion and the visual outcome that I want to achieve, I chose the third option and adopted the current design.
There was also a big challenge in learning how to use the “vector” function to get the direction of the main stem, which could contribute to controlling the direction of the branches. First, I had trouble constraining the direction that the branches are going. But later, after talking with Professor Moon, I learned that it’s because I mixed the non-vector value with the vector that my initial code did not work.
Correct version:
this.direction = vector.copy();
this.direction.setMag(1);
this.x += this.direction.x;
this.y += this.direction.y;
Incorrect version:
this.vector = vector;
this.xSpd = random(0,3);
this.ySpd = random(0,3);
this.x += this.xSpd * this.vector.x;
this.y += this.ySpd * this.vector.y;
Hopefully, in the future, I would be able to generate OOP more easily and intuitively and make a better decision on whether to use OOP or not.
Reflection and Future Development
All in all, this project has changed dramatically during the whole process. Every time the change occurs is due to the technical issues that I have encountered. Thus, in the later part of my study, I think improving coding skills and be more logical and comprehensive is very important.
Overall, I’m most satisfied with the visual outcome and the interaction of this project. Because the final visual outcome does well in creating a sci-fi atmosphere and the interaction combines both arbituariness and control very well. However, I think the project doesn’t represent the theme “time” very efficiently. Maybe guest critic Samantha’s idea of letting the background fade out automatically other than manually would be a great idea.
Besides making the background to fade out automatically, this project could also further develop by changing the color of the main stem of the timeline as if it’s a ‘light tube’ (as guest critic suggested). I think it would work better because this could also increase the sense of “time”, as if time is travelling through the timeline.