February 15th, 2025 by Isaac Cheaz
Prof: J.H. Moon
dreams, thoughts, feedback:
although, I didn't receive a story from my partner sagrario, I have taken a class with her and know a bit of her background. I wanted to create the environment of guatemala since it is her hometown, the sun is to remind her of the amazing weather in latin america and to forget about the really bad, humid and cold weather in shanghai. also, the mouse interaction creates a whole lot of flags which I think is a key touch to the culture of her hometown.
sagrario's comments:
it is incredible, super dynamic, and creative, with which you can create different types of scenarios thanks to the interactive actions that you added, the effect of the flag is also very cool and how it moves representing the country hahaha, but in summary the interactive actions that the sketch has are very well attached to the original code, and to what you want to give the user to interact with the program.
sagrario's sketch
modified version of sagrario's sketch
reflections
What have you learned throughout the process of using the setup and draw functions, as well as variables and conditionals?
there wasn't many things that i saw as new when doing this project. as mentioned previously both in class and in some of my works, i've worked with processing before, which is really similar to p5.js. draw functions are very useful, especially if you create your own functions and then reuse them in another function. all of these variables, conditions, setup and draw functions are the skeleton of p5js, so i enjoy working with them (since i have no choice haha).
Reflect on the language your partner used to describe the memory/dream and your interpretation of it using code.
even though i didn't explicitly get a dream from my partner, i always thought that it is impossible to fully visualize another person's dream. because dreams are just recreations of past experiences, which not everyone shares. still, visually i think my code is a very direct interpretation.
What are your thoughts on digital interactions and real-world interactions?
i think digital interactions falls into a sub-category of real-world interactions. i see the digital world as an extension of the "real" one. although, the difference is that real-world interactions feel more alive and a person can get a better sense of feel, but are limited to the physics and rules of our world. on the other hand, the digital world is endless and almost limitless, but you won't get the same feeling you do as in real-world interactions.
let sagrario = {
ย age: 19,
ย heigh: 158,
ย hair: "long",
ย happy: 10,
ย worried: 3,
ย skin_color: [240, 163, 127],
ย eyes_color: [43, 18, 6],
ย hair_color: [171, 67, 36],
};
let character = sagrario;
let r, g, b;
let swiiitch = true;
let swiitch = true;
let swiiiitch = true;
function setup() {
ย createCanvas(500, 500);
ย background(255);
}
function draw() {
ย if (swiiitch === false) {
ย ย background(r, g, b);
ย ย drawGradient();
ย }
ย noStroke();
ย let flagWidth = 180;
ย let flagHeight = 120;
ย let x = mouseX - flagWidth / 2;
ย let y = mouseY - flagHeight / 2;
ย // Left blue stripe
ย fill(0, 155, 255);
ย rect(x, y, flagWidth / 3, flagHeight);
ย // Middle white stripe
ย fill(255);
ย rect(x + flagWidth / 3, y, flagWidth / 3, flagHeight);
ย // Right blue stripe
ย fill(0, 155, 255);
ย rect(x + (2 * flagWidth) / 3, y, flagWidth / 3, flagHeight);
ย // Placeholder for coat of arms (a small green wreath)
ย fill(255, 150, 0);
ย ellipse(x + flagWidth / 2, y + flagHeight / 2, 20, 20);
}
function keyPressed() {
ย if (key === "d" && swiiitch === true) {
ย ย r = random(255);
ย ย g = random(255);
ย ย b = random(255);
ย ย swiiitch = false;
ย }
ย if (key === "f" && swiitch === true) {
ย ย drawSunglasses();
ย ย swiitch = false;
ย }
ย if (key === "e" && swiiiitch === true) {
ย ย character.happy *= -1;
ย ย drawGradient();
ย ย swiiiitch = false;
ย }
}
function keyReleased() {
ย if (key === "d") {
ย ย swiiitch = true;
ย }
ย if (key === "f") {
ย ย swiitch = true;
ย ย drawGradient();
ย }
ย if (key === "e") {
ย ย swiiiitch = true;
ย }
}
function drawGradient() {
ย let c1 = color(r, g, b); // Color superior
ย let c2 = color(r, g, b); // Color inferior
ย for (let y = 0; y < height; y++) {
ย ย let inter = map(y, 0, height, 0, 1);
ย ย let c = lerpColor(c1, c2, inter);
ย ย stroke(c);
ย ย line(0, y, width, y);
ย }
ย push();
ย translate(width / 2, height / 2);
ย stroke(0);
ย //hair
ย fill(character.hair_color);
ย ellipse(0, -30, character.heigh * 2);
ย if (character.hair == "long") {
ย ย rect(-character.heigh, 0, character.heigh * 2, 400);
ย }
ย //face
ย fill(character.skin_color);
ย ellipse(0, 0, character.heigh * 2);
ย strokeWeight(2);
ย //eyes
ย fill(255);
ย ellipse(60, -60, 50);
ย ellipse(-60, -60, 50);
ย fill(character.eyes_color);
ย ellipse(60, -60, 20);
ย ellipse(-60, -60, 20);
ย //nose
ย triangle(-0, -character.age, 20, character.age, 10, character.ages);
ย triangle(-0, -character.age, -20, character.age, 10, character.ages);
ย //mouth
ย let base_mouth = 70;
ย line(0, base_mouth + 4 * character.happy, 60, base_mouth);
ย line(0, base_mouth + 4 * character.happy, -60, base_mouth);
ย //eyebrows
ย let base_eyebrows = -115;
ย line(10, base_eyebrows + 2 * character.happy, 80, base_eyebrows);
ย line(-10, base_eyebrows + 2 * character.happy, -80, base_eyebrows);
ย pop();
}
function drawSunglasses() {
ย fill(0);
ย stroke(0);
ย strokeWeight(2);
ย line(100, 190, 400, 190);
ย fill(255, 255, 0);
ย circle(500, 0, 200);
ย stroke(255, 255, 0);
ย line(400, 40, 360, 60);
ย line(425, 80, 390, 120);
ย line(460, 120, 440, 160);
ย noStroke();
ย stroke(0);
ย fill(0);
ย circle(190, 190, 90);
ย circle(310, 190, 90);
}