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

【 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 :

moving_Circle.zip

0.00MB

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

https://youtu.be/xZo5iQvQXOI