본문 바로가기

알고리즘21

반동 움직임(Bounce Animation) // p5.js var ballX=200, ballY=200, vX=0, vY=0; var speed = 0.1; var bounce = 0.88; function setup() { createCanvas(320, 320); background(255); } function draw() { vX=(vX + (mouseX-ballX)*speed)*bounce; vY=(vY + (mouseY-ballY)*speed)*bounce; ballX=ballX+vX; ballY=ballY+vY; ellipse(ballX,ballY,20,20); } 여기서 주목해야 할 것은 이것이다. v = (v + (targetValue - nowValue)*speed)*bounce; nowValue += v; 2020. 8. 13.
다이아몬드 블러링 updated 2020-08-04 // sketch of p5js var ms = 0; function setup() { createCanvas(400, 400); } function draw() { background(220); noStroke(); ms += 10; if (ms > 200) { ms = 200; } for (var h = -10; h < 10; h++) { for (var k = -10; k < 10; k++) { var mx = 50 - abs(k * h); var r = 200 + mx; var g = ms; var b = 200; var c = color(r, g, b); var x = (k + 10) * 20; var y = (h + 10) * 20; fill(c); rect(.. 2020. 8. 4.
Anti-aliased 선 긋기 (Xiaolin Wu's line algorithm) Bresenham 선 긋기 방법은 매우 빠르나 경계선이 드러나서 보기에 좋지 않다. Xiaolin Wu의 안티알리아스 선 긋기를 배워본다. 이 알고리즘은 한쌍의 픽셀을 연달아 찍어서 선을 그리는 것인데, 반복동작으로 선의 길이만큼 여러 쌍의 픽셀을 그리고 양 끝점을 따로 계산해서 픽셀을 찍는다. 위에서 보는 것처럼 선은 픽셀칸의 중심을 정확하게 지나가는 것이 아니기 때문에, 선분에 영향력을 미치는 2개의 픽셀칸의 밀도를 조절하여 블러가 된 선을 그릴 수 있다. 픽셀 칸의 밀도를 1로 보았을 때, 선분 위에 있는 칸은 1-a 의 농도를 갖고 선분 아래에 있는 칸은 1-b의 농도를 갖으면 된다. 우선 기울기가 1보다 작은 경우만 생각하자. 나머지의 경우는 대칭을 생각하면 쉽게 확장이 가능하다. 이 경우 x .. 2020. 7. 28.
2개의 실수에서 가장 가까운 정수 값 찾기 2개의 숫자에서 가장 가까운 정수를 찾는 간단한 방법. 의외로 쉽다. var integerX = int(x + 0.5); 2020. 7. 27.
2D 평면 물결 효과에 대한 이해 물결 효과에 대한 공부를 하면서 정리해본다. 세상에 얼마나 2D Water algorithm 이 존재하는지는 모른다. 구글에서 검색되는 Hugo Elias 의 사이트를 기준으로 이해했고 또 풀어보도록 해보겠다. 이 알고리즘은 2개의 배열이 필요한데, 하나는 현재의 물결 상태를, 다른 하나는 이전 물결 상태 정보를 저장하고 있다. 시간에 따라 변화하는 물결 상태 정보를 2개의 배열판으로 표현했다고 치면 되겠다. 위 그림에서 버퍼 1은 이전 프레임 버퍼 2과 그 이전 프레임 상태를 기억하는 버퍼 1(그림에는 보이지 않는)의 정보를 토대로 만들어진다. 마찬가지로, 가장 오른쪽에 있는 버퍼 2는 버퍼 1과 그 이전 버퍼 2의 상태를 조합하여 만들어진다. 이렇게 2개의 판을 사용해서 새로운 상태를 표시하기 위해 .. 2019. 9. 5.
퀵 정렬 알고리즘 퀵 정렬(Quicksort)은 C. A. R. 호어가 개발한 정렬 알고리즘으로, 다른 원소와의 비교만으로 정렬을 수행하는 비교 정렬에 속한다. from wiki private long[] table; private int quickSort(long[] arr){ table = arr; quickSortFn(0, table.length - 1); return 1; } private void quickSortFn(int left, int right) { int i,j; long p, tmp; if(left < right) { i=left; j=right; p=table[left]; //분할 과정 while(i < j) { while(table[j] > p) j--; while(i < j && table[i] 2013. 8. 15.
벡터(스크롤)을 스칼라 값(회전)으로 변경하는 예시 벡터(스크롤)을 스칼라 값(회전)으로 변경하는 예시 - 안드로이드 PieChart 예시에서. /** /** * Helper method for translating (x,y) scroll vectors into scalar rotation of the pie. * * @param dx The x component of the current scroll vector. * @param dy The y component of the current scroll vector. * @param x The x position of the current touch, relative to the pie center. * @param y The y position of the current touch, relative t.. 2013. 7. 29.
컴퓨터 그래픽에 유용한 방정식 - Processing by Reas and Fry x와 y의 관계를 보여주는 그래프입니다.그래픽이나 움직임을 작업을 할 때 아주 유용한 건데, 역시 책에서 잘 정리해놨네용~ 2013. 5. 29.
파일 이름으로 정렬시키기 윈도우 파일 탐색기 창처럼 파일이름으로 배열의 아이템을 정렬시킬 일이 생겼다. 배열 A = ["abc1", "abc3", "abc10", "abc20", "abc02"] 을 액션스크립트 배열의 sort 명령으로 정렬시킨다면, 이러한 결과가 나온다. ["abc02","abc1","abc10","abc20","abc3" ] 내가 원하는 결과는 ["abc1","abc02","abc3","abc10","abc20"] 이다. 그래서 구글링으로 아래 참고 자바소스를 찾아 그대로 포팅해서 사용했다. 참고 : http://stackoverflow.com/questions/3066742/sort-files-by-name-in-java-differs-from-windows-explorer public function so.. 2012. 2. 18.
ConvolutionFilter 로 화사한 블러링 효과시키기 ConvolutionFilter 이 필터를 이용하면 주변 픽셀의 값을 조합해서 새로운 픽셀 정보를 만들기에 편리하다. 블러, 외곽선 추출, Sharpening, Embossing, Beveling 등을 할 수 있다. 액션스크립트에서 ConvoltionFilter 생성자는 이렇다. ConvolutionFilter(matrixCols, matrixRows, matrix, divisor:1, bias:0, preserveAlpha:true, clamp:true, color:0, alpha:0) 픽셀 (x, y) 에 행렬 계산을 해서 새로운 픽셀 값을 구하게 된다. 3x3 행렬이 아래와 같다면, ConvolutionFilter 를 통해 다시 정의되는 x, y 의 픽셀 값은 이렇다. dst (x, y) = ((s.. 2011. 3. 5.
2D 벡터에 대한 사소한 것들 내적(dot product) A·B = |A||B|cosθ (A벡터의 크기 * 벡터 B의 A방향 성분) 풀이 = |A||B| cos(θa - θb) = |A||B| (cosθa*cosθb + sinθa*sinθb) = |A| cosθa*|B| cosθb + |A| sinθa*|B| sinθb = Ax*Bx + Ay*By A·A = |A||A| A·B = B·A A·(B+C) = A·B + A·C (scalar A)·B = scalar(A·B) |A·B| 2009. 8. 5.
다각형과 점 위치 구하기 삼각형 넓이 구하기 (http://lsujang.egloos.com/845237) 3차원 좌표공간에서의 벡터 외적을 이용하면 쉽게 계산할 수 있다. 먼저 벡터의 외적이란 두 벡터에 수직인 법선 벡터를 구하는 벡터 곱이다. 위 그림에서 보면 a 벡터와 b 벡터를 외적하면 a X b(파란색) 법선 벡터가 구해진다. 이 외적의 결과값인 법선 벡터의 크기는 a 벡터와 b 벡터로 만들어지는 평행사변형의 넓이와 같다. 결국 법선 벡터의 크기를 2로 나누면 a 벡터와 b 벡터로 만들어지는 삼각형의 넓이를 구할 수 있는 것이다. 외적의 크기를 구하는 공식은 |a||b|sinθ 이기 때문에 결국 평행사변형의 넓이를 구하는 공식과 같게 된다. (|a|는 a 벡터의 크기(길이)를 나타내고 sqrt(a.x^2 + a.y.y^.. 2009. 1. 9.