개발하는 디자이너의 DIY 일상

네! 당연히 됩니다.

일러스트레이터에서 스크립트를 사용할 수 있게 되면 진정 놀라운 결과들을 만들어 낼 수 있습니다. 사람이 손으로 하기에는 정말 귀찮은 작업들을 가능하게 만들어 줍니다.

이런 이미지를 손으로 만들어 본다고 치면요. 일단 배치되는 모든 사각형의 각도도 랜덤이고, 사각형의 색상이 하나도 연속으로 동일한게 없다면요.. 머리가 벌써 아파오죠?

하지만 스크립트를 이용하면 저것보다 수백배 복잡한 것도 손쉽게 해낼 수 있답니다.

막상 해보면 일러스트야 말로 진정한 노가다 툴이 아닐 수 없습니다. 

패스 하나하나 손으로 그려야 하며 그려야 하는 패스가 정형화 된 스타일일 수록 피곤해 집니다.

자 그럼 일러스트 스트립트 어떻게 해야 할까요?

일단 포토샵스크립트와 동일하게 javascript 를 기반으로 동작합니다. MAC OS 에서는 apple script 를 지원하고 WindowOS 에선 VBA 도 지원하지만 공용으로 사용할 수 있는 javascript 가 적당해 보입니다. 문법도 포토샵 스크립트와 크게 다르지 않으니 일단 javascript 의 기본을 알고 계시면 금방 시작하실 수 있습니다.

일러스트는 기반이 벡터 그래픽이다 보니 어쩌면 스크립트라는 형식 자체가 포토샵보다 적용 가능한 부분이 많습니다. 포토샵이 이미지를 메모리에 얹어 놓고 메모리 안의 이미지를 이미지 프로세싱을 통해 변화를 주다 보니 스크립트와 같이 성능에 제약적인 개발언어로 할 수 있는게 많이 없습니다. 하지만 일러스트는 모든 데이터가 벡터 그래픽이다 보니 아주 많은 영역에 대하여 스크립트로 할수 있는 여지가 있는 것이죠.

먼저 extend script toolkit 을 준비하시고요. 

그 다음은 전과 마찬가지로 필요한 액션을 작성해 나가시면 됩니다. 포토샵 스크립트와 비슷 한 느낌 입니다.

var cDoc = app.activeDocument;
alert(cDoc.name)

비슷하지요? 다만 태생이 포토샵과 다르다 보니 스크립트를 작성하는 방식이 약간은 다릅니다.

포토샵은 app 안에 document 개체를 찾고 그 안에 layer 또는 Artlayer 로 접근하여 layer 안의 오브젝트의 속성을 조정하는 것이 일반적인 방식인데요. 일러스트는 app 안에 document 를 찾는 것 까지는 같지만 레이어로 접근하지 않고도 스크립트에서 바로 개체로 접근이 가능합니다.

var cDoc = app.activeDocument;
var mItem_01 = cDoc.pageItems[0]
var mItem_02 = cDoc.layers[0].pageItems[0]

또 레이어 안에 shape 의 종류만 해도 pageItem, pathItem, compoundPathItem, GroupItem 과 같이 다양한 개체가 있으며 그외에도 textItem 이나 다양한 개체가 존재합니다. 

또 위에서 설명드린 개체들 중 pageItem 은 모든 개체를 통털어 일컬을 수 있는 녀석이기도 합니다.

예를들면 layer 안에 두개의 groupItem 과 한개의 pathItem 이 있다고 했을때 이것은 3개의 pageItem 이 있는 것으로 처리되기도 합니다. 즉 pageItem 이라는 개념은 종류를 불문하고 어떤 하나의 속성을 갖는 개체로 정의되는 것이지요. 그래서 코딩할 때도 각각의 개체의 타입이 무엇인지 정확히 파악하여 코딩을 해야 합니다.

var cDoc = app.activeDocument;
s = cDoc.selection

for (var i = 0; i < s.length; i++)
{
    var cItem = s[i];
    if (cItem.typename == "pathItem")
    {
        alert("pathItem")
    }
    else if (cItem.typename == "GroupItem")
    {
        alert("groupItem")
    }
    else
    {
        alert("another Item")
    }
 }

선택한 개체들이 어떤 종류의 개체인지 확인하는 간단한 코드 예제.

