p5.js에서 크리에이티브 코딩을 시작하세요!
크리에이티브 코딩이란?
크리에이티브 코딩은 프로그래밍으로 미디어 아트, 오디오 생성, 데이터를 시각화하는 기법입니다. 이 글은 p5.js를 사용한 크리에이티브 코딩 코딩의 시작 기사입니다.
p5.js란?
p5.js는 Java가 기반의 크리에이티브 코딩 환경인 'Processing'의 JavaScript 버전 라이브러리입니다. Processing과 묘사 방법이 비슷하기 때문에 (초반자라도) 크리에이티브 코딩을 쉽게 할 수 있습니다.
공식 사이트
p5.js를 소개합시다!
p5.js를 소개합니다.
먼저 아래와 같은 html 파일을 만듭니다. 파일명은 「index.html」이라고 합니다.
이번에는 우선이므로 p5.js를 CDN에서 읽고 있습니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>p5.js Introduction</title>
<!-- p5.jsの読み込み -->
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
</head>
<body>
<script type="text/javascript">
//この部分にプログラムを書いていきます。
</script>
</body>
</html>
바로 크리에이티브 코딩!
index.html의 <script type="text/javascript"></script>에 프로그램을 작성합니다.
우선, 이하의 코드를 기술해 봅시다.
function setup(){
//640×480のCanvasを生成
createCanvas(640,480);
}
function draw(){
//xが320,yが240,直径が100の円を描画
ellipse(320,240,100,100);
}
실제로 브라우저에서 확인해 봅시다!
확실히 640×480의 Canvas 태그가 생성되어 원이 그려져 있으면 성공입니다!
마우스로 클릭한 위치에 원을 그립니다.
다음으로 대화형 프로그램을 작성해 보겠습니다.
이전과 마찬가지로 다음 코드를 작성합니다.
function setup(){
//640×480のCanvasを生成
createCanvas(640,480);
}
function draw(){
//クリックしたとき
if(mouseIsPressed){
//クリックした位置に直径10の円を描画
ellipse(mouseX, mouseY, 10 ,10);
}
}
실제로 브라우저에서 확인해 봅시다! 
Canvas 요소의 범위 내에서 클릭이나 드래그한 장소에 원이 그려지면 성공입니다!
결론
이번에는 p5.js의 기초적인 부분을 기사에 정리해 보았습니다.
시간이 있을 때 더 고급 광고 소재 코딩 기사를 작성하고 싶습니다.
이 기사를 읽고 조금이라도 크리에이티브 코딩에 관심을 가질 수 있기를 바랍니다.
참고 사이트
p5.js 참조
htps // p5js. 오 rg / 레후 렌세 /
Reference
이 문제에 관하여(p5.js에서 크리에이티브 코딩을 시작하세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shoch0922/items/ef156cf548da8634e226
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
p5.js는 Java가 기반의 크리에이티브 코딩 환경인 'Processing'의 JavaScript 버전 라이브러리입니다. Processing과 묘사 방법이 비슷하기 때문에 (초반자라도) 크리에이티브 코딩을 쉽게 할 수 있습니다.
공식 사이트
p5.js를 소개합시다!
p5.js를 소개합니다.
먼저 아래와 같은 html 파일을 만듭니다. 파일명은 「index.html」이라고 합니다.
이번에는 우선이므로 p5.js를 CDN에서 읽고 있습니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>p5.js Introduction</title>
<!-- p5.jsの読み込み -->
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
</head>
<body>
<script type="text/javascript">
//この部分にプログラムを書いていきます。
</script>
</body>
</html>
바로 크리에이티브 코딩!
index.html의 <script type="text/javascript"></script>에 프로그램을 작성합니다.
우선, 이하의 코드를 기술해 봅시다.
function setup(){
//640×480のCanvasを生成
createCanvas(640,480);
}
function draw(){
//xが320,yが240,直径が100の円を描画
ellipse(320,240,100,100);
}
실제로 브라우저에서 확인해 봅시다!
확실히 640×480의 Canvas 태그가 생성되어 원이 그려져 있으면 성공입니다!
마우스로 클릭한 위치에 원을 그립니다.
다음으로 대화형 프로그램을 작성해 보겠습니다.
이전과 마찬가지로 다음 코드를 작성합니다.
function setup(){
//640×480のCanvasを生成
createCanvas(640,480);
}
function draw(){
//クリックしたとき
if(mouseIsPressed){
//クリックした位置に直径10の円を描画
ellipse(mouseX, mouseY, 10 ,10);
}
}
실제로 브라우저에서 확인해 봅시다!
Canvas 요소의 범위 내에서 클릭이나 드래그한 장소에 원이 그려지면 성공입니다!
결론
이번에는 p5.js의 기초적인 부분을 기사에 정리해 보았습니다.
시간이 있을 때 더 고급 광고 소재 코딩 기사를 작성하고 싶습니다.
이 기사를 읽고 조금이라도 크리에이티브 코딩에 관심을 가질 수 있기를 바랍니다.
참고 사이트
p5.js 참조
htps // p5js. 오 rg / 레후 렌세 /
Reference
이 문제에 관하여(p5.js에서 크리에이티브 코딩을 시작하세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shoch0922/items/ef156cf548da8634e226
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>p5.js Introduction</title>
<!-- p5.jsの読み込み -->
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
</head>
<body>
<script type="text/javascript">
//この部分にプログラムを書いていきます。
</script>
</body>
</html>
index.html의
<script type="text/javascript"></script>에 프로그램을 작성합니다.우선, 이하의 코드를 기술해 봅시다.
function setup(){
//640×480のCanvasを生成
createCanvas(640,480);
}
function draw(){
//xが320,yが240,直径が100の円を描画
ellipse(320,240,100,100);
}
실제로 브라우저에서 확인해 봅시다!
확실히 640×480의 Canvas 태그가 생성되어 원이 그려져 있으면 성공입니다!
마우스로 클릭한 위치에 원을 그립니다.
다음으로 대화형 프로그램을 작성해 보겠습니다.
이전과 마찬가지로 다음 코드를 작성합니다.
function setup(){
//640×480のCanvasを生成
createCanvas(640,480);
}
function draw(){
//クリックしたとき
if(mouseIsPressed){
//クリックした位置に直径10の円を描画
ellipse(mouseX, mouseY, 10 ,10);
}
}
실제로 브라우저에서 확인해 봅시다!
Canvas 요소의 범위 내에서 클릭이나 드래그한 장소에 원이 그려지면 성공입니다!
결론
이번에는 p5.js의 기초적인 부분을 기사에 정리해 보았습니다.
시간이 있을 때 더 고급 광고 소재 코딩 기사를 작성하고 싶습니다.
이 기사를 읽고 조금이라도 크리에이티브 코딩에 관심을 가질 수 있기를 바랍니다.
참고 사이트
p5.js 참조
htps // p5js. 오 rg / 레후 렌세 /
Reference
이 문제에 관하여(p5.js에서 크리에이티브 코딩을 시작하세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shoch0922/items/ef156cf548da8634e226
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function setup(){
//640×480のCanvasを生成
createCanvas(640,480);
}
function draw(){
//クリックしたとき
if(mouseIsPressed){
//クリックした位置に直径10の円を描画
ellipse(mouseX, mouseY, 10 ,10);
}
}
이번에는 p5.js의 기초적인 부분을 기사에 정리해 보았습니다.
시간이 있을 때 더 고급 광고 소재 코딩 기사를 작성하고 싶습니다.
이 기사를 읽고 조금이라도 크리에이티브 코딩에 관심을 가질 수 있기를 바랍니다.
참고 사이트
p5.js 참조
htps // p5js. 오 rg / 레후 렌세 /
Reference
이 문제에 관하여(p5.js에서 크리에이티브 코딩을 시작하세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shoch0922/items/ef156cf548da8634e226
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(p5.js에서 크리에이티브 코딩을 시작하세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shoch0922/items/ef156cf548da8634e226텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
