[Processing × Java] How to use loop 2 --- Nested structure, coordinate conversion

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

スクリーンショット 2020-07-03 16.03.55.png

table of contents 0.for loop

0.for loop

0-0. ** for loop and coordinate transformation **

In Processing, you can customize "** reference point when drawing a figure " and " coordinates themselves **" to your convenience. At that time, the for loop is often used together. Below, I will write about coordinate transformation using a for loop.

◯ Program to move the reference point of "figure"


//Make it possible to draw a figure based on the center of the rectangle.

//Repeat 5 times(i = 0,1,2,3,4)
for(int i = 0;i < 5;i++){
  //Define an int type variable s that represents the size of the sides of the quadrangle.
  int s = 400 -i * 80;
  //Determine the thickness of the border
  //The center is(width/2,height/2)Then draw a rectangle with s sides.


Point : rectMode(CENTER) You can use it to draw shapes relative to the center of the rectangle **. (The default reference point is the upper left corner of the rectangle)

◯ A program that shifts the reference point of "coordinates"

The following program uses translate () to shift the center of the coordinates to (width / 2, height / 2). In other words, the coordinates of the center of the screen (Processing window) are now (0,0).


//Coordinate reference point(origin)The center of the screen(width/2,height/2)Shift

//Repeat 3 times
for(int i = 0;i < 3;i++){
  //TWO_PI/6 =60 degrees, rotate every loop
  //The center of the screen(0,0)So...


Point : translate(); A function for shifting the reference point of coordinates. This time, the reference point was moved to the center of the screen.

Point : rotate(); Rotate around the reference point of the coordinates. This time, the reference point is in the center of the screen, so I rotated around it. Arguments are specified using ** PI ** and ** TWO_PI **.

Point : TWO_PI 2π = 360 degrees The angle is expressed by the length of the arc in a form called radian. The circumference of the unit circle with radius 1 is 2 * π = 2π. The arc 2π of the unit circle is the angle of one circle = 360 degrees.

0-1. ** for loop and nesting structure **

◯ Double nesting program



//Repeat horizontal movement 5 times(i = 10,110,210,310,410)
for(int i = 10;i < width;i += 100){
  //Repeat vertical movement 5 times(j = 10,110,210,310,410)
  for(int j = 10;j < height;j += 100){
    fill(12,232,178,255-i * 0.5);


** Point **: Program execution order

In the case of this program, it will be executed in order from the leftmost column (from the top).

In other words ** When i = 10 ** ・ J = 10: Execute ・ J = 110: Execute ・ J = 210: Execute ・ J = 310: Execute ・ J = 410: Execute ** When i = 110 ** ・ J = 10: Execute ・ J = 110: Execute ・ J = 210: Execute ・ J = 310: Execute ・ J = 410: Execute ** When i = 210 **     :

◯ Double nesting program (animation)


//I want to change the color, so prepare the variable c
int c = 0;

void setup(){

//The variable c is gradually shifted.
void draw(){
  //Repeat horizontal movement 500 times(i = 0,1,2...508,509)
  for(int i = 0;i < width;i ++){
    //Repeat vertical movement 500 times(j = 0,1,2...508,509)
    for(int j = 0;j < height;j ++){
      //Draw a 1-pixel dot
  //Gradually change the color
  c += 10;
  //Export colors
  //If the value of variable c exceeds 255
  if(c > 255){
    //Set c to 0
    c = 0;
//Runs only once when the mouse is pressed
void mousePressed(){
  //Save the window when the mouse is pressed in png format
  save("draw"+ c +".png ");
  //Output that the image has been saved
  println("picture is saved.");


スクリーンショット 2020-07-03 21.45.21.png

Point :save() Images can be saved. Write the name and save format in "", such as save ("~ .png ") ;. You can check the saved image by selecting [Open Sketch Folder] from [Sketch] on the menu bar.

◯ Mie nesting program


//Be able to draw based on the center of the rectangle

//Repeat 5 times(i = 55,155,255,355,455)
for(int i = 55;i < width;i += 100){
  //Repeat 5 times(j = 55,155,255,355,455)
  for(int j = 55;j < height;j += 100){
    //Repeat 4 times(s = 10,30,50,70)This completes one square section.
    for(int s = 10;s < 90;s += 20){
      //Coordinate(i,j)Then draw a square with a side size of s


Point : ** Matryoshka-like ** chunks of 4 squares of different sizes **

for(int s = 10;s < 90;s += 20){

Part of.

Arrange these chunks (same as in the double loop).


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

Recommended Posts

[Processing × Java] How to use loop 2 --- Nested structure, coordinate conversion
[Processing × Java] How to use the loop
[Processing × Java] How to use variables
[Processing × Java] How to use arrays
[Processing × Java] How to use the class
[Processing × Java] How to use the function
[Java] How to use Map
[Java] How to use Map
How to use java Optional
How to use java class
[Java] How to use Optional ②
[Java] How to use removeAll ()
[Java] How to use string.format
How to use Java Map
How to use Java variables
[Java] How to use Optional ①
How to use Java HttpClient (Get)
[Java] How to use join method
[Java] How to use LinkedHashMap class
[JavaFX] [Java8] How to use GridPane
How to use class methods [Java]
[Java] How to use List [ArrayList]
How to use classes in Java?
How to use Java lambda expressions
[Java] How to use Math class
How to use Java enum type
Multilingual Locale in Java How to use Locale
[Java] How to use the File class
[Java] How to use the hasNext function
How to use submit method (Java Silver)
[Java] How to use the HashMap class
How to do base conversion in Java
[Easy-to-understand explanation! ] How to use Java instance
[Java] How to use the toString () method
Studying how to use the constructor (java)
How to use Java classes, definitions, import
[Easy-to-understand explanation! ] How to use Java polymorphism
[Java] [Maven3] Summary of how to use Maven3
How to use Java Scanner class (Note)
[Easy-to-understand explanation! ] How to use ArrayList [Java]
[Java] How to use the Calendar class
[Java] Learn how to use Optional correctly
[Easy-to-understand explanation! ] How to use Java overload
try-catch-finally exception handling How to use java
[Easy-to-understand explanation! ] How to use Java encapsulation
[Java] Note how to use RecyclerView and implementation of animated swipe processing.
[Java] How to use FileReader class and BufferedReader class
How to use Java API with lambda expression
[Easy-to-understand explanation! ] How to use Java inheritance [Override explanation]
How to use the replace () method (Java Silver)
How to use scope and pass processing (Jakarta)
How to use Alibaba Cloud LOG Java Producer
[Java] How to use Calendar class and Date class
How to use Map
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use fields_for
How to use java.util.logging
How to use map
How to use collection_select