For this week’s homework I decided to refactor last week’s screensaver assignment. More specifically, I wanted to rename all of the custom variables to much more literal names, making it more fluent to my own brain. Before changing anything, I created a new branch within the vscode file called “deSmell”. Within this branch I saved my refactoring progress, and when I was finished, I merged it with the main branch and then deleted “deSmell”. Copilot was fantastic for this type of refactoring because I would have it change all of the names for me after I decided on what I would rename this. This saved me around 30 min of typing.

My personal feelings so far with using git are that I do enjoy file structuring and creating digital organization, however I find working in the terminal to be very clunky. I definitely look forward to learning a more automated way to use git, as this is definitely a workflow that I can see myself using a lot, as long as it was slightly more automatic. The entire branch process is very foreforton in my thoughts as I start to look forward to my final project for this class: a fully custom personal website. While I do not want to make anything too crazy, I’d like a lot of personality driven design to be included on my site, and I believe that will result in trying a lot of different structuring and just general layout tweaking. These changes all lend themselves to git branches, I think, so I might as well get used to it now.

let color1, color2;//initiating the variables for random color change
let shift = 0;  //initiating the shifting value for noise later. T

function setup() {
  createCanvas(windowWidth, windowHeight);
  color1 = color(255);
  color2 = color(255);
}

function draw() {
  background(0, 2);
  
  let t = frameCount / 400;//speed of animation 
  
  // uses the same seed of noise in each parablic equation to had a small shift in variation to the animation 
  let variation = map(noise(shift), 0, 1, -0.1, 0.1);
  
  let x1 = width / 2 + (width / 4) * cos(t + variation) * cos((3 + variation) * t);
  let y1 = height / 2 + (height / 4) * sin(t + variation) * cos((3 + variation) * t);
  
  let x2 = width / 2 + (width / 4) * cos(t + PI + variation) * cos((3 + variation) * t);
  let y2 = height / 2 + (height / 4) * sin(t + PI + variation) * cos((3 + variation) * t);
  
  shift += 0.10;//shfiting incrementally, so theres a smooth transitition between the previous paths 
  // checking when the two ellipses are close enough to each other to randomly change color
  let d = dist(x1, y1, x2, y2);
  if (d < 5) {
    color1 = color(random(255), random(255), random(255), 150);
    color2 = color(random(255), random(255), random(255), 150);
  }
  
  noStroke();
  fill(color1);
  ellipse(x1, y1, 6, 6);
  fill(color2);
  ellipse(x2, y2, 6, 6);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

let particleColor1, particleColor2;
let noiseShiftOverTime = 0;  //initiating the shifting value for noise later. The first round has none. 

function setup() {
  createCanvas(windowWidth, windowHeight);
  particleColor1 = color(255);
  particleColor2 = color(255);
}

function draw() {
  background(0, 2);
  
  let particleSpeed = frameCount / 400;//speed of animation 
  
  // uses the same seed of noise in each parablic equation to had a small shift in variation to the animation 
  let noiseDrivenVariation = map(noise(noiseShiftOverTime), 0, 1, -0.1, 0.1);
  
  let x1Path = width / 2 + (width / 4) * cos(particleSpeed + noiseDrivenVariation) * cos((3 + noiseDrivenVariation) * particleSpeed);
  let y1Path = height / 2 + (height / 4) * sin(particleSpeed + noiseDrivenVariation) * cos((3 + noiseDrivenVariation) * particleSpeed);
  
  let x2Path = width / 2 + (width / 4) * cos(particleSpeed + PI + noiseDrivenVariation) * cos((3 + noiseDrivenVariation) * particleSpeed);
  let y2Path = height / 2 + (height / 4) * sin(particleSpeed + PI + noiseDrivenVariation) * cos((3 + noiseDrivenVariation) * particleSpeed);
  
  noiseShiftOverTime += 0.10;//shfiting incrementally, so theres a smooth transitition between the previous paths 
  // checking when the two ellipses are close enough to each other to randomly change color
  let colorChangingProximity = dist(x1Path, y1Path, x2Path, y2Path);
  if (colorChangingProximity < 5) {
    particleColor1 = color(random(255), random(255), random(255), 150);
    particleColor2 = color(random(255), random(255), random(255), 150);
  }
  
  noStroke();
  fill(particleColor1);
  ellipse(x1Path, y1Path, 6, 6);
  fill(particleColor2);
  ellipse(x2Path, y2Path, 6, 6);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Screenshot 2025-03-09 at 3.26.09 PM.png

Created a new branch, committed to it twice, merged it with main, then deleted it.

Created a new branch, committed to it twice, merged it with main, then deleted it.