TheWhileLoopDemo (2025)

// make source code public

// schien@mail.ncku.edu.tw, Spring 2025

//

​

// an example program adapted from Pearson (2011), p. 35-36

// explaining the while loop

// schien@mail.ncku.edu.tw, DPD 2020

// update to use circle function (P5js v1.6.0)

// schien@mail.ncku.edu.tw, DPD 2023

​

// draw a gradually enlarging circle

// when it reaches a set limit then stop

​

// global variables

let diam = 10;

let centX, centY;

let img;

​

function preload() {

  img = loadImage('kandinsky_composition_ii_1923.jpg');

}

​

function setup() {

  createCanvas(500, 300);

  frameRate(12);

  background(img);

  // assign values to variables

  centX = width/2.0;

  centY = height/2.0;

  // preset line color

  stroke(0);

}

​

// frame loop

function draw() {

  if (diam <= 400) {  // the limit

    background(img);

    // draw the main circle

    strokeWeight(5);

    fill(255, 50);

    circle(centX, centY, diam);

    // draw effects

    strokeWeight(0.3);

    noFill();

    let tempdiam = diam;

    while(tempdiam > 10) {  // loop within a loop

      circle(centX, centY, tempdiam);

      tempdiam -= 10;

    }

    diam += 10; // enlarge the diameter

  }

}