[개발 TIP] JAVA 및 Processing 을 사용하여 놀라운 웹캠 효과를 만드는 방법!

처리는 코드를 통해 예술 작품을 만들 수있는 강력한 도구입니다. 그래픽 작업을위한 Java 라이브러리와 코드를 쉽게 작성하고 실행할 수있는 통합 개발 환경 (IDE)의 조합입니다.

Processing을 사용하는 많은 그래픽 및 애니메이션 초보자 프로젝트가 있지만 라이브 비디오를 조작 할 수도 있습니다.

오늘은 Processing 비디오 라이브러리를 사용하여 마우스로 제어되는 다양한 효과의 라이브 비디오 슬라이드 쇼를 만들 것입니다. 라이브 비디오를 뒤집는 것뿐만 아니라 크기를 조정하고 색상을 지정하는 방법과 마우스 커서를 따라 가도록 만드는 방법을 배웁니다.

프로젝트 설정

시작하려면 처리를 다운로드하십시오. 8빈 스케치를 엽니 다. 이 자습서는 Windows 시스템을 기반으로하지만 웹캠이있는 모든 컴퓨터에서 작동합니다.

Sketch> Import Library> Add Library 에서 액세스 할 수있는 Processing Video 라이브러리를 설치해야 할 수도 있습니다 . 검색 상자에서 비디오 를 검색하고 The Processing Foundation 에서 라이브러리를 설치하십시오 .

설치가 완료되면 바로 사용할 수 있습니다. 코딩을 건너 뛰려면 전체 스케치를 다운로드 할 수 있습니다. 1. 그러나 처음부터 직접 만드는 것이 훨씬 좋습니다!

프로세싱과 함께 웹캠 사용

라이브러리를 가져 와서 설정 기능을 만드는 것으로 시작하겠습니다 . 빈 처리 스케치에 다음을 입력합니다.

import processing.video.*; Capture cam; void setup(){ size(640,480); cam = new Capture(this, 640, 480); cam.start(); }

비디오 라이브러리를 가져온 후 웹캠의 데이터를 저장하기 위해 cam 이라는 Capture 인스턴스 를 만듭니다 . 에서 설정 의 사이즈 업 기능 세트 640 × 480 픽셀의 작업에 창을 크기.

다음 줄의 양수인은 캠 의 새로운 인스턴스에 캡처 를 들어, 이 함께 켜 카메라를 이야기하기 전에, 윈도우와 같은 크기의 스케치, cam.start () .

지금은이 모든 부분을 이해하지 못하더라도 걱정하지 마십시오. 간단히 말해서 Processing에 창을 만들고 카메라를 찾아서 켜라고했습니다! 그것을 표시하려면 그리기 기능이 필요 합니다. 중괄호 밖에있는 위의 코드 아래에 입력하십시오.

void draw(){ if (cam.available()){ cam.read(); } image(cam,0,0); }

그리기 기능은 매 프레임마다 호출됩니다. 즉 , 카메라에 사용 가능한 데이터가 있으면 초당 여러 번 데이터 를 읽 습니다.

이 데이터는 창의 왼쪽 상단 인 0, 0 위치에 이미지 로 표시됩니다 .

스케치를 저장하고 화면 상단의 재생 버튼을 누릅니다.

영상670 × 529123KB

성공! 캠에 저장된 데이터 는 매 프레임 화면에 올바르게 인쇄되고 있습니다. 문제가있는 경우 코드를 철저히 확인하십시오. Java는 올바른 위치에 모든 대괄호와 세미콜론이 필요합니다! 처리하는 데 웹캠에 액세스하는 데 몇 초가 걸릴 수도 있으므로 작동하지 않는다고 생각되면 스크립트를 시작한 후 몇 초 동안 기다리십시오.

그림 뒤집기

이제 라이브 웹캠 이미지를 얻었으므로 조작 해 보겠습니다. 그리기 기능에서 image (cam, 0,0); 이 두 줄의 코드로.

scale(-1,1); image(cam,-width,0);

스케치를 저장하고 다시 실행합니다. 차이가 보이십니까? 음의 배율 값 을 사용하면 모든 x 값 (가로 픽셀)이 반전됩니다. 이 때문에 이미지를 올바르게 배치하려면 창 너비 의 음수 값을 사용해야 합니다.

이미지를 거꾸로 뒤집는 데 몇 가지 작은 변경이 필요합니다.

scale(-1,-1); image(cam,-width,-height);

영상670 × 529125KB

이번에는 x 및 y 값이 모두 뒤집혀 라이브 카메라 이미지가 거꾸로 뒤집 힙니다. 지금까지 일반 이미지, 가로로 뒤집힌 이미지, 세로로 뒤집은 이미지를 코딩했습니다. 그들 사이를 순환하는 방법을 설정합시다.

순환 만들기

매번 코드를 다시 작성하는 대신 숫자를 사용하여 순환 할 수 있습니다. 코드 상단에 switcher 라는 새 정수 를 만듭니다 .

import processing.video.*; int switcher = 0; Capture cam;

