Processing으로 간이 메타볼

THE GUILD 오피스에서 행해지고 있는 인터랙티브 코딩의 모임에 다녀온 로그입니다.

Github 저장소

코드나 소재는 모두 들어 있습니다.
앞으로도 여기에 추가하겠습니다.

인터랙티브 코딩 모임이란?

THE GUILD의 cocopon씨가 유지를 모아 가고 있는 코딩 연구회입니다.
매회 설정되는 테마에 따라 간단한 오리엔 후, 1시간 정도로 작은 작품을 각각 만들어 발표하고 끝나는 감자의 형식입니다.
지금까지의 테마는 「랜덤」으로 시작되어 「삼각 함수」, 「색」등이 있었던 것 같습니다.

이번 테마

"형"

만든 것

하고 싶은 일과 과제 의식

모양이 변화하는 것을 만들고 싶다

마우스 등으로 변화 정도를 바꾸고 싶다

도형을 계산하고 쓰는 것은 지식이 부족하거나 다분간에 맞지 않습니다

이라레로 만든 SVG 등을 이용하면 화려한 외형으로 전개하기 쉽다.

시도한 것

메타볼 구현

제대로 연산하는 것은 무리이므로 초간이판으로 2차원 한편 단색의 것을 실장했습니다.
사고 방식은 옛부터 심플한 것으로,

모양을 보카

흑백 2 극화하여 노망을 잘라

라는 것입니다.
스텝 바이 스텝으로 하면 이런 느낌. (PhotoShop라든지 할 수 있습니다)

효과 없음

흐림

2극화 임계값

2극화 후

코드로서는 다음과 같은 간지입니다.

// ボケ具合。数字が大きいほどボケ足が大きくなるがそのぶん処理が遅くなる
float blurRadius = 10;
// 二極化の閾値。0〜1で数値が大きいほど黒くが多くなる
float threshouldRecio = 1;

filter(BLUR, blurRadius);
filter(THRESHOLD, threshouldRacio);

실제 코드에서는 마우스의 Y축(세로)에서 ThreshouldRacio값을, X축(가로)에서 blurRaiuds값을 변화시켜 녹는 상태를 체크할 수 있도록 하고 있습니다.

SVG 소재를 그려 메타 시켜 보자

Processing은 다음과 같이 한 줄로 SVG와 같은 이미지 소재를 읽을 수 있습니다.
또한 shape 함수로 쉽게 그릴 수 있습니다.

// setupメソッド内
PShape svgdata = loadShape("test_graphic_outline.svg");
// drawメソッド内
shape(svgdata, 0, 0, 600, 600);

이제 이라레로 그려서 SVG로 내보내고 Processing으로 그릴 수있었습니다.
조금 이상한 느낌으로 변화하는 일러스트입니다.

최종 그림

조금 내용이 여러가지 적절하지 않네요. 이해합니다.



그리고, Threshould하면 단색이 되어 버리므로, 그림적으로는 좀 더 궁리할 필요가 있을 것 같습니다.
색마다 분해하고 나서 메타볼화하고 나중에 다시 착색한 후 합성한다든가.

감상

참가하는 것이 좋았습니다.

기본 모쿠모쿠와 하는 느낌입니다만, 곳곳에 막힌 곳을 듣는 사람이 있으면 모두 가르치는 감자로 매우 분위기 좋은 공부회였습니다.

몇 번이나 오고 있는 사람은, 전회의 작품을 계승해 새로운 표현을 더해 가기 때문에, 단시간에 보기 좋게 하는 것을 만들고 있었습니다.
첫회라면 시간도 적고 별로 대단한 것은 만들 수 없습니다만, 반대로 계속해서 참가해 가자 조금씩 딱딱하게 하는 어프로치로 자신의 수법을 키워 가려면, 매우 좋은 모임이라고 느꼈습니다.

그리고 자신적으로는 쇼보 있어도 타인에게 있어서 신선한 부분이 서로 있으므로, 보이는 형식도 자극이 된다고 생각했습니다.

개인적으로는 지금의 업무로부터는 조금 먼 장르의 작업입니다만 또 참가하고 싶습니다.
고마워요.

홍보

원 박에서는 인터랙티브한 것을 건간 제안하고 싶은 프런트 엔드인을 모집하고 있습니다!!!