p5.js // texturing with camera

p5.js texturing with camera
재밌는 걸 해봤다
텍스처에 카메라가 연동되어서 웹캠으로
보여지는 카메라 소스가 텍스쳐 안에 출력되는 것으로
작동하고 여러번 반복해서 구현해봄. 

p5.js texturing with camera

캔버스에 도형 그림을 그리고 두 도형이 로테이션 회전하는 것으로 텍스쳐를 잡아 준 후
컬러, 이미지, 텍스트 배치 등을 할 수도 있고 텍스쳐에 출력되는 것을 카메라로 입력되는 것을 
텍스쳐에 출력하게 하라는 식의 코드를 작성해서 실제적으로는 같은 두 도형이 서로 반대로 
천천히 회전하면서 카메라에 보여지는 상황이 실시간으로 도형에 찍혀서 나오게 된다.  

 

// Texturing with camera

let angle = 0

let cam

function setup() {

createCanvas(windowWidth, windowHeight, WEBGL);

cam = createCapture(VIDEO)

}

function draw() {

background(255)

stroke(175,175,0)

strokeWeight(2)

texture(cam)

drawShape(-100,0,angle)

drawShape(125,0,-angle)

angle -= 0.005

}

function drawShape(x,y,angle) {

push()

translate(x,y)

rotateX(angle)

sphere(150,6,3)

pop()

}