스위처의 값을 사용하여 카메라 이미지에 어떤 일이 발생하는지 결정할 수 있습니다. 스케치가 시작되면 값을 0으로 지정 합니다. 이제 논리를 사용하여 이미지에 일어나는 일을 변경할 수 있습니다. 그리기 방법을 다음과 같이 업데이트하십시오 .

void draw(){ if (cam.available()){ cam.read(); } if(switcher==0){ image(cam,0,0); } else if(switcher == 1){ scale(-1,1); image(cam,-width,0); } else if(switcher == 2){ scale(-1,-1); image(cam,-width,-height); } else{ println("Switcher = 0 again"); switcher = 0; } }

이제 세 가지 코드 변형 모두 스위처 값에 따라 트리거됩니다. if 또는 if else 문 중 하나와 일치하지 않으면 else 절이 0으로 재설정됩니다. 논리는 배우기위한 중요한 초보자 기술이며, 훌륭한 YouTube 프로그래밍 자습서를 통해 이에 대해 자세히 알아볼 수 있습니다.

마우스 사용

Processing에는 마우스 액세스를위한 기본 제공 방법이 있습니다. 사용자가 마우스를 클릭하는시기를 감지하려면 스크립트 하단에 mousePressed 함수를 추가하십시오 .

void mousePressed(){ switcher++; }

Processing은 마우스 클릭을 수신하고이를 감지하면이 방법을 수행하기 위해 프로그램을 중단합니다. 메소드가 호출 될 때마다 스위처의 값이 1 씩 커집니다. 스크립트를 저장하고 실행하십시오.

이제 마우스 버튼을 누르면 원본으로 돌아 가기 전에 비디오의 다른 방향을 순환합니다. 지금까지 비디오를 뒤집 었으니 이제 좀 더 흥미로운 일을 해봅시다.

더 많은 효과 추가

영상670 × 529126KB

이제 유명한 Andy Warhol 예술 작품과 유사한 4 색 라이브 이미지 효과를 코딩합니다. 더 많은 효과를 추가하는 것은 논리에 다른 절을 추가하는 것만 큼 간단합니다. 마지막 사이에 스크립트로이 추가 다른 경우 문, 및 다른 사람 .

else if(switcher == 3){ tint(256, 0, 0); image(cam, 0, 0, width/2, height/2); tint(0, 256, 0); image(cam, width/2, 0, width/2, height/2); tint(0, 0, 256); image(cam, 0, height/2, width/2, height/2); tint(256, 0, 256); image(cam, width/2, height/2, width/2, height/2); }

이 코드는 image 함수를 사용하여 화면의 각 모서리에 4 개의 개별 카메라 이미지를 만들고 모두 절반 크기로 만듭니다.

색조 함수는 각 카메라 화상에 색상을 추가한다. 괄호 안의 숫자는 빨간색, 녹색, 파란색 (RGB) 값입니다. 선택한 색상으로 다음 코드의 색상을 지정합니다.

결과를 보려면 저장하고 재생하십시오. 색상을 변경하려면 각 색조 기능 에서 RGB 숫자를 변경해보십시오 !

마우스를 따라 가기

마지막으로 Processing 라이브러리의 유용한 기능을 사용하여 라이브 이미지가 마우스 위치를 따르도록 만들어 보겠습니다. 로직 의 else 부분 위에 이것을 추가하십시오 .

else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); }

여기에서 카메라의 이미지를 mouseX 및 mouseY에 배치 합니다. 이들은 마우스가 가리키는 픽셀을 반환하는 Processing 값에 내장되어 있습니다.

그게 다야! 코드를 통한 라이브 비디오의 5 가지 변형. 그러나 코드를 실행하면 몇 가지 문제가 있음을 알 수 있습니다.

코드 마무리

지금까지 만든 코드는 작동하지만 두 가지 문제가 있습니다. 첫째, 4 가지 색상의 변형이 표시되면 이후 모든 것이 자주색으로 표시됩니다. 둘째, 마우스로 동영상을 이동하면 흔적이 남습니다. 그리기 기능 상단에 몇 개의 선을 추가하여 문제를 해결할 수 있습니다.

void draw(){ tint(256,256,256); background(0); //draw function continues normally here!

각 프레임이 시작될 때이 코드는 색조 색상을 흰색으로 재설정하고 배경 색상을 검정색으로 추가하여 비디오가 흔적을 남기지 않도록합니다. 이제 프로그램을 테스트하면 모든 것이 완벽하게 작동합니다!

웹캠 효과 : 코드의 예술

처리는 매우 강력하며이를 사용하여 많은 작업을 수행 할 수 있습니다. 코드로 아트를 만들기위한 훌륭한 플랫폼이지만 로봇 제어에도 똑같이 적합합니다!

Java가 아니라면 p5.js라는 Processing 기반의 JavaScript 라이브러리가 있습니다. 브라우저 기반이며 초보자도 환상적인 반응 애니메이션을 만드는 데 사용할 수 있습니다!

사람들을 즐기십시오!