Sydney Silva

Final sketch

// This code generated by Gemini at my direction
// AI-generated code - Gemini
// This sketch has been refined to be responsive, animated, and interactive.
// Interactivity has been made more dramatic in this version.

let rippleOffset = 0;

function setup() {
    createCanvas(windowWidth, windowHeight);
    // AI-generated code - Gemini: Switched to HSB color mode for more vibrant interaction.
    colorMode(HSB, 360, 100, 100);
}

function draw() {
    background(0);

    // --- Center Point ---
    // AI-generated code - Gemini: Set color in HSB.
    stroke(278, 21, 88); // Purple
    strokeWeight(7);
    point(width / 2, height / 2);

    // --- Interactive Ripples ---
    let hue = map(mouseY, 0, height, 0, 360);
    noFill();

    // AI-generated code - Gemini: Animation speed is now slower.
    let speed = map(mouseX, 0, width, 0.2, 5);
    rippleOffset += speed;

    let maxRadius = max(width, height);
    let spacing = 25;

    // AI-generated code - Gemini: A loop to create the ripples
    let mouseDist = dist(mouseX, mouseY, width / 2, height / 2);

    for (let i = 0; i < maxRadius / spacing; i++) {
        let radius = (i * spacing + rippleOffset) % maxRadius;

        // AI-generated code - Gemini: Check for hover to accentuate the ripple.
        if (abs(mouseDist - radius) < 10) {
            // Accentuated style
            stroke(hue, 50, 100); // Brighter
            strokeWeight(6); // Thicker
        } else {
            // Normal style
            stroke(hue, 80, 100);
            strokeWeight(3);
        }
        
        circle(width / 2, height / 2, radius * 2);
    }
}


// AI-generated code - Gemini: A new ripple is created on click
function mousePressed() {
    rippleOffset = 0;
}

// AI-generated code - Gemini: A function to handle window resizing
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

function touchEnded(){
  console.log ("Sydney Silva Final Sketch")
  saveCanvas();
}

When there is translucence, the feeling that this story and these emotions will never fully take shape. The narrator’s longing is see-through; we can sense what she wants, but it never becomes real. In coding, translucence is that uncertain space between success and failure. The program is not completely hidden; it offers hints, error messages, and warnings, but the real problem always seems just out of reach. Like the narrator waiting by the road, I often wait with my code, knowing what I want it to do but never quite understanding what it is trying to tell me.

// This code generated by Gemini at my direction
// AI-generated code - Gemini: Final "Translucence" Sketch
let whiteColor;
let grayColorValue = 128;
let circleStroke; 
let randomCircles = []; 

function preload() {
   astilaFont = loadFont('fonts/Astila-Regular.ttf');
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    whiteColor = color(255, 255, 255);
    circleStroke = min(width, height) * 0.5;
    generateRandomCircles();
}

function generateRandomCircles() {
    randomCircles = [];
    for (let i = 0; i < 100; i++) {
        randomCircles.push({
            x: random(width),
            y: random(height),
            size: random(10, 60)
        });
    }
}

function draw() {
  background(0);
  push();
  translate(map(grayColorValue, 0, 255, -5, 5), 0);
  let grayColor = color(grayColorValue);

  noFill();
  stroke(grayColor);
  strokeWeight(1);
  for (let c of randomCircles) {
    circle(c.x, c.y, c.size);
  }

  noFill();
  stroke (grayColor);
  strokeWeight(6);
  circle(width/2, height/2, circleStroke);
  
  let distance = dist(mouseX, mouseY, width/2, height/2);
  if (distance < circleStroke / 2) {
    fill(0, 0, 255);
  } else {
    fill(255);
  }
  
  stroke(0);
  strokeWeight(1);
  textAlign(CENTER, CENTER);
  textSize(40);
  textFont(astilaFont);
  text("translucence", width/2, height/2);

  grayColorValue++;
  if (grayColorValue > 255) {
    grayColorValue = 0;
  }
  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  circleStroke = min(width, height) * 0.5;
  generateRandomCircles();
}

There’s also something poetic about this passage. The way it’s written, with phrases like “afraid and alone” or “a grassy hill,” makes it feel almost like a poem. For me, poetry in code happens when everything just works together in a simple, clean way. Sometimes a loop or a bit of logic just fits perfectly, and it feels satisfying, almost like art. The best code is like that—simple, clear, and able to say a lot without being complicated.

