프로세스 작성 프로세스 만들기
만약 네가 정말 좋아한다면, 창조적인 인코딩은 중독되기 쉽다.그것은 매우 큰 가능성을 가지고 있다. 이것이 바로 내가 이 글을 쓰기로 결정한 이유이다. 여러분에게 자바스크립트 라이브러리 p5를 사용하여 인코딩하는 기묘한 유형을 소개하기 위해서이다.js, 거기서 당신은 이전보다 더욱 예술적으로 관중과 교류할 수 있습니다!

무엇이 창조적 인코딩입니까?

내가 보기에 창조적 인코딩은 코드의 도움으로 일종의 교체 방식으로 어떤 것을 표현하고 예술, 도안, 배경, 모델, 초도, 데이터 시각화, 애니메이션 등을 제작한다.그것은 기능성이 아니라 코드로 표현성을 만드는 것에 관한 것이다.창조적 인코딩은 기술, 예술과 디자인이 교차하는 학과이다.
너 몰라?내가 너에게 몇 가지 예를 들게 할게.



너는 지금 틀림없이 생각하고 있을 것이다. "뭐라고? 이런 예술 형식이'코드'로 만들어진 거야? 나는 정말 믿을 수 없어!"이것은 나의 최초의 생각이다. 그러나 당신이 이 아름다운 실천에 들어가면 자연 자체가 어떻게 일련의 반복적인 과정일 뿐이고 최종적으로 이 세계를 형성했는지 이해하기 시작할 것이다. 이것은 우리가 인코딩에서 한 것이다. 그렇지?우리는 우리의 문제를 해결하기 위해 알고리즘을 만들었다.창조적 인코딩의 유일한 변화는 우리가 예술 형식으로 어떤 것을 표현하는 알고리즘을 창조한 것이다.

p5.js

너도 C++로 창조적인 인코딩을 할 수 있어!그러나 이것은 결코 이것을 위한 것이 아니다. 이것이 바로 우리가 창조적 인코딩에 전문적으로 사용되는 프레임워크가 있기 때문이다.Processing는 이 분야에서 가장 유명한 플랫폼으로 자바를 사용하지만 다른 언어도 다른 변체가 있다. p5.js는 우리가 웹에서 창조적인 인코딩을 하는 플랫폼이다.분명히 자바스크립트를 사용하기 때문에 웹 개발자들이 사용하기 쉽다. 이것도 Lauren McCarthy 개발의 주요 원인이다.시작합시다.
빨리 시작하려면 열기만 하면 됩니다p5.js web editor.이제 p5 편집기가 생겼습니다. 코드를 알아보겠습니다.따라서 p5에는 두 가지 가장 중요한 기능이 있습니다.

setup()

draw()

따라서 setup () 은 내장 함수입니다. 프로그램이 시작될 때 한 번만 실행되고,draw () 도 내장 함수입니다. 순환에서 실행됩니다. 이것은 기본적으로 무한히 실행된다는 것을 의미합니다.우리들은 하나하나 그것들을 이해합시다.
1. 기능 설정()
이것은 함수이다. 이 함수에서 우리는 우리가 처음에 하고 싶었던 모든 일을 넣고 한 번만 넣는다.이것은 기본적으로 우리의'초도'를 위해 환경과 화면 크기, 배경색 같은 것을 설정했다. 우리는 p5에서 프로그램 파일이라고 부른다.js.매우 일반적인 설정 함수는 다음과 같다.

function setup(){
 createCanvas(500,500);
 background(120);
}

보시다시피 우리는 500x500개 단위의 캔버스를 만드는 함수createCanvas()와 캔버스의 색을 설정하는 함수background()를 가지고 있습니다.매개 변수를 제공하면 0에서 255까지의 값이 되고 0은 검은색, 255는 흰색을 나타냅니다.만약 우리가 세 개의 매개 변수를 제공한다면, 그것은 RGB 색 표현을 사용할 것이다. 각 값은 0에서 255까지 같지 않다.
2.function draw()
이것이 바로 대부분의 동작이 발생하는 곳이다.여기서 우리는 각종 함수, 순환과 자체 제작 알고리즘을 사용하여 최종 작품을 만든다.당신은 소리, 데이터, 네트워크 카메라, 센서와 다른 것을 사용하여 스케치에 삽입하여 상호작용을 가지게 할 수 있지만, 이것은 본고의 범위를 초과한다.만약 우리가 선, 원, 직사각형 또는 어떤 형상을 그리고 싶다면, 우리는 함수가 있다.

function draw(){
  fill(233,11,44); // color to fill the shapes
  stroke(1); // stroke color
  strokeWeight(2);
  line(20,20,160,60); // line from (20,20) to (160,60)
  fill(23,44,223); 
  rect(170,170,120,70); // rectangle on (170,170) with 120x70 size
  fill(223,212,44);
  ellipse(120,130,100,100); // ellipse on (120,130) with height 100 and width 100, which makes it a circle
  noLoop();
}

따라서 위의 코드는 다음과 같이 생성됩니다.

이 함수들은 말하지 않아도 알 수 있다. 주석을 통해 당신은 무슨 일이 일어났는지 이미 알고 있을 것이다.마지막으로 noLoop () 이라는 함수가 있습니다. 실제로는 아무것도 하지 않고 draw () 함수의 무한 운행을 막습니다.이것은 당신이 실행을 원할 수 있는 draw() 특정 횟수의 장면에서 매우 유용합니다.
p5에도 일부 내장 변수가 있는데 이것은 우리의 초도에 복잡성을 증가시킬 수 있다.그중 일부는 마우스 X와 마우스 Y다.그것들은 마우스 커서의 x와 y 좌표를 저장하는 데 사용되는 변수입니다.
이 초도를 보세요.

function setup() {
  createCanvas(400, 400);
  background(200);
}
function draw(){
  fill(233,11,44);
  stroke(1); 
  strokeWeight(2);
  makeShapes();
}
function makeShapes(){
  fill(random(200),random(200),random(200));
  ellipse(mouseX,mouseY,50,50);
  rect(mouseX,mouseY,120,70);
}

결과:

가능성

이것은 단지 당신들에게 p5를 소개하는 것이기 때문이다.js, 나는 복잡한 초도에 들어갈 수 없지만, 나는 이미 너를 위해 길을 다졌다. 네가 창조적인 코딩 예술에 모험을 해서 아름다운 것을 창조할 수 있기를 바란다.영감을 얻기 위해 다음과 같은 몇 가지 초안입니다.)




만약 네가 여기까지 왔다면, 읽어 줘서 고마워!그것이 너에게 도움이 되기를 바란다.만약 네가 CSS에 흥미가 있다면, 나도 나의 사이트CSS Kenpai에 재미있는 글을 쓸 것이다.
자세한 내용은 다음과 같습니다.

https://medium.com/better-programming/getting-started-with-creative-coding-16072ff7e778

https://p5js.org

https://www.creativebloq.com/features/6-ways-to-get-into-creative-coding