Idea
Sidrat al-Muntaha (Lote Tree) is the farthest boundary in the seventh heaven which no one can pass. It is called Sidrat al-Muntaha because the knowledge of the angels stops at that point, and no one has gone beyond it except the final prophet and messenger of Allah, Muhammad ﷺ. It is mentioned both in Quran and in Hadith when prophet Muhammad ﷺ was invited by Allah SWT for a visit known as Isra and Mi’raj.
I decided to make my final assignment a personal rendition of this scene, the boundary between heaven and Earth, home to a the colossal tree; Sidrat al-Muntaha.
Process
*********************************************************
- Open sketches in new tabs for proper code executions
- After clicking execute will take a few seconds to initiate ml5 library, user will get confirmation message in serial once ready and working.
*********************************************************
Iterations 1
Give the code a few seconds to start going, it takes a while for the ml5 library to come to action. You will get a message printed when it is ready, and you can raise your hand and see it reflected on p5.js.
I brought handposenet into my WEBGL canvas sketch and got it to work well on a small sqaure canvas (eg 500×500). I was able to extract the specific data points I need for the future iterations. The extracted data point is a different color from the others displayed.
I added a point matrix in the center to better understand properties of WEBGL canvas. I did not plan on keeping it to the end, but I am glad I did. It populates the empty canvas without impeding the grand, unsettling, awe atmosphere I am going for.
Iterations 2
In this iterations I worked on created a 3D fractal tree. I extracted the specific data points I need from the handposenet library and feed it into the branch function. This way we can control the fractal growth of the tree my panning our hand in front of the webcam, horizontally.
Iterations 3
Here I added music and smoothed out tiny changes to make the code more efficient and capable of running on full screen.
Iterations 4
A Maurer rose can be described as a closed route in the polar plane. A walker starts a journey from the origin, (0, 0), and walks along a line to the point (sin(nd), d). These equations are the math behind my portal.
Code Snippets
function drawKeypoints() {
for (let i = 0; i < predictions.length; i += 1) {
const prediction = predictions[i];
for (let j = 0; j < prediction.landmarks.length; j += 1) {
const keypoint = prediction.landmarks[j];
fill(0, 255, 0);
if(i==0 && j==5){
fill(255, 0, 0);
}
noStroke();
ellipse(keypoint[0], keypoint[1], 10, 10);
}
handX = predictions[0].landmarks[5][0];
handY = predictions[0].landmarks[5][1];
}
}
The code works in conjunction with a machine learning model (PoseNet) that detects and provides information about human poses. The predictions array is assumed to contain information about these poses, and the nested loops iterate through each pose and its keypoints. The ellipses are then drawn on the canvas based on the x and y coordinates of each keypoint, with special handling for a specific keypoint (index 5 of the first pose).
function branch(len){
strokeWeight(map(len,10,100,1,10));
let glowColor = color(255, 255, 255); // Set the glow color
ambientMaterial(glowColor); // Set the ambient material for the glow
stroke(map(len,10,100,50,255));
line(0,0,0,0,-len-2,0);
translate(0,-len);
let growth = map(handX,windowWidth-300,0+100,25,10);
// let growth = 14
if(len>growth){
for (let i = 0; i<3; i++){
rotateY(random(100,140));
push();
rotateZ(random(20,50));
branch(len*0.7);
pop();
}
}
}
The branch function draws a segment of a branching structure, adjusting stroke weight and color based on the segment’s length. It also includes a recursive branching logic, creating a visually interesting and dynamic branching pattern. The growth of the branches is influenced by the x-coordinate of a variable named handX.
for(let i = 0; i<361; i++){
//mathematical formula for Maurer Rose
let k = i*d;
let r = sin(n*k)*500;
let x = r*cos(k);
let y = r*sin(k);
vertex(x,y);
}
The purpose of this code is to generate and draw a Maurer Rose, a mathematical pattern based on polar coordinates. The Maurer Rose is characterized by its elegant and symmetrical petal-like shapes.
The loop iterates through angles, and for each angle, it calculates the polar coordinates using a formula. These coordinates are then used to draw the shape.
The dynamic aspects of the pattern are introduced by incrementing the parameters n and d over time. This leads to a continuous change in the appearance of the Maurer Rose, creating an animated effect.
In summary, this code produces a visually interesting and dynamic pattern known as a Maurer Rose using mathematical formulas for polar coordinates. The 3D translation and incrementing parameters contribute to the overall visual appeal and variation in the pattern.
IM SHOW Installation
Challenges
- The handposenet started acting finicky in WEBGL when the canvas sizes kept changing. The integration of hand pose detection using ml5.js introduces the challenge of synchronizing the detected coordinates with the 3D canvas. Ensuring accuracy and responsiveness in real-time adds complexity to the overall design.
- It was challenging to make objects glow the way I wanted, again I think it is because WEBGL treats those properties very differently.
Future Improvements
- Enhancing the accuracy of hand pose detection can be achieved through machine learning model fine-tuning or exploring advanced techniques, ensuring a more precise mapping of user gestures to the visual elements.
- Implementing an intuitive user interface could provide users with controls to manipulate parameters dynamically. This could include sliders or buttons to adjust variables such as tree growth, portal dynamics, and point matrix density.
- I want to add massive orbs revolving around point matrix to act as heaven and Earth.
- I want to make the Maurer Rose portal a 3D model as well, like the fractral tree.
- Exploring adaptive audio composition techniques, where the soundtrack evolves based on user interactions and the state of the artwork, would enhance the synergy between the visual and auditory elements.
