Data Pixels

DataPixels.js 라이브러리

DataPixels.js는 모듈형 ES2015 클래스를 사용하여 설계된 JavaScript 라이브러리입니다. 생성자에 픽셀 데이터 배열과 각 픽셀의 크기를 전달하면, HTMLCanvasElement와 HTMLImageElement를 포함하는 인스턴스를 생성하여 프로그래밍 방식으로 만든 픽셀 아트를 표시할 수 있습니다.

• 플릭셀 데이터 입력: RGB(예: “255, 255, 255”) 또는 RGBA(예: “255, 255, 255, 255”) 형식의 문자열을 포함하는 2차원 배열을 전달하여 이미지를 정의합니다.
• 유연한 입력 형식: 문자열에는 숫자 외에 설명 텍스트도 포함될 수 있으며, 숫자만 파싱됩니다.
• 출력: 생성된 픽셀 아트에 접근할 수 있는 HTMLCanvasElement와 HTMLImageElement 접근자를 제공합니다.

Data Pixels Playground 데스크톱 앱

Electron 기반의 경량 데스크톱 애플리케이션으로, DataPixels.js 인스턴스를 작성하고 실행하여 픽셀 아트를 미리볼 수 있습니다.

• 내장 예제 코드: ‘Help’ 메뉴에서 ‘Basic’, ‘Hearts’, ‘Mario Bros’와 같은 예제 코드를 바로 실행해 볼 수 있습니다.
• 이미지 파일 파싱: ‘File > Open Image File…’ 메뉴 또는 드래그 앤 드롭으로 이미지 파일을 열면, 해당 이미지의 색상 데이터를 기반으로 자동으로 코드를 생성할 수 있습니다.
• 시각적 조작: ‘View Panel’에 렌더링된 픽셀 아트를 마우스나 컨트롤을 사용하여 드래그, 확대/축소, 반사할 수 있어 디자인을 미세 조정할 수 있습니다.

기본 사용법

DataPixels.js를 프로젝트에 설치하려면 NPM 패키지 관리자를 사용합니다.

npm i data-pixels

다음은 기본적인 사용 예시입니다. 각 문자열에 RGB/RGBA 값을 정의하고, 이중 배열 데이터와 픽셀 크기를 전달하여 이미지를 생성합니다.

import DataPixels from "data-pixels"; const R = "255, 0, 0, 255"; const G = "0, 255, 0, 255"; const B = "0, 0, 255, 255"; const _ = "0, 0, 0, 0"; const data = [[R, G], [B, _]]; const size = 100; const image = new DataPixels(data, size).image; document.body.appendChild(image);

이런 경우에 유용합니다

• 웹 개발자: 웹사이트나 웹 애플리케이션에 코드로 동적으로 생성되는 픽셀 아트 요소를 추가할 때 사용할 수 있습니다.
• 아티스트 및 디자이너: 기존 이미지 파일을 기반으로 픽셀 데이터를 자동으로 변환하여, 픽셀 아트 스타일로 재해석하는 과정을 탐색할 때 유용합니다.
• 교육 및 학습: JavaScript 클래스, 블록 스코프, 배열 조작 등 프로그래밍 개념을 시각적 결과물과 함께 학습하는 데 도움이 됩니다.

지원 환경·시스템 요구사항

Data Pixels Playground 데스크톱 애플리케이션은 Windows, Mac, Linux를 지원합니다. DataPixels.js 라이브러리는 웹 브라우저 환경에서 동작합니다.

최신 버전·업데이트

현재 NPM 패키지 및 GitHub 릴리스에서 확인되는 최신 버전은 1.1.0입니다.

제한 사항·확인 사항

• 이미지 파일에서 색상 데이터를 자동으로 파싱할 때, 파일에 내장된 색상 공간에 따라 의도한 색상 값과 약간 차이가 발생할 수 있습니다.
• 데스크톱 애플리케이션의 빌드를 생성하려면 각 플랫폼의 OS에서 해당 스크립트를 실행하는 것이 권장됩니다.

화면으로 보는 주요 기능

데이터 픽셀 플레이그라운드

'Data Pixels Playground' 애플리케이션 창의 'Help' 메뉴가 열려 있어 'Code Examples' 하위 메뉴(기본, 하트, 마리오 형제)가 보인다. 코드 편집기에는 JavaScript 코드가 표시되어 있고, 하단 뷰 패널에는 빨간색, 파란색, 보라색, 초록색의 여러 픽셀 아트 하트 이미지가 표시되어 있다.

마리오 픽셀 아트 생성

코드 에디터에 DataPixels 모듈을 사용하여 마리오 캐릭터의 픽셀 데이터를 정의하는 JavaScript 코드가 표시되어 있다. 코드 옆에는 해당 코드로 생성된, 빨간색 모자와 파란색 앞치마를 입은 마리오의 픽셀 아트 이미지가 렌더링되어 있다.

데이터 픽셀 플레이그라운드

'Data Pixels Playground'라는 제목의 애플리케이션 창에서, 상단 메뉴 바에 'File', 'Edit', 'View', 'Window', 'Help'가 표시되어 있다. 'Help' 메뉴가 클릭되어 열려 있으며, 'About', 'Code Examples', 'Toggle Developer Tools', 'F12'가 있는 하위 메뉴가 보인다. 'Code Examples' 메뉴 아래에는 'Basic', 'Hearts', 'Mario Bros'라는 하위 메뉴 항목이 있다. 코드 편집기에는 JavaScript 코드가 표시되어 있고, 하단에는 빨간색, 파란색, 보라색, 초록색의 픽셀 아트 하트 이미지가 여러 개 표시되어 있다. 하단 이미지 영역의 좌측 하단에는 'Scale: 1.00', 'Width: 300', 'Height: 300'이라는 텍스트가 있다.