위에 열거한 개체들 중 가장 하위 개념인 pathItem 은 그안에 PathPoints 라는 Pathpoint 들의 그룹을 갖습니다. PathPoint 는 예상하신 것처럼 우리가 알고 있는 점 을 말하지요. PathPoint 안에도 anchor 와 leftDirection, rightDirection 과 같은 속성들도 구성되므로 상당히 체계적으로 코드를 작성해야 정상적으로 동작이 됩니다.

예를 들면 패스 내에 있는 하나의 점은 다음과 같이 정의 되는 것이죠.

var cDoc = app.activeDocument;
var cLyr = cDoc.layers[0]; // layer 개체
var cItem = cLyr.pageItems[0]; // pageItem 개체
var cPath = cItem.pathItems[0]; // pageItem 이 GroupItem 이라는 가정하에.. pathItem 개체
var firstPoint = cPath.pathPoints[0]; // pathPoint 개체
var cPt = firstPoint.anchor; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_leftHandle = cPt.leftDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_rightHandle = cPt.rightDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열

일러스트는 벡터 그래픽이다 보니 자동으로 뭔가를 그리려면 벡터 연산이 필수 입니다.

중고등학교 수학을 열심히 했다면 할만 하지만 놀았다면 어려운 수준의 수학적 지식이 필요합니다. 간단한 삼각함수와 2차원 평면에서의 함수와 도형 등의 주제에 대한 이해가 조금은 필요합니다.

어쩌면 선형 대수학과 같은 고급 수학에 정통한 분들은 아주 빠르게 습득이 가능할 겁니다.

프로그래밍을 배우려면 어쩔 수 없는 부분이니 이참에 공부해 보시는 것도 괜찮습니다. 너도 예체능계를 나왔기 때문에 수학은 완전 잼병이었는데요, 막상 필요하니 하게 되더랍니다.

어쨌든 일러스트 스크립트 크게 어려울 것은 없으니 이번에 마음 잡고 도전해 보시기 바랍니다.

저도 본 블로그를 통해 틈틈히 요긴한 강좌를 올리도록 하겠습니다.

그럼 이만~

2019/06/12 - [DESIGN] - 일러스트 이미지 소스

2019/12/16 - [DEV/MAX SCRIPT] - 3DS MAX SCRIPT 강좌?? 무작정 시작하기 - 디자이너 추천

2019/06/10 - [DEV/Adobe Script] - [포토샵 스크립트] 강좌, 무작정 따라해보기

Max Script 를 이용하여 무엇인가를 하려면 필수 요소라고 할 수 있는 것 중의 하나가 개체를 선택하거나 지정하는 방법입니다. 여기서 개체는 3D Scene 안의 오브젝트, 스플라인, 헬퍼 등과 같은 사용자가 직접 선택할 수 있는 개체를 말합니다. 물론 오늘 강좌에서의 선택은 마우스를 클릭하여 선택하는 select의 개념만을 말하는 것은 아닙니다. 

예를 들어 A 라는 모델링 개체의 스케일을 2배로 변경한다고 했을 때 일반적인 사용자의 입장에서는 마우스로 해당 모델링을 클릭하거나 레이어 리스트에서 선택하거나 개체 리스트에서 해당 모델링을 선택 (select) 한 뒤 속성 등을 변경하게 되는데요. 스크립트에서는 굳이 select 의 상태를 만들 필요는 없습니다. 물론 동일하게 select 상태를 만들 수 있긴 하지만 성능 관점에서는 굳이 select 상태여야 할 필요가 없다면 바로 진행을 하면 됩니다.

참고로 본 강좌 진행을 위해 알아야 할 것은 이제부터는 개체를 노드(Node)라고 부를 것 입니다. 3DS MAX Script 에서 공식적으로 개체를 Node 라고 지정하였기 때문이고요. 레퍼런스 등을 보실때도 그렇게 이해하고 계신 것이 혼선이 없을 것 입니다.

우선 기본적인 방식을 살펴 보겠습니다.

• selection 상태를 만드는 방법
• 현재 선택된 개체를 가져오는 방법
• selection 상태가 아닌 상태에서 개체를 지정하는 방법
  • 지정된 이름을 기준으로 지정하는 방법 (단수 개체)
  • 이름의 일부를 기준으로 지정하는 방법 (복수 개체)
  • 레이어 단위로 지정하는 방법
  • 모델링 클래스 단위로 지정하는 방법 (geometry, spline, ...)

