Intro
Sometimes I wonder if there is indeed some force behind coincidence – especially when those coincidences are of my favorability.
Right before I set off for my adventurous journey to Abu Dhabi, I visited an exhibition in Shanghai, in which a collection of portraits and self-portraits were borrowed from Centre Pompidou. From those who devoted their efforts to whether capture the subject faithfully or replicate their physical appearance to those who indulged their artistic preference, streaks of character, habits, and egos into the paints, the portraits collectively reminded me of that recurrent theme in every art form, I presume – the tension between the art and the artist. Aside from the cliche saying from Oscar Wild (although his definitive statement is, even for an ambivalent person like I am, attractive enough), I would stick to leaving the answer for now.
On the other hand, even if I cannot answer the big question for now (and, in fact, it could be forever), I can indeed establish a bit of myself under this daunting siding game. One of my takeaways from my first acting class today is that as a narrator, despite our habits of storytelling and the eventual manner we picked, it is our responsibility to Stay True in terms of this present moment, the soul of our story. I’ll not delve into the other takeaway of being courageous to leave others the right to tell our stories for now but make use of the first one promptly.
That being said, when it comes to composing my own self-portrait, which I’ve never tried, I’d be glad to take full responsibility for representing myself at this moment. To me, this is something that demands great courage as well. Looking back at how I could probably gain this courage, I’d say it’s the fact that I, at the end of the day, tried to admit the lack of it for so many years – from representing myself, playing music, to speaking up when I’d love to, dealing with interpersonal relationships, and to live and love, had brought me that serenity and tranquility to seeking for courage. It seems for many of us, at least many people I know, as soon as the concept of being courageous and brave was instilled into our heads, we started to self-exert as well as receive external expectations to “be courageous and brave” right away. And simply, it is impossible. It is impossible to develop that true courage and bravery by merely being told how a courageous person would possibly behave instead of honing oneself step by step and again and again in this world of reality.
Product Concept
Despite my rationale (or more of like my self-prep talk), it’s time to tackle the problem (if not the question), and I’ll try to put it as plainly as possible. At this moment, I’d be willing to conceptualize myself into a set of symbols, figures, or whatever you may call some figurative representations that could be found in real life. Although I could make a list of the symbols I’m about to include in this portrait right here, I’d like to leave it till the end and see if my conceptualization and abstraction make sense to you.
Nevertheless, the overall concept is MEs versus an ideological black hole that I’ve found as the Sword of Damocles in my life. That being said, whenever the mouse is pressed, my hovering incarnations in this blended world of 2D and 3D shapes will initiate their attack toward the black hole despite their shaky, timid, and hyped state, setting off on a journey with no way back.
Technically speaking, my using 2D shapes as my personal representatives while letting the black hole be 3D results from the simple attempt to utilize both 2D and 3D drawing/shaping functions somewhere around this project (plus, it would be quite time-consuming if I used basic 3D shapes to abstract the symbols I’d like to include). However, I can indeed also justify this choice in terms of its symbolic connotation. To reflect the nature of this colossal hazard, bain of insecurity, and ineffable abyss that lies completely out of my mortal control, I placed the threat one dimension higher than myself.
Metaphorically, MEs’ attacking the black hole embodies the courage I’d like to attain despite what comes next. As for the ending of this one-act play, maybe it’s MEs’ begone from this world? Or maybe it’s MEs entering a brand-new universe. At least if the black hole could be gone from this particular universe, it would be a happy ending for both me and the rest.
coding highlight
Despite the fact that I was not familiar with js, I would self-reckon as someone who is used to product-oriented coding; in other words, I tried to utilize as much as possible at this moment from the source to get to my ideal product as closely as possible. Although, from time to time, this mindset could lead me to a hasty organization and poor-looking codes, I do believe it’s beneficial for me to realize (at least part of) my vision quickly.
In this product, I took the black hole as a starting point. While calling the function shpere() is rather an easy deal, it did take me some time to figure out how to maintain both 2D and 3D shapes on the same canvas. The answer turned out to be using push()/pop() to create an individual drawing group. Another takeaway is the general approach to creating animation with p5js – thinking from a perspective of frame generation, specifying the animation frame by frame. And this led me to use variables to store the current status and then update the variables to achieve animation (see the usage of rotateX()/rotateY()). On top of that, to add texture() to the sphere, I tried with loadImage() in the preload() function (and thus used an image as the background as well).
*: all image files used in this project are generated with DALL-E3
// draw the sphere with texture
function blackhole() {
// Increment the rotation angles
angleXrotate += 0.005; // Adjust the speed by changing this value
angleYrotate += 0.005; // Adjust the speed by changing this value
push(); // save the current state
translate(0, -200, 0); // translate the coordinate system temporarily to place the sphere
rotateX(angleXrotate); // Rotate around X-axis
rotateY(angleYrotate); // Rotate around Y-axis
texture(imgBlackhole); // adding texture to the sphere
stroke('white'); // contour the sphere
strokeWeight(0.25);
sphere(100); // placing the sphere on the canvas with r = 100
pop(); // return to the previous state
}
let imgBlackhole; // variable to hold image texture for the sphere
let imgUniverse; // variable to hold image for the background
function preload() {
// load image files
imgBlackhole = loadImage('blackhole.jpg');
imgUniverse = loadImage('the universe.jpg');
}
As for the ME representatives, I break it down into two parts: the static drawing and the animation. Initially, I adopted the animation approach mentioned in the black hole section, only used functions to hold the drawing operations and called them in the draw() function. However, as my drawings are rather complex (although they have abstract appearances), I found that the code performance had started to decline. Therefore, I reorganized the code by placing the drawings into p5.Graphics object (that provides a dedicated drawing surface), in order to improve efficiency. This also enabled me to process the objects individually as a whole later on. Following is one example of my utilizing p5.Graphics object to draw an abstract guitar.
function drawGuitar() {
let c = color('#bd6d36');
let c1 = color('#592c0e');
let c2 = color('#814116');
// Create a graphics object guitar
guitar = createGraphics(100, 150);
// Draw to the graphics object guitar
// Body of the guitar
guitar.fill(c); // Brown color
guitar.noStroke()
guitar.beginShape();
guitar.vertex(25, 100); // Start at bottom left
guitar.bezierVertex(10, 75, 10, 50, 25, 25); // Left curve
guitar.bezierVertex(75, 0, 75, 50, 25, 25); // Right curve
guitar.bezierVertex(90, 50, 90, 75, 25, 100); // Bottom curve
guitar.endShape(CLOSE);
// Neck of the guitar
guitar.fill(c2); // Mid-dark brown color
guitar.rect(25, 5, 8, 80); // Neck
// Sound hole
guitar.fill(c1); // Dark sound hole
guitar.ellipse(25, 50, 10, 25); // Draw sound hole
// Strings
guitar.stroke('white'); // White color for strings
guitar.strokeWeight(1);
for (let i = 0; i < 6; i++) {
guitar.line(25 + 2 * i, 0, 25 + 2 * i, 60); // Draw strings
}
}
That being said, as I started working on the animation for MEs, p5.Graphics objects made it easier for me to instantiate them in class in order to define different behaviors (aka. hovering around the mouse and attacking the black hole). While I will not delve into every function I wrote for the MEs, I would like to briefly outline its operation logic. As the centerpiece, a class called Hoveringme includes six variables as parameters and two methods. The X/Y variables are used to track the relative coordinate of the object to the mouse and its absolute coordinate on the canvas. The show() method is my version of the draw() function for this particular class and will be called in the draw() function in every frame. The attack() method only updates the instance status (whether it’s ‘hovering’ or ‘attacking’), which, as a condition, determines the exact operation in the show() method.
// the hovering MEs' class
class Hoveringme {
constructor(relativeX, relativeY, shape, status) {
this.relativeX = relativeX;
this.relativeY = relativeY;
this.shape = shape;
this.status = 'hovering';
this.displayedX = 0
this.displayedY = 0;
}
// show the MEs
show() {
push();
/*
...
*/
pop();
}
// ME to attack the blackhole
attack() {
this.status = 'attacking';
}
}
Just to add a bit about my animations, which are broken down into two statuses as mentioned. First, the hovering status includes random() in the coordinates added on mouseX/Y
if (this.status === 'hovering') {
// Update the ME's position around the mouse
this.displayedX = mouseX + this.relativeX + random(-10, 10) * 0.05;
this.displayedY = mouseY + this.relativeY + random(-10, 10) * 0.05;
}
On the other hand, to achieve the attacking effect, the mouseX/Y has to be excluded (otherwise, the translation/movement of the object will always be relative to the mouse’s position).
else if (this.status === 'attacking') {
let spherePosition = createVector(0, -200, 0); // Sphere's position
let targetX = spherePosition.x + width / 2; // Sphere's X position in 2D
let targetY = spherePosition.y + height / 2; // Sphere's Y position in 2D
// Update the ME's position towards the target
this.displayedX += (targetX - (this.displayedX)) * 0.05; // Move towards target X
this.displayedY += (targetY - (this.displayedY)) * 0.05; // Move towards target Y
}
The other part of the attacking process is to decide if the object has collided with the black hole and, if so, remove it from the canvas. I achieved this by holding all ME instances in an array and then, when needed, removing them along with removing elements from the array (splice ()). (For clearer demonstration, I’ve also placed the instantiating function callingme() here.) In fact, whenever the code deals with the instances, it accesses them by calling the first item in the array objectsme.
let objectsme = []; // array to hold ME graphics objects
// create ME instances, add to array objectsme, and create graphics objects
function callingme() {
guitarObject = new Hoveringme(20, 20, 'guitar');
racketObject = new Hoveringme(-40, -60, 'racket');
rectObject1 = new Hoveringme(-70, -10);
rectObject2 = new Hoveringme(-80, 90);
rectObject3 = new Hoveringme(60, -60);
objectsme.push(guitarObject, racketObject, rectObject1, rectObject2, rectObject3);
drawGuitar();
drawRacket();
}
// in Hoveringme.show() method
if (((this.displayedX - targetX)**2 < 200) & ((this.displayedY - targetY)**2 < 200)) {
objectsme.splice(objectsme[0], 1);
}
reflections, and so on
I would say I’m quite satisfied with this production for now, whether in terms of technical tryouts or basically achieving my message-conveying intention. Still, there is much room for improvement – both technically and beyond. I could have tried with more 3D features, alpha channel, typography, etc. I could have also designed a better disappearing for the black hole when MEs had made the attacks. But overall, I believe this is quite an interesting exploration.
Continue reading “Week 1 – Self-Portrait: The Sword of Damocles”
Figure 3: It is evident that the sites, as the source of food, have the most path towards and surrounded.
