아두이노로 16x2 LCD 디스플레이에 커스텀 애니메이션 만들기

부품 및 소모품

앱 및 온라인 서비스

• 아두이노 IDE
• 커스텀 글리프 생성기 (웹 도구)

프로젝트 소개

LiquidCrystal 라이브러리는 아두이노로 LCD를 쉽게 사용할 수 있게 해줍니다. 특히 흥미로운 기능은 createChar() 함수입니다: 8바이트 배열로 각각 설명되는 커스텀 글리프(문자)를 생성할 수 있습니다. 각 바이트의 하위 5비트가 해당 행의 픽셀을 결정합니다. 바이트를 직접 작성하여 아트를 만드는 것은 예술가의 이상적인 과정이 아니므로, 글리프를 직접 그릴 수 있고 코드가 자동으로 생성되는 웹 도구를 만들었습니다.

이 기사에서는 아두이노 보드와 LCD만으로 커스텀 애니메이션을 만드는 방법을 보여드리겠습니다. 이를 활용해 게임, 짧은 이야기, 뮤직 비디오, 상태 패널 장식 등 다양한 프로젝트를 만들 수 있습니다.

LCD를 아두이노에 연결하기

화면 모델에 따라 다른 연결이 더 잘 작동할 수 있습니다. 제 화면 중 하나는 아래 회로도대로 잘 작동했지만, 다른 하나는 이 튜토리얼처럼 포텐셔미터를 사용하고 저항 값을 조정하여 최적의 대비를 얻어야 했습니다.

TinkerCad 시뮬레이션은 여기에서 확인하세요.

아트 만들기

도구로 이동하여 아트를 만드세요. 한 번에 최대 8개 섹션을 사용할 수 있으므로, 새 사각형을 선택할 수 없다면 이미 8개 섹션을 사용 중인지 확인하세요.

코드 생성하기

첫 번째 이미지 작업이 끝나면 "just the function" 체크박스를 해제하세요. 코드를 클립보드에 복사하여 아두이노에 업로드하세요. 이 시점에서 LCD에 이미지가 표시되어야 합니다.

더 많은 프레임 만들기

코드가 저장되었는지 확인하세요. 이제 두 번째 프레임을 만들 수 있습니다. 또 다른 이미지를 그리세요. 완료되면 "just the function" 체크박스를 체크하세요. 함수를 복사하여 코드 끝에 붙여넣으세요. 새 함수의 이름을 image01()처럼 변경하여 관리하기 쉽게 만드세요. 이제 setup() 함수에서 image() 호출을 loop() 함수로 이동하고, 지연을 추가하고, image01()을 호출하고, 다시 지연을 추가하세요. 일관성을 위해 image()를 image00()으로 이름을 변경하는 것도 고려해보세요. loop() 함수는 다음과 비슷해야 합니다:

void loop() { 
  image00(); 
  delay(250); 
  image01(); 
  delay(250); 
}

스케치를 아두이노에 업로드하세요. 더 많은 프레임을 추가하거나 지연 시간을 변경해 보세요.

코드

나비 변태 애니메이션 예제 코드

아래는 GIF의 나비 변태 애니메이션 뒤에 있는 예제 코드입니다.

/* butterfly metamorphosis animation 2021 ~ by tusindfryd this code is in public domain */
#include <LiquidCrystal.h>
LiquidCrystal lcd(12, 11, 5, 4, 3, 2); // RS, E, D4, D5, D6, D7

void setup() {
  lcd.begin(16, 2);
}

void loop() {
  image00(); delay(250);
  image01(); delay(250);
  image02(); delay(250);
  image03(); delay(700);
  image04(); delay(250);
  image05(); delay(250);
  image06(); delay(700);
  image07(); delay(1250);
}

// image00() ~ image07() 함수들은 각각 커스텀 문자를 생성하고 LCD에 표시합니다.
// 각 함수는 lcd.createChar()로 8개의 커스텀 문자를 정의하고 lcd.write()로 화면에 출력합니다.
// 전체 코드는 GitHub 저장소에서 확인하세요.

회로도