#3. Processing - Interact/Animate

 

Input is used to animate shapes. Unlike the earlier examples that execute once and then stop, the code in this section runs continuously. The setup() and draw() functions are introduced to enable continuous execution. The location of the cursor on screen controlled by a mouse or finger is used to set the position of ellipses and rectangles. The x-coordinate of the cursor is captured as the mouseX variable in the program and the y-coordinate of the cursor is the mouseY variable. These positional values are used to define the location of shapes on screen. As the cursor moves, the shapes respond.

 

 

 

 

-Learn the Processing #Interact

 

https://hello.processing.org/editor/

Processing Hour of Code | Editor

 

 

 

Code>>

void setup(){
size(600,400);
background(192,232,230);
}

void draw(){
stroke(92,5,110);
fill(215,168,210);
rect(100,100,400,200);
stroke(230,228,137);
fill(134,85,242);
rect(mouseX,mouseY,50,50);
}

 

 

 

 

Run Code>>

 

 

 

 

Meaning>>

 

Parentheses : (  ) 

curly bracket : {  }/ start curly bracket/ close curly bracket

 

setup()

초기설정 Once at the Start
The code inside the setup() block runs once when the program starts.

예) 초기캔버스사이즈설정, 초기설정이름, 초기설정 스코어, 초기설정 게임환경 지점..

 

draw()

계속실행해라  'Loop' 
The code inside the draw() block runs continuously while the program is running.

예) 움직이기, 바뀌게하기, 치게하기...계속 지속적인 작동

 

void

이전 설정실행하고 있는 값으로  실행하려고  더 이상 돌아가지 말라는 의미, 이전값의 무효화 
This keyword is required to be written in front of setup() and draw(). It means that the setup() and draw() functions do not "return a value."

 

mouseX
This variable stores the x-coordinate of the cursor.

X location of the mouse

mouseY
This variable stores the y-coordinate of the cursor.

Y location of the mouse

마우스를 따라 그림이 그려지게하는  애니메이트 매직 코드--->도형타입(mouseX, mouseY,     ,     )

마우스의 X, Y, 가 교차  반응하는  코드  --------------------------->도형타입(mouseY, mouseX     ,     )

도형의 +50 X좌표에서 마우스가  떨어져  그림이 그려지게--->도형타입(mouseX+50, mouseY,     ,     )

도형의  -50 X좌표에서 마우스가  떨어져  그림이 그려지게--->도형타입(mouseX-50, mouseY,     ,     )

도형의  -50 Y좌표에서 마우스가  떨어져  그림이 그려지게--->도형타입(mouseX, mouseY-50,     ,     )

도형이   캔버스의 X  1/3지점에서만   마우스가  반응하여 움직여 그림이 그려지게--->도형타입(mouseX/3, mouseY,     ,     )

 

mousePressed
This variable is true if a mouse button is pressed and it is false if a button is not pressed.

if
The if structure allows a program to make a decision to run the code inside the block. When the relational expression associated with the if is true, the code inside the { and } will run.

 

 

==BASIC CONVENTION FORM     들여쓰기==

void setup() {
  size(500,400);
}

void draw() {

  background(0);//백그라운 컬러가 계속 검정으로  칠하여짐

 

stroke(255, 255, 255);
  fill(160, 220, 90);
  ellipse(250, 200, 300, 300);

  fill(160, 210, 230);
  rect(250, 200, 100, 75);
}

 

 

 

Given CODE>>

void setup() {
  size(500, 400);
  background(10, 80, 100);
}

void draw() {
  stroke(255, 255, 255);
  fill(160, 220, 90);
  ellipse(mouseX, 200, 300, 300);// 그린 큰원이 마우스 X축으로만 반응

  fill(160, 210, 230);
  rect(245, mouseY, 10, 240);//중앙에  만들어지는 가는 직사각형이 마우스 Y축으로만 반응

  fill(255, 255, 255); 
  ellipse(mouseX, mouseY, 70, 70);//그린원안의 작은 하얀 원이 마우스 X,Y에 반응하며, 원밖의 캔버스에 채색
}

 

 

 

Run Code>>

 

 

Variation Code>>

void setup() {
  size(600, 400);
  background(10, 80, 100);
}

void draw() {
  stroke(255, 255, 255);
  fill(160, 220, 90);
  ellipse(mouseX, mouseY/2, 170, 170);

  fill(160, 210, 230);
  rect(245, mouseY, 10, 240);
  rect(50, mouseY, 10,300);
  rect(90, mouseY, 10,100);
  rect(450, mouseY, 10,150);

 

 

Run Code>>