Example 1, changed

/*
Inspired by the classic Windows Mystify screensaver

Based on code translation from Chris DeLeon's Programming in 5 minutes: remaking “Mystify Your Mind” Windows 95-style screensaver effect
<https://www.youtube.com/watch?v=-X_A1Hqj-qA>
*/

let x1;
let y1;
let x2;
let y2;

let x1speed;
let y1speed;
let x2speed;
let y2speed;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(255);
  strokeWeight(2);
//giving initial random values for the line coordinates 
  x1 = random(width);
  y1 = random(height);
  x2 = random(width);
  y2 = random(height);
//random speeds for each point 
  x1speed = random(-10, 10);
  y1speed = random(-10, 10);
  x2speed = random(-10, 10);
  y2speed = random(-10, 10);
}

function draw() {
  background(0, 10);//lowered alpha channel so theres a trail 

  line(x1, y1, x2, y2);

  x1 += x1speed;
  y1 += y1speed;
  x2 += x2speed;
  y2 += y2speed;
//boundaries to keep it bouncy 
  if (x1 < 0 || x1 > width) x1speed *= -1;
  if (y1 < 0 || y1 > height) y1speed *= -1;
  if (x2 < 0 || x2 > width) x2speed *= -1;
  if (y2 < 0 || y2 > height) y2speed *= -1;
}

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

I think this creates a line that bounces around the screen. My clue is the flipping of the signs of the variables.

Example 2, changed

/*
Based on Alexander Miller’s video on Recreating Vintage Computer Art with Processing and inspired by John Whitney's work:
<https://www.youtube.com/watch?v=LaarVR1AOvs&t=181s>
*/

let t = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeWeight(2);
  stroke(255);
}

function draw() {
  background(0, 20);
  
  translate(width / 2, height / 2);//centers the animation 

  let amplitude = width / 3;//wave intensity 

  let x1 = sin(t / 10) * amplitude;//one of the loops 
  let y1 = cos(t / 10) * amplitude;//the other loop

  let x2 = sin(t / 20) * amplitude * 2;
  let y2 = cos(t / 10) * amplitude * 2;

  line(x1, y1, x2, y2);
  t += 0.5;//animates it 
}

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

This is also a single line drawing a shape over a low opacity, I do not understand enough about sin and cos to be able to precisely predict what will happen, but it will make a curvy, 3D illusion-y shape.

Example 3, changed

/*
Based on Alexander Miller’s video on Recreating Vintage Computer Art with Processing and inspired by John Whitney's work:
<https://www.youtube.com/watch?v=LaarVR1AOvs&t=181s>
*/

let t = 0;
let numLines = 40;//40 lines drawn later 

function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeWeight(2);
  stroke(255);
}

function draw() {
  background(0);
  translate(width / 2, height / 2);//centers animation 

  let amplitude = width / 3;//wave size

  for (let i = 0; i < numLines; i++) {//loop creating the lines with all the 
    let x1 = sin((t + i) / 10) * amplitude;
    let y1 = cos((-t + i) / 10) * amplitude + sin(((t + 1) / 5) * 50);

    let x2 = sin((t + i) / 20) * (amplitude * 2) + cos(t + 1) * 10;
    let y2 = cos((-t + i) / 10) * (amplitude * 2);

    line(x1, y1, x2, y2);
  }

  t += 0.2;
}

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

Similar vibe to example 2, except there appears to be some inverse(?) wave action happening with the y values . And around 40 lines on screen due to the loop.

Example 4, changed

/*
Inspired and based on @b2renger's Noise et coordonnees polaires:
<https://github.com/b2renger/p5js-designing-interactive-patterns?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=wapp#noise-et-coordonnees-polaires>

Coding Train video 3.4 Polar Coordinates (don't worry about vectors):
<https://thecodingtrain.com/tracks/the-nature-of-code-2/noc/3-angles/4-polar-coordinates>
*/

let tx = 0;
let ty = 1000;
let tz = 2000;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  stroke(255, 100);
  strokeWeight(0.2);
}

function draw() {
  let angle = noise(tx / 2) * TWO_PI * 4;//creating the noise field to create the really organic drawing pattern 
 //2pi is creating the circuluar roation, I think
  let minDimension = min(width, height)
  let radius = noise(tx, ty, tz) * minDimension/2;//also contributing to the noise field 
  
  let x = cos(angle) * radius + minDimension/2;
  let y = sin(angle) * radius + minDimension/4;
  
  line(x, y, width/2, height/2);
  
  tx += 0.005;
  ty += 0.005;
  tz += 0.005;
}

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

I am finding this one very hard to analyze before I watch due to all of the equations I do not understand. I think there’s going to be some sort of rotating component due to the angle variable.

Example 5, changed

/*
Based on the lissajous curve example from Code as a Creative Medium
<https://github.com/CodeAsCreativeMedium/exercises/blob/main/09_curves/06_lissajous/lissajous_js/lissajous_js.js>

Lissajous curve:
<https://en.wikipedia.org/wiki/Lissajous_curve>
*/

let t = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(255);
  strokeWeight(8);
}

function draw() {
  background(0, 5);

  let minDimension = min(width, height);
  let radius = (minDimension * 3) / 8;//sizing the curve for the canvas 
//path that the dot follows 
  x = cos((3 * t) / 10) * radius + width / 2;
  y = sin((2 * t) / 10) * radius + height / 2;

  point(x, y);

  t += 0.1;
}

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

This will create some type of curve from points plotted tightly together. The sin and cos are present meaning there will be some opposing rotations.

Re/Code