Design Concept
At first, I wanted to make something that spirals around a pivot point. To make it look less monotonous, I made the spiral only the trajectory. The actual thing going along that spiral consists of lines of increasing length with the same distance to each other with various colors normal to the spiral. But simple or random colors seemed too messy, so I made the lines rainbow-colored. Inspired by Casey Reas’ works, I decided to add a touch of randomness to the project. Therefore, I randomized the spawn points of the spiral while fixing the pivot point to the center. I also wanted the audience to have some control or involvement in the project, so I made the spirals detect the pivot point in real time, and the audience could change the pivot point themselves with a click of their mouse.
Code I am Proud of
The part that I am really satisfied with is the trajectory algorithm. This outcome was, in fact, unexpected. I spent a lot of time calculating angles so that the angles align. I gave the trajectory an original angle relative to the x-axis and calculated the angle that the x-axis, the pivot point, and the trajectory head make. then I used these two angles to determine the direction of the trajectory head should turn to. I made it turn 1/15 of the angle between each frame. Because it is a percentage change, the trajectory will never touch the pivot point. Also, the distance traveled by the trajectory head between each frame is fixed, when it is very close to the pivot point, the relative angle between the pivot and the trajectory head will change dramatically between the frames, making it leave the pivot point even further. I wasn’t sure what this would bring, and it really surprised me when I saw this interwoven structure with four corners. The code is shown below:
class Dot{
constructor(x,y,ang,len){
this.x=x;
this.y=y;
this.ang=ang;
this.len=len;
}
display(){
// Rainbow color collection
let firstColor=color("red");
let secondColor=color("orange");
let thirdColor=color("yellow");
let fourthColor=color("green");
let fifthColor=color("blue");
let sixthColor=color("indigo");
let seventhColor=color("violet");
let actualColor;
// Interpolated color generation
for(let i=0;i<this.len;i++){
if(3*i/this.len<=1){
actualColor=lerpColor(firstColor,secondColor,3*i/this.len);
stroke(actualColor);
point(this.x-i*cos(this.ang),this.y-i*sin(this.ang));
}
else if(3*i/this.len>1 && 3*i/this.len<=2){
actualColor=lerpColor(secondColor,thirdColor,3*i/this.len-1);
stroke(actualColor);
point(this.x-i*cos(this.ang),this.y-i*sin(this.ang));
}
else if(3*i/this.len>2 && 3*i/this.len<=3){
actualColor=lerpColor(thirdColor,fourthColor,3*i/this.len-2);
stroke(actualColor);
point(this.x-i*cos(this.ang),this.y-i*sin(this.ang));
}
if(3*i/this.len<=1){
actualColor=lerpColor(fourthColor,fifthColor,3*i/this.len);
stroke(actualColor);
point(this.x+i*cos(this.ang),this.y+i*sin(this.ang));
}
else if(3*i/this.len>1 && 3*i/this.len<=2){
actualColor=lerpColor(fifthColor,sixthColor,3*i/this.len-1);
stroke(actualColor);
point(this.x+i*cos(this.ang),this.y+i*sin(this.ang));
}
else if(3*i/this.len>2 && 3*i/this.len<=3){
actualColor=lerpColor(sixthColor,seventhColor,3*i/this.len-2);
stroke(actualColor);
point(this.x+i*cos(this.ang),this.y+i*sin(this.ang));
}
}
// Calculating angle
updateParam(){
this.x=this.x-10*cos(this.ang+PI);
this.y=this.y+10*sin(this.ang+PI);
this.len=sqrt(sqrt(sqrt(fibRec1)));
let navAng =atan2(navdot.y-this.y, navdot.x-this.x);
if(navAng<0){
navAng=abs(navAng);
}
else{
navAng=2*PI-navAng;
}
let angleDifference = navAng-this.ang;
while (angleDifference > PI) {
angleDifference -= 2 * PI;
}
while (angleDifference < -PI) {
angleDifference += 2 * PI;
}
let clockwise = angleDifference < 0;
let rotationAngle = abs(angleDifference);
if (clockwise) {
this.ang -= rotationAngle/15;
} else {
this.ang += rotationAngle/15;
}
}
Improvements
The lengths of the lines were a Fibonacci sequence, down to its 8th root. I wanted the increase of the lines to become gradually bigger, while not exploding to a number too huge. I haven’t experimented with other sequences due to limited mathematical abilities, but I believe there can be better sequences that will produce smoother increases in the length of the lines.