이런 것들을 소개해 드릴 까 합니다.

이번 강좌의 내용만 잘 이해하셔도 3D Scene 내의 대부분의 개체를 선택하거나 지정하는 것이 가능합니다.

Selection 상태를 만드는 방법

먼저 기본형은 Select <Node> 의 형태로 되어 있습니다.

Node 는 $ 표시를 붙인 뒤에 개체의 이름을 적어주면 해당 노드를 지정하게 됩니다.

만약 $Box01 이라 하면 "Box01" 이라는 이름을 갖는 노드(개체)를 지칭하게 됩니다. 이녀석을 선택 (Select) 상태로 만드시려면 아래와 같은 방법을 사용하면됩니다.

Select $Box01

요 코드를 스크립트 에디터 또는 리스너(F11) 창 아래 하얀색 창에 적어주고 실행하면 "Box01" 이라는 이름을 갖는 모델링이 선택된 상태가 됩니다. 물론 Box01 이라는 개체가 존재해야 하지요.

A 라는 오브젝트를 선택한 뒤 B 라는 오브젝트를 추가로 선택하고 싶으신 경우 아래와 같이 코드를 작성하시면 됩니다.

select $Box01
selectmore $Box02

selectmore 라는 명령어를 이용하여 셀렉션을 추가할 수 있습니다.

현재 선택된 개체를 가져오는 방법

코드 작성을 하다보면 모든 기능이 시작부터 끝까지 자동화가 어려운 경우가 있습니다. 그런 경우 사용자에 의해 특정 개체를 선택한 뒤 부터 코드가 실행이 된다거나 하는 경우가 종종 있을 수 있습니다. 이럴때 현재 선택된 개체를 가져오는 스크립트가 필요한데요. 바로 아래와 같이 사용하시면 됩니다.

myObject = getCurrentSelection()

이렇게 하면 현재 선택된 개체들을 myObject 라는 변수로 가져올 수 있는데요. 아래와 같이 실재로 사용할 수 있습니다.

myObject = getCurrentSelection()

for obj in myObject do
(
	-- 선택된 개체에 대하여 수행해야 하는 코드를 작성한다.
    print (obj.name)
)

-- 또는

for i = 1 to myObject.count do
(
	obj = myObject[i]
    print (obj.name)
)

selection 상태가 아닌 상태에서 개체를 지정하는 방법

스크립트를 이용하여 자동화 업무를 하다보면 항상 선택이라는 액션이 발생되는 것은 아닙니다. 선택이라는 액션이 이루어 지는동안 속도가 많이 저하되기 때문에 자동화의 대상이 많을 수록 선택 과 같은 액션은 생략하는 것이 좋습니다. 개체가 선택될 때 마다 맥스에서는 UI 를 업데이트 해주어야 하는데요, 이때 성능이 많이 느려지게 됩니다. 아래의 내용에서는 선택 과정 없이 특정 개체에 직접 접근하는 간단한 사례를 설명하겠습니다.

지정된 이름을 기준으로 지정하는 방법 (단수 개체)

오브젝트의 이름을 알고 있는 경우 가장 손쉽게 개체를 지정할 수 있습니다. 보통은 코드 작성의 편의를 위하여 변수에 담아서 사용하는것이 일반적인 방법입니다. 위에 select 예제와 유사한 방식으로 지정하게 됩니다.

obj = $Box01
print (obj.name)

Box01 이라는 모델링 개체의 이름을 프린트 창에 출력하는 코드죠. 위와 같이 첫줄을 적어주면 obj 라는 개체가 갖는 다양한 속성들이나 명령들을 적용할 수 있게 됩니다. 예를 들어 해당 개체가 Box 라는 class 인 경우 아래와 같이 속성을 변경할 수 있게 됩니다.

obj = $Box01
print (obj.name)

-- 박스의 크기를 현재의 두배로 만들자
obj.width = obj.width * 2
obj.height = obj.height * 2
obj.length = obj.length * 2

-- 높이를 50 만큼 올려보자
obj.pos.z += 50 

요런식으로 사용하는 것이지요.

이름의 일부를 기준으로 지정하는 방법 (복수 개체)

