라즈이노 iOT

【 Processing Basic#3 】 Rain-Drop Effect (by 10 random circle)

 Last time I created a random one. We will try to generate 10 circles randomly using this principle. You will be able to realize the wonderful effect that raindrops seem to spread over a calm water surface.

[ Screen coordinates of Processing ]  - example of 100 x 100 pixel

▶ The Goal :  Create 10 circles randomly (size and position) on the screen and make them larger and larger.

   [ 조건 :  1. Screen size (horizontal x vertical pixels): 500 x 500) , 
              2. Background color and lines : background(200), stroke(0), strokeWeight(3), fill(255, 10)
              3. '10 circles' should be implemented simply using arrays and loops (for statements).
              4. Circle drawing uses 'ellipse (x, y, diam, diam)' functions  ]

▶ Quizz (execution result) 
Code to behave as follows.

▶ Program code : 
(Click image to enlarge)

int [] arrayOfDiam;         // An array declaration for the circle diameter (arrayOfDiam)
float [] arrayOfCentX, arrayOfCentY;   // Declare an array (X, Y) for the center coordinates of the circle
void setup() { 
  size(500, 500);     //   Output screen size
  background(200);   // Background value
  arrayOfDiam = new int[10];   //   Create array variables for 10 circles
  arrayOfCentX = new float[10];   // Create array variables for 10 circles
  arrayOfCentY = new float[10]; // Create array variables for 10 circles
  for (int i=0; i<10; i++) {                      // 10 circles, using for loop
    arrayOfDiam[i] = int(random(500));   // Assign initial value (random) to array vaddriable
    arrayOfCentX[i] = random(500); 
    arrayOfCentY[i] = random(500); 
  } 
  stroke(0);               //   Set Line color, thickness, fill settings
  strokeWeight(3);                    // 
  fill(255, 10);                            // 
} 
void draw() { 
  background(200);   // 
  for(int i=0; i<10; i++) {      //  Draw circles randomly using loop function
    ellipse(arrayOfCentX[i], arrayOfCentY[i], arrayOfDiam[i], arrayOfDiam[i]); 
    arrayOfDiam[i] +=2;   //  Diameter increase value of circle (pixel) 
    arrayOfDiam[i] %= width; 
 // If the diameter is equal to the screen width (width), enter the remaining value (0)
  } 
}

▶ Coding and annotation : 
( The code is zip compressed.)

▶ Video lecture :  
(Look in full screen view at 1080P) :

https://youtu.be/BGyQz1PySw4

【 Processing Basic#2 】 'The Circle grows' by Processing!

Let's implement a 10 pixel diameter circle. In fact, one circle does not grow, but it can be processed as visually that way.

▶ The Goal  : 
 Implement 10 pixels in the middle of the screen so that the circle grows to the screen size.

1. Screen size (width x height pixels): 500 x 500)

2. Background color and lines: background (180), stroke (0), strokeWeight (5), fill (255, 20)

3. Circle drawing uses ellipse (x, y, diam, diam) function

▶ Coding result :

▶ Coding and annotation : 

int diam = 10;           // Declaration of circle diameter variable (initial value 10 pixels)
float centerX, centerY;  // Declaring a circle's center point variable

void setup() { 
  size(500, 500); 
  centerX = width/2;     // Centering the center of the screen (width)
  centerY = height/2;    // Centering the center of the screen (height)
  stroke(0);           
  strokeWeight(5);       // Thickness of line
  fill(255, 20);   // The color of the border of the circle (255) and the transparency of the internal fill (Alpha: 20)
} 
void draw() { 
  background(180);     // To prevent afterimage
  ellipse(centerX, centerY, diam, diam); 
  diam += 10;          // Increase diameter by 10 pixels
  if (diam == width) diam = 0;   // Resets the maximum size of the circle so that it does not exceed the screen size
//  diam %= width;   // When the maximum size of the circle = screen size, the remaining value (%) becomes zero.
  delay(50);             // Time delay that the circle grows
}

▶ Code Download :

▶ Video lecture :  
(Look in full screen view at 1080P)

https://youtu.be/xZo5iQvQXOI