Processing에서 '펄스'효과를 만드는 방법은 무엇입니까?

Question

화면에 그려진 그래프에 하나씩 나타나는 점을 시각화하려고합니다.

이상적으로, 작은 타원이 먼저 그려지고, 거기에서 "링"이 타원의 중심에서 바깥쪽으로 움직이고 움직이는 동안 사라집니다. 초기 타원은 원래 플롯 된 위치에 남아 있습니다.

단순한 페이드 타원을 코딩 할 수 있지만 움직이는 링에 애니메이션을 적용하는 방법을 알 수 없습니다. 누구든지이 작업을 시작하는 방법에 대한 아이디어를 공유해 주실 수 있습니까?

Answer 1

기본적으로 애니메이션의 상태을 변수 집합에 저장해야합니다. 이러한 변수를 사용하여 각 프레임을 그려 그 변수를 시간의 경과에 따라 변경하여 그려지는 것을 변경하십시오.

그래서 첫 번째 단계는 저장해야하는 상태를 파악하는 것입니다. 그러면 추적해야 할 변수를 알 수 있습니다. 아주 간단한 예를 들어, 당신은 직경과 불투명도를 저장할 수 있습니다 :

float diameter = 10; 
float opacity = 255; 

2 단계는 각각의 프레임을 그리는 그 변수를 사용하는 것입니다. 한 번에 약 프레임을 걱정하고,이 경우 우리는 단지 이전 프레임을 취소 할 수 후 원 그리기 :

background(0); 
noFill(); 
stroke(255, 255, 255, opacity); 
ellipse(width/2, height/2, diameter, diameter); 

마지막으로, 마지막 단계는 시간이 지남에 따라 그 변수를 변경하는 것입니다. 우리는 그 값을 수정하여 원이 더 크게 만들기 위해 그렇게 할 수 있으며, 색상이 덜 불투명이 될 :

diameter++; 
opacity--; 

이 모두 함께 퍼팅, 그것은 다음과 같습니다

float diameter = 10; 
float opacity = 255; 

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

void draw(){ 
diameter++; 
opacity--; 

background(0); 
noFill(); 
stroke(255, 255, 255, opacity); 
ellipse(width/2, height/2, diameter, diameter); 
} 

있습니다 이것은 단지의 예일뿐입니다. 여러분은 여러분이 가고있는 효과를 얻기 위해 자신의 상태와 자신의 변수와 함께이 단계들을 적용해야 할 것입니다.

스택 오버플로는 일반적으로 "어떻게해야합니까?"형식 질문을 위해 설계되지 않았습니다. 더 구체적인 질문을 해보십시오. "X를 시도했는데 Y가 예상되었지만 Z가 대신 입력되었습니다."질문을 입력하십시오. 다른 말로하면 무언가를 시도하고 붙어 있다면 MCVE이라고 게시하십시오. 행운을 빕니다.