Help us understand the problem. What is going on with this article?

p5.jsでクリエイティブコーディングを始めよう!

More than 3 years have passed since last update.

クリエイティブコーディングとは?

クリエイティブコーディングは、プログラミングでメディアアートやオーディオ生成、データを可視化したりする技法の事です。本稿は、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);
}

実際にブラウザで確認してみましょう!
スクリーンショット 2017-03-10 10.36.13.png

しっかりと640×480のCanvasタグが生成され、円が描画されていれば成功です!

マウスでクリックした位置に円を描画する

次に、インタラクティブなプログラムを作成してみます。
先程と同様に以下のコードを記述します。

function setup(){
    //640×480のCanvasを生成
    createCanvas(640,480);
}

function draw(){
    //クリックしたとき
    if(mouseIsPressed){
        //クリックした位置に直径10の円を描画
        ellipse(mouseX, mouseY, 10 ,10);
    }
}

実際にブラウザで確認してみましょう!mouse.gif
Canvas要素の範囲内でクリックやドラッグした場所に円が描画されたら成功です!

おわりに

今回はp5.jsの基礎的な部分を記事にまとめてみました。
時間がある時に、もっと高度なクリエイティブコーディングの記事を書きたいと思います。
この記事を読んで、少しでもクリエイティブコーディングに興味を持っていただけると幸いです。

参考サイト

p5.jsリファレンス
https://p5js.org/reference/

shoch0922
フロント系の言語を主に扱っています。 クリエイティブコーディングもよくやっています。
junni
デジタル領域における広告デザインの企画・制作を行っています。アソビゴコロで、世界をハッピーに変えていく。それがわたしたちの理念です。
https://junni.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした