For this assignment, once again, I proceeded with going abstract, but I tried to get inspired by Dan Croll’s Music Video “Tokyo” which is animated by Simon Landrein (sadly, the video is blocked in the UAE). This video has a different approach to animating, as it contains all the visible elements inside a frame, which is also inside another frame (YouTube’s video player on this occasion). It is an interesting approach, and I wanted to try to replicate it.
Once I could replicate the frame borders with the use of line(), I noticed that it would not be enough for what I wanted to do, because if figures were drawn, they would also be displayed outside the frame. So to hide the rest of the figures, I employed rect() to cover all areas behind the drawn lines, and thus, the same technique as in the video is possible. I first started with the idea that I wanted to make the edges of each frame interactable and all the contents inside the portrait change, but soon it proved not only to be challenging, but very time-consuming, so I discarded the idea and thought about going for a different approach.
Since the assignment required me to create a “generative artwork,” I once again thought about the past week’s material, as it involved creating art with the use of algorithms and subsystems. And not only that, but I decided to once again go with the use of figures, which are, on this occasion, more interactable.
The user is free to use the mouse to interact with the canvas. If the mouse is pressed outside the frame borders, it will create new figures and a bit of an illusion; figures are emerging off the scene. And if the mouse is pressed inside the frame, two things will happen: the colors will change, and the figures will approach slowly, depending on where the mouse is. Furthermore, if the user clicks continuously inside the frame, the figures will disperse randomly.
The part of the code that I feel most proud of is where most of the interaction with the figures happens, which is this code block:
//This is to help with creating new figures, move and change color.
if (mouseIsPressed){
//Collision detection outside portrait.
if ((mouseX > 0 && mouseY > 0) && (mouseX < frame.w/8 && mouseY < frame.h) || (mouseX > frame.w/1.15 && mouseY > 0) && (mouseX < frame.w && mouseY < frame.h) || (mouseX > 0 && mouseY > 0) && (mouseX < frame.w && mouseY < frame.h/8) || (mouseX > 0 && mouseY > frame.h/1.15) && (mouseX < frame.w && mouseY < frame.h)){
createfigure();
} else {
//Move figures to current mouse position if the cursor is inside the portrait.
for (let i = 0; i < figure.length; i++){
if (figure[i].x != mouseX || figure[i].y != mouseY){
if (figure[i].x < mouseX){
figure[i].x += 5;
}
if(figure[i].x > mouseX){
figure[i].x -= 5;
}
if (figure[i].y < mouseY){
figure[i].y += 5;
}
if(figure[i].y > mouseY){
figure[i].y -= 5;
}
//Change color of items depending on mouse position.
figure[i].color1 = mouseX;
figure[i].color2 = mouseY;
figure[i].color3 = mouseX+mouseY;
}
}
}
}
In this code, an if statement is first used to ensure that the mouse is, indeed, outside the canvas to create figures with the function createfigure(). If the condition is not met, a for loop and many if statements are used to assure that the array is fully checked for each object (or figure) inside it and to then modify the attributes like X and Y position, and color. This is to be able to move them while also changing the color with the position of the mouse on the screen.
For future assignments, I will try to go for a more artistic approach and not that many uses of figures, since art can be employed in many ways rather than just going full abstract.