[Processing × Java] How to use the loop

This article is for understanding the structure of the program through Processing. This time I will write about loops.

table of contents 0. What to use the loop for

1. About for loop
2. Example of a program using a loop

0. What to use the loop for

** Used to organize repetitive processes **. The program below is a program for efficiently finding the sum of numbers from ** 1 to 10 **.

loop00.java

//The variable sum is the sum you want to find
int sum = 0;

//Add i by 1 from 1 to 10.
for(int i = 1;i < 11;i++){
  //Sum(new) = Sum(Old) + i
  sum = sum + i;
}

//Display the sum on the console.
println(sum);

55

Point　: In order to use loops, you have to find ** common parts ** (property / law) among similar repetitive actions! In other words, you need to determine ** which part to repeat **.

1. About for loop

for loop

A for loop is one of the ways to create a loop. It's the same as a while loop, but it's more compact and easier to understand, so I'll introduce it here.

◯ A program that draws lines repeatedly

loop01.java

//Determine the size of the screen.
size(500,250);
//Place the lines every 20 px.
for(int i = 0;i < width;i += 20){
  line(i,0,i,height);
}

** Point **: A program that draws a straight line drawn from (i, 0) to (i, height) every 20px within the range of i <width.

○ ** For loop execution order ** (For example, in this program ...)

What is the value of i? : 0! ↓ Does the value of i (= 0) satisfy i <width? : True! ↓ Execution of processing ↓ i + = 20! ↓ What is the value of i? : 20! : : What is the value of i? : 500! ↓ Does the value of i (= 500) satisfy i <width? : False! (End of loop)

** Point **: i + = 20 is an abbreviation for i = i + 20.

○ Image of for loop

** Point **: ** It may be close to that feeling of choosing sweets for an excursion so that it fits in 300 yen ...

2. Example of a program using for loop

◯ A program that shifts the line little by little

variable02.java

//Determine the size of the screen
size(500,500);
//Determine the background color
background(0);

//i <While satisfying the width, increase i by 10.
for(int i = 0;i < width;i += 10){
  //Determine the color of the line
  stroke(53,183,193);
  //(0,i)From(i,height)Draw a line
  line(0,i,i,height);
}

** Point **: Processing coordinates The feature is that the value of y increases toward the bottom of the screen.

◯ A program that draws lines at random

variable03.java

//Determine the size of the screen
size(500,500);
//Determine the background color
background(0);

//i <While satisfying the width, increase i by 1.(Repeat 500 times)
for(int i = 0;i < width;i += 1){
  //Determine the color of the line
  stroke(#640915);
  //Draw a line from a random point to a random point
  line(random(500),random(500),random(500),random(500));
}

Point　:　random(min,max); Returns (outputs) a random value in the range min to max. min can be omitted.

** Point **: Repeat the loop 500 times until i becomes 0,1,2, .... 498,499.

** Point **: There are other ways to select colors other than (R, G, B). [Tools]-> [Select Color]-> Select your favorite color from the menu bar

◯ Loop and animation

It is effective to use draw () to create an animation.

variable03.java

//Define your own variable s that represents the size of the circle
float s = 0;

//Repeat only once
void setup(){
  size(600,600);
  //The default is 60 frames per second
  frameRate(10);
  background(0);
}

//infinite loop
void draw(){
  //Increase the size by 1
  s += 1;
  //Color specification
  fill(random(255),0,255,50);
  noStroke();
  //Place circles in random places
  ellipse(random(width),random(height),s,s);
  
  //If the size is larger than 45, it will be executed
  if (s > 45) {
    //Return size to 0
    s = 0;
  }
  
}

Finally

Thank you for reading. We appreciate your opinions and suggestions in order to make the article even better.