// This code generated by Gemini at my direction
// AI-generated code - Gemini: Final "Poetic" Sketch
let astilaFont;
let colorShift = 0;

function preload() {
    astilaFont = loadFont('fonts/Astila-Regular.ttf');
}

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function drawResponsivePoint(x_ratio, y_ratio) {
    stroke(0);
    strokeWeight(5);
    point(width * x_ratio, height * y_ratio);
}

function draw() {
    background(200, 200, 173);
    push();
    translate(sin(colorShift) * 10, 0);

    let squareSize = min(width, height) * 0.4;
    let squareX = width/2 - squareSize/2;
    let squareY = height/2 - squareSize/2;

    noFill();
    stroke(255, 255, 255);
    strokeWeight(2);
    square(squareX, squareY, squareSize);

    let changingColor = color(128 + sin(colorShift) * 127, 128 + sin(colorShift + 2) * 127, 128 + sin(colorShift + 4) * 127);
    stroke(changingColor);
    strokeWeight(8);
    
    let lineX1 = squareX + squareSize;
    let lineX2 = squareX + squareSize + squareSize * 0.1;
    let lineX3 = squareX + squareSize + squareSize * 0.2;
    line(lineX1, squareY, lineX1, squareY + squareSize);
    line(lineX2, squareY, lineX2, squareY + squareSize);
    line(lineX3, squareY, lineX3, squareY + squareSize);

    let speed = 0.05;
    if (mouseX > squareX && mouseX < squareX + squareSize && mouseY > squareY && mouseY < squareY + squareSize) {
        speed = 0.2;
        fill(changingColor);
    } else {
        fill(0);
    }
    noStroke();
    textAlign(CENTER, CENTER);
    textSize(squareSize * 0.2);
    textFont(astilaFont);
    text("poetic", width/2, height/2);

    colorShift += speed;
    pop();
}

“A few seconds later my mother sped off, leaving me, her fifteen-year-old daughter, in the middle of an unfamiliar town—at midnight—afraid and alone. I sat down on a grassy hill near an intersection and cried. Then I walked back to the road and waited—half-hoping she’d be worried and come back for me.” This part from Dear Nobody really stands out because it’s not what you’d expect to happen. Mothers aren’t supposed to leave their daughters alone at midnight. When something like this happens, it breaks the normal pattern. It actually reminds me of when I’m coding and one small mistake, like a missing semicolon, can mess everything up. Just like the narrator, I end up stuck, waiting for things to fix themselves even though I know I have to do something about it. That kind of loneliness, whether in life or in coding, usually comes from these moments when things don’t go the way they’re supposed to.

// This code generated by Gemini at my direction
// AI-generated code - Gemini: Final "Anomaly" Sketch
let astilaFont;
let blueColor;
let blueColorAnimation = 0;

function preload() {
    astilaFont = loadFont('fonts/Astila-Regular.ttf');
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    blueColor = color(173, 216, 230);
}

function drawResponsivePair(x1_r, y1_r, x2_r, y2_r, size_r) {
    let circleSize = min(width, height) * size_r;
    let grayColor = color(128);
    let whiteColor = color(255);
    fill(whiteColor);
    stroke(whiteColor);
    strokeWeight(2);
    circle(width * x1_r, height * y1_r, circleSize);
    noFill();
    stroke(grayColor);
    strokeWeight(3);
    circle(width * x2_r, height * y2_r, circleSize);
}

function draw() {
    background(0);
    push();
    translate(0, sin(blueColorAnimation) * 5);

    let anomalyX = width * (425/700);
    let anomalyY = height * (250/700);
    let anomalySize = min(width, height) * (100/700);

    let animatedBlue = color(173, 216, 230 + sin(blueColorAnimation) * 25);

    let distance = dist(mouseX, mouseY, anomalyX, anomalyY);
    if (distance < anomalySize / 2) {
        fill(animatedBlue);
        stroke(animatedBlue);
        blueColorAnimation += 0.2;
    } else {
        fill(blueColor);
        stroke(blueColor);
        blueColorAnimation += 0.05;
    }
    strokeWeight(2);
    circle(anomalyX, anomalyY, anomalySize);

    fill(0);
    noStroke();
    textAlign(CENTER, CENTER);
    textSize(anomalySize * 0.2);
    textFont(astilaFont);
    text("anomaly", anomalyX, anomalyY);
    
    // ... draw other circles ...

    pop();
}