Overall Experience
Even though I am a CS major, I started my coding journey only after coming to NYUAD. But all the CS courses I have taken so far don’t involve a creative expression of thoughts and imagination, but this course started off itself with an interesting assignment – to code a self-portrait. I wanted my self-portrait to reflect my vibes, so I wanted the theme to be related to a party.
Process and Progress
Initially, I just explored different functions and methods that I could use to make my theme alive. So, I added a colorful dance floor, for which I used 2d arrays to arrange the rectangles and then used drawingContext.shadowBlur to give a realistic shadow effect, which turned out good. Then I wanted the background to shine, like with lights, so I added little white ellipses in the background.
function disco(Y) {
for (let x = 0; x <= 600; x += 30) {
for (let y = Y; y <= 400; y += 30) {
drawingContext.shadowBlur = 20;
drawingContext.shadowColor = color(random(255));
fill(random(255), random(255), y);
rect(x, y, 30, 30);
}
}
}
function sparkle() {
fill(255);
noStroke();
for (let i = 0; i < 100; i++) {
ellipse(random(width), random(height), random(1, 6));
}
}
As for drawing myself, in the beginning, the task was to identify which shapes would be the best to use and understand how to use them – rectangles, circles, triangles, ellipses, Bezier curves, Bezier vertices, curves, and arcs. Using Bezier curves and vertices was my favorite. The most difficult part for me was the arms to have two parts of the arm properly rotate. I explored the constrain function and used it to constrain the arms to a region. At first, I found it hard to get the logic on how I could use this function to constrain the parts of the arm and rotate them properly. But I am happy I could figure that out in the end.
function moveHands() {
strokeWeight(20);
stroke(25);
//left arm
line(245, 180, constrain(mouseX - 70, 175, 325), constrain(mouseY, 150, 250));
line(
constrain(mouseX - 70, 175, 325),
constrain(mouseY, 150, 250),
constrain(mouseX, 150, 350),
constrain(mouseY + 10, 50, 300)
);
//right arm
line(
width - 250,
180,
constrain(mouseX + 70, 325, 425),
constrain(mouseY, 150, 250)
);
line(
constrain(mouseX + 70, 325, 425),
constrain(mouseY, 150, 250),
constrain(mouseX, 250, 450),
constrain(mouseY + 10, 50, 300)
);
strokeWeight(1);
noStroke();
}
Reflection
There is so much more to learn and explore that I can never say my project is fully perfect. Each time I found something or tried something, I kept feeling that I should expand my project more and more. I looked forward to exploring much more in this class and letting my creative side explore.
