남은 차잎처럼 보이는 텍스처를 어떻게 생성 할 수 있습니까?


11

우리는 컵 바닥에 찻잎을 만들 수있는 iPhone 및 Windows Phone 7 용 프로젝트를 진행하고 있습니다. 사실적으로 보일 필요는 없으며 실제로 cartoony도 괜찮습니다.

이를 달성하기 위해 어떤 종류의 기술을 연구해야합니까? 도움이 될만한 라이브러리가 있습니까?

다음은 Google 이미지 검색에서 가져온 샘플입니다.

여기에 이미지 설명을 입력하십시오 여기에 이미지 설명을 입력하십시오


요구 사항을보다 구체적으로 설명해 주시겠습니까? 그들은 매번 다른 주변에서 소용돌이 쳐야합니까? 애니메이션이나 고유성 요구 사항이 없다면 텍스처 / 사진으로 사용할 수없는 이유를 알 수 없기 때문입니다.
phillipwei 14

@phillipwei 그렇습니다. 매번 달라 지거나 재고 사진과 같은 느낌이 들지 않을 정도로 합리적으로 달라야합니다.
Jedidja

답변:


15

내가 어떻게 예술을 통제 할 수 있고 절차 적 방법을 조정하려고 노력하는 데 오랜 시간을 소비하지 않을 것입니다.

먼저, 찻잎 덩어리의 전체 스프라이트가 아니라 작은 그룹화와 같이 예술적으로 "수영장"으로 여러 찻잎 덩어리 스프라이트를 수동으로 만듭니다. 그들 중 20 명 정도?

그런 다음 "컵"베이스에 임의의 숫자를 임의의 좌표에 놓습니다. 각각 임의의 회전 및 스케일과 임의의 수평 및 / 또는 수직 미러링을 제공하십시오. 이것은 좋은 결과를 가져와야합니다.

이 방법을 사용하면 원하는 모양을 갖도록 개별 덩어리를 만들면서 예술적으로 자유로울 수있을뿐만 아니라 다양한 스프라이트를 선택할 수 있습니다.

또한이 방법 (및 Perlin 노이즈 기반을 포함한 임의의 방법)을 사용하면 프로세스 시작시 알려진 시드로 난수 생성기를 실제로 시드하여 재현 가능한 결과를 얻을 수 있습니다. 시드를 저장하면 시퀀스가 ​​시작되기 직전에 다시 시드하여 동일한 패턴을 다시 정확하게 다시 생성 할 수 있습니다. 누군가 이름을 입력하고 문자를 숫자 (총 ASCII 등)로 바꾸는 등의 재미있는 일을 할 수도 있습니다. 그런 다음이 씨앗을 일종의 "이 차 잎 패턴이 당신에게 맞춤화되었습니다!" 의회.

여기에 도움이된다면 의사 코드가 있습니다.

var sprites = [...]; // Array of tea leaf sprites

var n_leaves = rand(5)+5; // Random number of leaves from 5-9
for (i=0; i<n_leaves; i++) {
    var sprite_index = rand(sprites.length);  // Random sprite index
    var r = rand(CUP_DIAMETER);          // Random radius for point on disk calc
    var theta = rand(2*PI);              // Random theta (rotation) for point on disk
    var sprite_x = sqrt(r) * cos(theta); // Sprite X
    var sprite_y = sqrt(r) * sin(theta); // Sprite Y
    var sprite_rotation = rand(2*PI);    // Sprite rotation
    var sprite_scale = rand(1) + 0.5;    // Sprite scale from 0.5 to 1.5
    var sprite_h_mirror = (rand(1) < 0.5 ? true : false); // If true, mirror horizontally
    var sprite_v_mirror = (rand(1) < 0.5 ? true : false);   // If true, mirror vertically
    draw_sprite(sprite_index, sprite_x, sprite_y, sprite_rotation, sprite_h_mirror, sprite_v_mirror);
}

디스크에서 임의의 점을 선택하는 방법과 전체 sqrt / sin / cos를 사용하는 이유에 대한 훌륭한 토론은 http://mathworld.wolfram.com/DiskPointPicking.html 을 확인하십시오 .


7

이진 컷오프 값이 0.8 정도 인 펄린 노이즈를 사용해보십시오.

예제 이미지를 http://imgur.com/a/Ydc4y에 업로드했습니다 . 첫 번째는 임계 값이 적용된 두 번째 이미지입니다. 두 번째는 기본 펄린 노이즈로, http://en.wikipedia.org/wiki/Perlin_noisehttp://http.developer.nvidia.com/GPUGems2/gpugems2_chapter26.html 과 같은 여러 좋은 참조를 찾을 수 있습니다 .

펄린 노이즈에서 옥타브 수와 스케일로 비트를 연주하여 출력이 얼마나 매끄러 워 지는지를 변화시킬 수 있으며, 차가 얼마나 남을 것인지 (평균적으로 노이즈만큼) 결정하는 임계 값을 결정할 수 있습니다.


3
이것은 일부 링크와 생산 가능한 것의 예를 통해 더 나은 대답이 될 수 있습니다.
MichaelHouse

정적 이미지를 사용할 수 있고 픽셀 쉐이더에서 원형 영역을 클램핑 할 수 있지만 픽셀 당 펄린 노이즈 값을 생성 할 필요없이 해당 원의 가장자리가 페더 링됩니다 (제 경험상이 방법은 약간 느립니다) ).
teodron

펄린 노이즈 자체를 생성하는 것은 약간 무겁습니다. 그래도 미리 계산 된 노이즈 텍스처를 사용하여이 효과를 얻을 수 있습니다. 이 방법을 사용하여 몇 가지를 사전 계산할 수도 있습니다.
dascandy

4
-1. 많은 찻잎과 많은 펄린 소음을 보았을 때, 나는 그들이 똑같이 본다고 말할 수는 없습니다. 펄린 노이즈가 올바른 출발점이 될 수 있지만 목표는 일반적인 sum (1 / f) 변형에 적합하지 않습니다.

1
나는 펄린 소음 접근이 실용적이지 않다는 것에 동의한다. 그것을 확인하기 위해 펄린 노이즈에서 시작하여 포토샵에서 효과를 재현하려고했습니다. 결과는 다음과 같습니다 . 괜찮아 보이지만 문제는 내가 조정해야 할 에 있습니다. 실제로 모든 조정을 절차 적으로 재현하는 방법을 생각할 수 없으므로 Tim Holt가 제안한 스프라이트 기반 접근 방식에 투표합니다.
David Gouveia
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.