Opposites - HW 2

Date: Sunday, 07/19/2026

Class: Creative Coding (IMALR-GT 102)

Section: 002 (Carrie)

Name: Janice Vuong

Week: Week 2

Choose a pair of words with opposite meanings. Create one sketch to represent the pair of your choice.

A link to your working sketch: https://editor.p5js.org/basicallyjanice/sketches/7GU30KFxG

A paragraph describing your process. What issues did you encounter and how did you solve them?

It actually took me awhile to come up with a pair of words to create

I think for the longest time I thought I was going to go with up and down because I was stuck with the shapes leaving trails/traces (from the class explore sessions) but I am really happy that I got to the pairs of words: day ☀️ and night 🌕

It was a bit hard to come up with a variable name because I wanted it to be one word, but apparently the sun and moon are not planets (???) Well I remember the sun being a star.. but moon is categorized as a satellite (??!!) Then, I learned that you can use underscores for variable names. So, I defined my variable as sun_moon.

var sun_moon = 0;
//define a variable

function setup() {
  createCanvas(600, 400);
}

Learning about the map(); function really helped me in this assignment. The function ↗ re-maps a number from one range to another. In this case when the mouseX position moves towards end of the canvas (from 0 to 600), the background changes from a range of 255 → 0.

255 being black, and 0 being white. This would help with the transition from day → night

function draw() {
  //map( ____, min, max, min, max);
  // mouse can go 0 to 600 position, change colors from white/day (0) to black/night (255)
  sun_moon = map(mouseX, 0, 600, 255, 0);
  background(sun_moon);

So now the background transitions to x-coordinates of the mouse. For simplicity for my creative coding, time is linear so I added a text description using the text(); function

//make text black
  noStroke();
  fill("Black");
  text("Time →", 275, 150);
  //text display word: timem

Adding if statement and else statement. I also wanted the sun_moon variable to change colors as it transitions to day → night to really emphasize opposites (because I am not advanced enough to create more complex shapes, like making a crescent moon???) When I look at the sky, the sun and moon are both circles to my eyes anyways.

//sun moon color
  //change sun moon color based on x cord
  noFill();
  if(mouseX > 350){
  fill ("LightGoldenrodYellow");
  }else{
  fill ("Gold");
  }
//Gold for Sun and Light Yellow for glowy Moon

I used 350 as the value (x-coordinate) for when the mouse x-coordinate position is greater than 350, to change the sun_moon color to → LightGoldenrodYellow (it looks like a pale glowy yellow like the moon to me) at night. 🌕

The else statement is when mouse x-coordinate is not greater than 350 on the canvas, to change the sun_moon variable color to → Gold (so a bright day-time sun!) ☀️

I found the color names from: HTML Color Codes Color Names ↗

//ellipse (x cord, y cord, height, width);
//replace with mouseX and mouseY to simulate organic sun rising
  ellipse(mouseX, mouseY, 64, 64);

Lastly using the ellipse(); function to create the sun moon shape! I originally had the idea of just writing: ellipse(mouseX, 200, 64, 64);

However, I realize that replacing it with y-coordinate with MouseY will make the sun moon movements more organic, and mimic the rise and fall of the sun and moon, throughout the day by following the true mouse positions on the canvas.

Did any code-related questions come up for you?

Yes! I wrote: text("Time →", 275, 150);

Even though I kept adjusting the width, and height of the text(); function. How can I make the text appear bigger on the canvas?

Opposites Code by jan