여러분이 스스로에게 “이것은 정말 멋지고 굉장하긴 한데 내가 정말 원하는 것은 스크린에 파동을 그리는 것이다.”라고 한다면 때가 됐습니다. 지금은 목적지의 90%까지 왔습니다. 사인 함수에 따라 하나의 원을 위 아래로 진동시킬 때 할 일은 파동 패턴의 x-축을 따라서 하나의 점을 찾는 것입니다. 약간의 자신감과 for 문을 이용해 진동하는 원을 옆에 나란히 둘 수 있습니다.
이러한 파동 패턴은 생물의 몸이나 부속물의 설계뿐만 아니라 (물과 같은) 부드러운 표현을 시뮬레이션 하는 데에 이용될 수 있습니다.
이 경우 진폭(패턴의 높이)과 주기에 관한 동일한 질문이 생깁니다. 그러나 주기가 시간이었던 것 대신 전체 파동을 보고 싶으므로 전체 파동 사이클의 너비(픽셀)로서의 주기에 관해 얘기해 볼 수 있습니다. 그리고 단진동에서와 같이 정확한 주기에 따르거나 단순히 각 속도의 모델에 따라 파동 패턴을 계산할 수 있습니다.
보다 단순한 각속도를 이용해 보겠습니다. 각과 각속도 및 진폭을 이용해 시작하면 됩니다:
var angle = 0;
var angleVel = 0.2;
var amplitude = 100;
이후 파동의 지점을 그리고자 하는 모든 x 값에 대해 반복문을 적용합니다. 지금은 24 픽셀마다 적용하겠습니다. 해당 반복문에서 세 가지를 수행합니다:
  1. 진폭과 각의 사인 값에 따라 y 위치를 계산합니다.
  2. (x,y) 위치에 원을 그립니다.
  3. 각 속도에 따라 각을 증가시킵니다.
for (var x = 0; x <= width; x += 24) {
    // 진폭과 각의 사인 값에 따라 y 위치를 계산합니다.
    var y = amplitude * sin(angle);
    // x, y 위치에 원을 그립니다.
    ellipse(x, y+height/2, 48, 48);
    // 각속도에 따라 각을 증가시킵니다.
    angle += angleVel;
}
angleVel에 대해 값이 다른 네 가지 경우를 살펴보겠습니다.
파동의 주기를 정확하게 계산하지 않았지만 각속도가 높을수록 주기는 짧아진다는 것을 주의하기 바랍니다. 또한 주기가 짧아지면 점 사이의 거리가 늘어나면서 파동 자체를 이해하기가 더 많이 어려워진다는 것에 주의해야 합니다. 한 가지 방법으로 점들을 선으로 연결하기 위해 beginShape()endShape()를 사용하는 것이 있습니다.
위 예제는 정적입니다. 파동은 절대로 변하지도 새롭게 되지도 않아서 구축했던 모양 그대로입니다. 파동을 움직이게 하는 추가적인 단계는 좀 까다롭습니다. 각을 전역 변수로 하고 draw()를 통해 한 사이클에서 다른 사이클로 증가시키면 된다고 생각할 수 있습니다.
이것은 좋은 생각이긴 하지만 작동하지 않습니다. 정적으로 그래진 파동을 보면 오른쪽의 가장자리가 왼쪽과 일치하지 않습니다. draw()의 한 사이클에서 끝나는 부분이 다음 사이클이 시작되는 부분이 될 수 없습니다. 대신에 파동이 시작해야 하는 각의 값을 기록하는 변수가 필요합니다. 이 각(startAngle이라 합니다.)은 자신만의 각속도로 증가됩니다.
다음은 시작 각이 포함된 것입니다. 서로 다른 값으로 변경해서 진동하는 파동이 어떻게 되는지 확인해 보세요.

본 "내추럴 시뮬레이션" 과정은 다니엘 쉬프만(Daniel Shiffman)이 저술한 "The Nature of Code"의 내용을 차용한 것이며, 본 내용물의 저작권은 Creative Commons Attribution-NonCommercial 3.0 Unported License를 적용합니다.
로딩 중