이번에는 이름의 일부분만을 이용하여 개체를 지정하는 방법을 소개해보겠습니다.

예를 들어 "box01" , "box02",... "box99" 이런식으로 동일한 이름 구조를 갖는 복수개의 개체가 있는 경우에 해당됩니다. 

objs = execute ("$box*")

print objs.count

위에 보시면 execute 라는 명령어가 있는데요. 뒤쪽에 나오는 문자열을 실행 가능한 문장처럼 해석하는 것입니다. 문자열에는 "$box*" 이라는 형태로 씌어져 있는데 여기서 * 은 와일드 카드라고 불리는 글자 입니다. 다시말하면 box + 어떤 것이든 해당되는 문자열 이라고 보시면 됩니다. scene 내에 box 로 시작하는 모든 개체가 objs 라는 변수에 담기는 것이죠. objs 는 배열형 변수가 되어 실제 사용하실 때는 아래와 같이 하나씩 꺼내 쓸 수 있게 됩니다.

objs = execute ("$box*")

print objs.count -- 전체 담겨져 있는 개체의 수를 출력한다

for o in objs do
(
	print o.name -- 개체의 이름을 출력한다.
    -- 여기서 개체별로 하고 싶은 액션을 작성하면 됩니다.
)

-- 다른 방법으로는
for i = 1 to objs.count do
(
	print objs[i].name

)

위와 같은 형식으로 각각의 개체에 대하여 어떤 작업을 하는 것이 가능합니다.

레이어 단위로 지정하는 방법

그럼 이번에는 레이어 단위로 개체를 지정하는 방법을 알아보겠습니다. 

3DS MAX 작업을 하다보면 레이어를 기준으로 개체를 생성하고 관리하는 경우가 종종 있습니다. 물론 레이어 창을 열어서 해당 레이어 안의 개체를 선택해 줄 수 있겠지만 레이어가 많은 경우, 또는 특정 레이어에 항상 같은 작업이 반복되는 경우 레이어의 개체를 지정하여 액션을 만들어 주는 것이 유용할 때가 있습니다.

레이어 이름을 아는 경우 아주 간단하게 적용이 가능합니다.

myLayer = LayerManager.getLayerFromName "myObjects"

myLayer.nodes &objs

for  o in objs do
(
	print o.name
)

myObjects 라는 이름을 갖는 레이어의 모든 개체를 objs 라는 변수에 담는 코드 입니다. 

레이어.nodes 라는 명령어가 뒤에 따라오는 참조형 변수에 해당 레이어의 모든 노드를 담아주는 기능을 수행합니다. 

참조형 변수는 반드시 & 기호를 붙여 주어야 하며 미리 정의를 해줄 필요는 없습니다.

모델링 클래스 단위로 지정하는 방법 (geometry, spline, ...)

scene 내에 위에서 정의한 방식 외에도 여러 레이어에 포함되어 있고 다양한 이름으로 존재하는 개체를 지정해야 하는 경우도 많이 있습니다. 예를 들면 scene 내의 모든 geometry 나 spline, helper 등을 선택해야 할 때도 있기 마련입니다.

이럴 때 사용할 수 있는 간단한 방법이 있습니다.

for  o in objects do
(
	print o.name
)

scene 내의 모든 오브젝트에 대한 처리가 가능하게 하는 간단한 방법입니다.

여기서 사용된  objects 와 같은 개체를 오브젝트 셋이라 부를수 있는데요 다음과 같은 종류가 있습니다.

objects  --all the objects
geometry  --the standard 3ds Max categories... 
lights
cameras
helpers
shapes
systems
spacewarps
selection  --the current selection

어떤 변수에 위에 해당되는 셋을 선언해주면 scene 내의 모든 해당 클래스의 개체가 대상이 됩니다.

아주 간단하지만 강력한 기능이죠.

이렇게 다양한 방법으로 화면 내의 개체를 지정하고 지정된 개체에 대하여 필요한 어떤 작업을 수행하는 것이 가능합니다. 어렵지 않죠?

다음번에는 어떤 조건을 붙여서 개체를 지정하거나 피하는 방법을 소개해 드리겠습니다.

그럼 이만~

2022.05.31 - [DEV/MAX SCRIPT] - [3ds max script] ray 에 대하여 알아보기

