/*
Based on Matt Pearson's "Listing i.1 A generative system in 24 lines of code" in the Introduction to Generative Art, 2011, p. xxiii
License:
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher, with the exception of the Introduction, Chapter 1, Chapter 6, and the source code throughout, which are available under a Creative Commons (Attribution-NonCommercial 3.0) license.
See creativecommons.org/licenses/by-nc/3.0/. Note that Creative Commons distribution of the images in the Introduction and in Chapter 1 is limited to those by Matt Pearson only.
*/



//white background canvas, nofill->maybe only stroke 
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  noFill();

  //x, xstart(start and end maybe have a loop)
  //y, ty(change amount?)

  let xstart = random(10);
  let ty = random(10);
  
  //move to the center of canvas?
  translate(width / 2, height / 2);

  //1 for loop, from -height to height(/8)
  //because the translate, so draw from - to +;

  //~~~~~ y loop ~~~~~
  for (let y = -height / 8; y <= height / 8; y += 3) {
    ty += 0.02;
    
    //tx appear!
    //assign a start point to tx, then it will increase in the for loop();
    let tx = xstart;
    //~~~~~ x loop ~~~~~
    for (let x = -width / 8; x <= width / 8; x += 3) {
      tx += 0.02;
      //noise return a numbe between 0 & 1
      let noiseFactor = noise(tx, ty);
      //call the function 
      drawCircle(x, y, noiseFactor);
    
    }
  }
}
//do all the things in setup~
function draw() {}
  
//three parameter get into the function
function drawCircle(newX, newY, newNoise) {

  push();
  
  //use the loop in the setup for x&y to call this function several times

  //curious about without newNoise
  translate(newX , newY );

  //newNoise is from the noiseFactor in setup
  // and it came from the noise(tx,ty)
  //tx & ty increase a liitle in the fot loop 
  translate(newX * newNoise, newY * newNoise );

  //times 4 -> adjust the 0-1 return by noise
  translate(newX * newNoise * 4, newY * newNoise * 4);

  circle(0, 0, newNoise * 20);
  
  pop();
}