TheFrameLoopDemo (2025)

// make source code public

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

//

​

// example program from Pearson (2011), p. 28

// explaining the frame loop in processing

// schien@mail.ncku.edu.tw

​

// rewrite the original java version into P5js

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

// update with circle function (P5js v1.1.9)

// add preload

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

​

// variables    

let diam = 10;

let centX, centY;

let img;

​

// do this before setup

function preload() {

  img = loadImage('kandinsky_composition_ii_1923.jpg');

}

​

// init      

function setup() {  

  createCanvas(500, 300);

  frameRate(24);    

  centX = width/2;

  centY = height/2;

  stroke(0);

  strokeWeight(5); 

  fill(255, 50);

  imageMode(CENTER);

}

​

// frame loop  

function draw() {  

   if (diam <= 400) { 

    image(img, centX, centY);

    circle(centX, centY, diam);

    diam += 10;

  }

}

​

​

​

​