حلقه Loop

function setup() {
     createCanvas(windowWidth, windowHeight);
}
function draw() {
     background(200)
     fill(220, 30, 90)
     noStroke()

     // a for loop
     for(let i = 0; i<10; i++) {
          ellipse(i*50, 0, 50, 50)
     }

}

function setup() {
     createCanvas(windowWidth, windowHeight);

     // a for loop
     const planets = ['mercury', 'venus', 'earth']
     for(planet of planets) {
          console.log(planet)
     }

}
function draw() {
  
}

function setup() {
     createCanvas(windowWidth, windowHeight);

     // a while loop
     let myValue = 0
     while(myValue < 100) {
          myValue += 10
          console.log('The value of myValue is ' + myValue)
     }

}
function draw() {
  
}

const rectWidth = 100

function setup() {
     createCanvas(windowWidth, windowHeight)
     rectMode(CENTER)
     background(200)
     fill(235)
     noLoop()
}
function draw() {
  
     // square
     rect(windowWidth/2, windowHeight/2, rectWidth)

     // hatch
     translate(windowWidth/2 - rectWidth/2, windowHeight/2 - rectWidth/2)
     for(let i = 0; i < rectWidth; i += 10) {
          line(i, 0, 0, i)
     }
     for(let i = 0; i < rectWidth; i += 10) {
          line(rectWidth, i, i, rectWidth)
     }

}

function setup() {
     createCanvas(windowWidth, windowHeight)
}
function draw() {
     background(255)
     strokeWeight(10)

     // move canvas origin to center
     translate(width / 2, height / 2)

     // number of lines
     const circleResolution = int(map(mouseY, 0, height, 1, 15))

     // line length
     const radius = mouseX - width

     // spread lines in a circular shape 
     const angle = TWO_PI / circleResolution

     // loop
     for (let i=0; i<=circleResolution; i++) {
          const x = cos(angle * i) * (radius/5);
          const y = sin(angle * i) * (radius/5);
          line(0, 0, x, y);
     }
  
}

function setup() {
     createCanvas(windowWidth, windowHeight)
     noFill()
     background(255)
     strokeWeight(3)
     stroke(0, 25)
  }
  
function draw() {
     if (mouseIsPressed && mouseButton == LEFT) {
          push()
          translate(windowWidth / 2, windowHeight / 2)
          const circleResolution = int(map(mouseY + 100, 0, windowHeight, 3, 10))
          const radius = mouseX - width / 2
          const angle = TWO_PI / circleResolution

          // shape
          beginShape()
          for (let i = 0; i <= circleResolution; i++) {
               const x = cos(angle * i) * radius
               const y = sin(angle * i) * radius
               vertex(x, y)
          }
          endShape()

          pop()
     }
}

const tileCount = 15
const circleAlpha = 130

function setup() {
     createCanvas(windowWidth, windowHeight);
}
function draw() {
     background(255)
     randomSeed(0)
     strokeWeight(5)
     translate(windowWidth / tileCount / 2, windowHeight / tileCount / 2)
  
     for (let gridY = 0; gridY < tileCount; gridY++) {
          for (let gridX = 0; gridX < tileCount; gridX++) {

               const posX = windowWidth / tileCount * gridX
               const posY = windowHeight / tileCount * gridY
               ellipse(posX, posY, mouseY / tileCount)
    
          }
     }
}

const squareSize = 50

function setup() {
     createCanvas(windowWidth, windowHeight)
     noFill()
     noLoop()
     background(220)
}
function draw() {
     
}

const squareSize = 50

function setup() {
     createCanvas(windowWidth, windowHeight)
     noFill()
     noLoop()
     strokeWeight(3)
     background(220)
}
function draw() {
     for(let x = squareSize*2; x <= width - squareSize*2; x += squareSize) {
          for(let y = squareSize*2; y <= height - squareSize*2; y += squareSize) {
               push()
	             translate(x, y)
               rect(-squareSize/2, -squareSize/2, squareSize)
               pop()
          }
     }
  
}

const squareSize = 50

function setup() {
     createCanvas(windowWidth, windowHeight)
     noFill()
     noLoop()
     strokeWeight(3)
     background(220)
}
function draw() {
     for(let x = squareSize*2; x <= width - squareSize*2; x += squareSize) {
          for(let y = squareSize*2; y <= height - squareSize*2; y += squareSize) {

               // random rotation
               const rotation = y/height * QUARTER_PI/45 * random() * 25;

               // create each square
               push()
               translate(x, y);
               rotate(rotation);
               rect(-squareSize/2, -squareSize/2, squareSize)
               pop()
               
          }
     }
  
}