2019/12/11 - [DEV/MAX SCRIPT] - 3DS MAX 스크립트로 초간단 다이얼로그 창 , UI 버튼 만들기

2019/12/16 - [DEV/MAX SCRIPT] - 3DS MAX SCRIPT 강좌?? 무작정 시작하기 - 디자이너 추천

이번 포스트에서는 매직완드를 스크립트로 실행하는 방법을 설명 드리겠습니다.

포토샵의 매직 완드는 일반적인 스크립트로는 작성이 불가능하기 때문에 scriptListner 를 통하여 추출된 코드를 응용하여 개발을 해야 합니다. scriptListner 는 포토샵에서 이루어지는 거의 모든 기능에 대하여 출력을 해주기 때문에 일반적인 스크립트로 작성이 불가능한 기능에 대하여 개발을 해야 할 때 이용하기 좋은 멋진 플러그인 입니다.

나중에 한번 따로 설명을 드리도록 하겠습니다.

복잡하게 설명할 것 없이 바로 코드 갑니다. 이런 류의 코드는 직접 짜는 것이 거의 불가능하기 때문에 그냥 복붙하셔서 사용하시는 것이 가능 좋겠습니다.

function selectbyMagicWand(_x, _y, tolnc, anti, conti,merg){
    var idsetd = charIDToTypeID( "setd" );
    var desc103 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
        var ref53 = new ActionReference();
        var idChnl = charIDToTypeID( "Chnl" );
        var idfsel = charIDToTypeID( "fsel" );
        ref53.putProperty( idChnl, idfsel );
    desc103.putReference( idnull, ref53 );
    var idT = charIDToTypeID( "T   " );
        var desc104 = new ActionDescriptor();
        var idHrzn = charIDToTypeID( "Hrzn" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc104.putUnitDouble( idHrzn, idPxl, _x );
        var idVrtc = charIDToTypeID( "Vrtc" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc104.putUnitDouble( idVrtc, idPxl, _y );
    var idPnt = charIDToTypeID( "Pnt " );
    desc103.putObject( idT, idPnt, desc104 );
    var idTlrn = charIDToTypeID( "Tlrn" );
    desc103.putInteger( idTlrn, tolnc );
    var idMrgd = charIDToTypeID( "Mrgd" );
    desc103.putBoolean( idMrgd, merg );
    var idAntA = charIDToTypeID( "AntA" );    
    desc103.putBoolean( idAntA, anti );
    var idCntg = charIDToTypeID( "Cntg" );
    desc103.putBoolean( idCntg, conti );
executeAction( idsetd, desc103, DialogModes.NO );

}

총 6개의 입력값을 갖는 함수로 정리를 하였습니다.

각 함수의 인자는 아래와 같은 속성을 갖습니다.

• _x : 숫자 : 매직완드의 포인터 X좌표 
• _y : 숫자 :  매직완드의 포인터 Y 좌표
• tolnc : 숫자 0  ~ 255 : tolerance, 선택된 색상 값의 확장 범위. 0 일경우 완전히 같은 색상일 경우만 선택된다.
• anti : boolean : True or False 를 입력하며 경계 영역의 부드러운 처리여부
• conti :  boolean : True or False 를 입력하며 연속된 영역 안에서만 할 것인지 화면 전체로 할 것인지
• merge : boolean : True or False 를 입력하며 현재 레이어만 대상으로 할것인지 전체 레이어로 할 것인지

바로 아래 옵션에 해당되는 옵션들 입니다.

시제 사용하실 때는 아래와 같이 사용하시면 됩니다.

// 좌상단 1,1 위치의 색상을 pick 하여 선택 영역 생성
selectbyMagicWand(0, 0, 0, false, true, true) 

참고로 x, y 좌표 값은 -1 한 값을 입력하시면 됩니다.

사용하시면서 궁금하신 내용이 있으시면 뎃글 남겨주세요~

감사합니다.

미디어 아티스트를 꿈꾸는 디자이너라면 한번 쯤은 관심을 가져 봤을 법한 이미지 또는 영상이 있습니다. 바로 사진을 텍스트로 전환하여 이미지 프로세싱을 통해 표현하는 것인데요. 

음... 글로만은 설명이 좀 어려울 수 있겠습니다.

말하자면 이런거죠.

위의 그림을 보면 언뜻 사진처럼 보이지만 가까이서 보면 

이렇게 문자(알파벳, 숫자, 특수기호) 로 되어 있습니다.

신기하죠?

사실 사람이 이런 작업을 하는 것은 일정 사이즈를 넘어가는 순간 불가능 합니다. 하지만 스크립트를 이용하면 가능합니다.  이번에는 스크립트를 이용하여 위와 같은 그래픽을 자동으로 만드는 방법을 소개해 드릴 까 합니다. 

자 개발을 하려면 무엇을 어떻게 개발할 것인지 머리속에 잘 그려보는 것이 중요합니다.

한번 적어 볼까요?

• 알파벳, 숫자, 특수기호를 이용하여 밝기 순으로 문자를 배열하는 작업을 한다. --> A
• 도큐먼트를 사진을 분석이 가능한 최소 크기로 리사이즈 한다.
• 분석작업이 용이하도록 흑백으로 전환 한다.
• 각 픽셀의 밝기를 조사한다.
• 각 픽셀의 밝기에 대응되는 A 의 문자열을 찾아 변수에 저장한다.
• 다시 이미지 사이즈를 축소된 사이즈 * 글자크기 로 리사이즈 한다.
• 이미지에 텍스트 레이어를 추가한다.
• 텍스트 레이어에 아까 저장하였던 텍스트 변수의 값을 이용하여 글자를 표시한다.
• 글자의 문자 간격과 줄간격을 설정한다.
• 아! 글자는 모노타입 폰트를 설정한다. 폰트 간격이 pixel 처럼 일정해야 하므로.
  • 여기서 나는 Consolas 라는 모노타입 폰트를 10 pt 로 적용하였다.
• 뒤에 이미지에 해당되는 배경을 숨겨주면 완료!

좀 장황하지만 위의 과정이 있어야만 표현이 가능하다는 것을 알 수 있습니다.

우선 문자열을 매번 이미지를 글자로 표현해 볼때 마다 분석을 하는 것은 불필요하므로 별도 스크립트를 이용하여 재배열을 해야 하는데요, 아래 포스트의 내용을 먼저 참고하시면 도움이 되겠습니다.

https://diy-dev-design.tistory.com/55

제가 사용한 글자는 

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890[}±.:,/~';*-=+!@?>\#$%^&

인데요. 밝기 순으로 정렬을 해보면 아래와 같습니다.

.-':,;>^!~Lci/*1l?zC+±tsr2=JIT}[x75FvZ3eSYEfukjnayKoPXV9h6qdRp4bAG$8wDUO&%#Bg0mHQMWN@

순서가 뒤죽박죽이 되었죠? 제일 왼쪽이 가장 밝은 픽셀, 오른쪽이 어두운 픽셀에 매칭될 문자 입니다.

총 85개의 숫자인데요. 이미지의 픽섹의 밝기값을 0 ~ 100 사이의 밝기값으로 구한 뒤 x0.85 를 해주면 85 단계 정도로 리스케일이 됩니다. 그런 다음 각각의 리스케일 된 밝기를 저 글자의 해당 되는 위치의 글자로 표현해 주면 되는겁니다.

그럼 이미지를 준비해 볼까요? 

네. 유명한 영화 매트릭스의 주인공인 네오 포스터 입니다.

이제 코드를 짜보겠습니다. 주석을 달아 놓았으니 한줄 한줄 따라 적어 보시면서 읽어 보시면 됩니다.

코딩이 익숙치 않은 분은 좀 어려울 수도 있겠는데요. 기본적으로 for 를 이용한 반복 문이나 배열의 내용을 넣고 꺼내는 등의 기본적인 코딩이 가능하시면 크게 어려울 것은 없습니다.

var lset = ".-':,;>^!~Lci/*1l?zC+±tsr2=JIT}[x75FvZ3eSYEfukjnayKoPXV9h6qdRp4bAG$8wDUO&%#Bg0mHQMWN@@"

var cDoc = app.activeDocument

cDoc.colorSamplers.removeAll();


//현재 다큐먼트를 복제
dDoc = cDoc.duplicate();
var pointSample = dDoc.colorSamplers.add([1,1]);

// 이미지의 가로 사이즈를 정해준다.
var imageWidth = 24;
// 이미지의 세로사이즈는 가로사이즈에 맞추어 비율에 맞게 자동으로 구한다.
var imageHeight = Math.floor(dDoc.height * (imageWidth / dDoc.width));

// 이미지를 리사이즈 한다.
dDoc.resizeImage(imageWidth, imageHeight);
// 흑백으로 전환. 모드가 변경되는 것은 아니고 컬러만 흑백으로 변경하게 된다.
dDoc.layers[0].desaturate()

//밝기가 저장될 배열을 생성
var brightArray = [];

// 이미지의 모든 필셀의 밝기를 배열에 저장함
for (var yy = 0; yy < imageHeight ; yy++)
{
    for (var xx = 0; xx < imageWidth; xx ++)
    {
        pointSample.move([xx,yy]);
        brightArray.push(Math.floor(85 - pointSample.color.hsb.brightness * 0.85))
    }
}

// 글자를 10pt 로 표시할 것이므로 이미지의 가로 세로 픽셀 수 x 10 한 만큼의 크기로 리사이즈를 한다.
dDoc.resizeImage(imageWidth * 10, imageHeight * 10, 72, ResampleMethod.NEARESTNEIGHBOR);

//이전의 유닛 단위를 미리 저장해 놓는다.
var rulerUnits = app.preferences.rulerUnits;
// 유닛을 포인트로 변경한다.
app.preferences.rulerUnits = Units.POINTS;

// 레이어를 하나 만들어 준뒤 텍스트 레이어로 정해준다.
var aLyr = dDoc.artLayers.add();
aLyr.kind = LayerKind.TEXT;
aLyr.name = "myTxt";

var cTxtItem = dDoc.artLayers["myTxt"].textItem;
cTxtItem.font = "Consolas";
cTxtItem.useAutoLeading = false
cTxtItem.size = 10;
cTxtItem.leading = 10.0;
cTxtItem.tracking = 445; // 몇차례 테스트 후 얻어진 값
cTxtItem.position = [0,0];

var cid = 0;
var ct = "";

for (var yy = 0; yy < imageHeight ; yy++)
{
    for (var xx = 0; xx < imageWidth; xx ++)
    {
        ct += lset.charAt(brightArray[cid]); // 저장된 배열의 값에 해당되는 글자를 가져옴
        cid++;
    }
    ct += "\r"; // 가로행이 끝나면 리턴을 입력하여 줄바꿈을 해준다.
}
cTxtItem.contents = ct; // 텍스트 아이템의 내용을 수집한 문자열로 입력한다.
cTxtItem.leading = 10.0;

//저장해 두었던 유닛으로 설정을 되돌린다.
app.preferences.rulerUnits = rulerUnits;
pointSample.remove();

이렇게 하고 실행을 해보면 글자로 만들어진 그림이 표시됩니다.

이렇게요.

가로를 32px 로 하면 아래와 같이 됩니다.

코드의 imageWidth 의 값을 변경하면 그에 해당하는 디테일의 이미지가 만들어 집니다. 24px 에 비하여 32px의 이미지가 좀더 디테일한 것을 알 수 있습니다. 다만 포토샵의 colorSampler 가 색상을 취득하는 과정이 매우 속도가 느려서 좀 큰 해상도로 하게 되면 상당히 오래 걸려야 표시가 되더군요. 

아무래도 포토샵이 실시간으로 이미지를 프로세싱하기에는 역부족인 듯 합니다만 포토샵 스크립트로도 이런 작업이 가능하구나 정도로 이해하시면 좋을 것 같습니다. 

참고로 이런류의 작업을 아주 빠르게 수행할 수 있는 툴도 있습니다. cycling74 라는 회사의 MAX 라는 툴이고요. JITTER 라는 툴이 MAX 와 함께 설치되면 영상 처리를 아주 빠른 속도로 할 수 있습니다. 실시간 영상도 위와 같이 표현이 가능할 정도로요. 포토샵에서도 이런게 되는구나 정도로 보시면 될 것 같습니다.

이렇게 만들어진 텍스트 이미지를 이용하여 제 휴대폰 배경화면을 하나 만들어 봤습니다.

좀 더 매트릭스의 텍스트 이펙트가 살아있는 배경화면은 아래 페이지에서 다운 로드 받으세요~

https://diy-dev-design.tistory.com/56

존 윅 폰 배경화면 (간치 철철)

https://diy-dev-design.tistory.com/58