p5js loops

circling_spheres.pde

float x, y, z;

void setup() {
    size(800, 800, P3D);

    // setup translate amounts to center screen
    x = width / 2;
    y = height / 2;

    // gonna have the z-axis 'pulsate' as per the last line (sin)
    z = 0;
}

void draw() {
    background(0);
    // FYI ">>" in java is a shift operator. in this case it means divide by 2.
    //translate(width>>1, height>>1);
    translate(x, y, z);
    //rotateX(frameCount * 0.01);

    rectMode(CENTER);

    // set red and green to 90
    ambientLight(90, 90, 0);
    // 6 faced sphere
    sphereDetail(6);

    // nested loop which i only half pretend to understand
    for (int j = 0; j < 5; j++) {
        push();
        ambientLight(0, 0, 128);
        for (int i = 0; i < 50; i++) {
            translate(
                sin(frameCount * 0.01 + j) * 10,
                sin(frameCount * 0.01 + j) * 100,
                i * .1);

            rotateZ(frameCount * 0.001);
            push();
            sphere(10);
            pop();
            //println(sin(frameCount * 0.001 + j) * 100);

        }
        pop();
    }
    z += ((sin(frameCount * .009) * 2));
    //println(sin(frameCount * .01) * 10);
}

p5js_loops.js

// p5js loops

function setup() {
  createCanvas(600, 800);
  noFill();
  //noLoop();
}

function rand(factor) {
  //min = Math.ceil(-1 * factor);
  //max = Math.floor(factor);
  return Math.floor(Math.random() * (factor - (-1 * factor) + 1)) + (-1 * factor);
}

function squigs(loops, rnd, scal, wxdth) {
  loops = typeof loops !== 'undefined' ? loops : 10;
  scal = typeof scal !== 'undefined' ? scal : 1;
  wxdth = typeof wxdth !== 'undefined' ? wxdth : 40;
  beginShape();
  curveVertex(Math.floor(wxdth / 8) * scal + rand(rnd),
    Math.floor(wxdth * 2.5) * scal + rand(rnd));
  for (i = 0; i < loops; i++) {
    curveVertex(Math.floor(wxdth / 8) * scal + i * wxdth + rand(rnd),
      Math.floor(wxdth * 2.5) * scal + rand(rnd));
    curveVertex(wxdth * scal + i * wxdth + rand(rnd),
      Math.floor(wxdth / 2) * scal + rand(rnd));
    //curveVertex(Math.floor(wxdth/2)*scal + i*wxdth, Math.floor(wxdth/4)*scal);
    curveVertex(Math.floor(wxdth / 5) * scal + i * wxdth + rand(rnd),
      Math.floor(wxdth / 2) * scal + rand(rnd));
    curveVertex(Math.floor(wxdth * .75) * scal + i * wxdth + rand(rnd),
      Math.floor(wxdth * 2.5) * scal + rand(rnd));
  }
  curveVertex(wxdth * scal + i * wxdth + rand(rnd),
    Math.floor(wxdth * 2.25) * scal + rand(rnd));
  endShape();
}

function draw() {
  background(255);
  //let t = map(mouseX, 0, width, -5, 5);
  //curveTightness(t);
  push();
  squigs(loops = 9, rnd = 8, scal = .85, wxdth = 55);
  translate(0, 100);
  squigs(loops = 9, rnd = 9, scal = .80, wxdth = 35);
  translate(0, 65);
  squigs(loops = 9, rnd = 9, scal = .80, wxdth = 35);
  translate(0, 65);
  squigs(loops = 8, rnd = 9, scal = .80, wxdth = 35);
  translate(0, 65);
  squigs(loops = 9, rnd = 9, scal = .80, wxdth = 35);
  translate(0, 65);
  squigs(loops = 11, rnd = 9, scal = .80, wxdth = 35);
  translate(0, 70);
  squigs(loops = 12, rnd = 9, scal = .80, wxdth = 35);
  translate(0, 70);
  squigs(loops = 14, rnd = 9, scal = .80, wxdth = 35);
  pop();

  let x2 = map(mouseX, 0, width, 50, 350, true);

  let c = color(250, 250, 250); // Define color 'c'
  fill(c); // Use color variable 'c' as fill color
  //noStroke(); // Don't draw a stroke around shapes
  translate(450, 250);
  circle(0, 0, x2);
}

rotating_rectangle_draw.pde

float fc;
int size, rotaterun;

void setup() {
    size(600, 600);
    frameRate(10);
    
    // Determines when the screen will rotate.
    // Will occur after the drawing of Y axis is complete 
    rotaterun = 0;

}

void draw() {
    background(0);
    rectMode(CENTER);
    
    // can mess with the colors later
    fill(204, 102, 0);
    
    // set the number of dots along square edge
    size = 9;
    
    // determine how far apart each dot will go
    float gap = width / (size + 1);
    
    // set the point at which the frame needs to rotate
    // (after a full draw of each square)
    float fc = frameCount % size;
    
    // center the rotating point
    translate(width/2, height/2);
    
    // tell the sketch to rotate every fc draws
    if (fc == 0.0) {
        rotaterun += 1;
    };

    // rotate each draw according to the # defined previously
    rotate(radians(rotaterun * 90));
    
    // lay down the left to right rows
    for (float j = 0; j < size; j++) {
        // be able to reset the x for each run
        pushMatrix();
        
        // VERY IMPORTANT: since we're in the center,
        // need to universally translate back to 0,0
        // from the center
        translate(-width/2,-height/2);
        
        // append the iterator by 1 and multiply by
        // the calculated gap. If we don't append 1, it'll
        // start from 0, ie the edge of the frame
        translate(((j+1) * gap), 0);
        
        // process the y axis drawing
        // in order to animate, we need to iterate
        // through drawing out the square
        // ex. if the length is 3, draw [0], [0,1], [0,1,2]
        for (int i = 0; i < fc+1; i++) {
            // be able to reset the y for each run
            pushMatrix();
                translate(0, ((i+1) * gap));
                rect(0, 0, 30, 30, 4);
            popMatrix();
        }
        // revert the x-axis offset
        popMatrix();
    };
};