{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/media-art-and-digital-art-overview","result":{"data":{"markdownRemark":{"id":"f6d9d573-809e-5ada-bad4-246b1cbde1e8","html":"<p><a href=\"https://qiita.com/advent-calendar/2021/media-and-xr-lonely\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">画像・動画・音声処理および XR 一人アドベントカレンダー</a> 23 日目の記事です。</p>\n<p>メディアアートやデジタルアートという単語を聞いたことはあったのですが、どんな意味なのかよく分かっていなかったので、改めて調べました。</p>\n<p>また、特にデジタルアートに利用できるソフトウェア・ライブラリについても調べました。</p>\n<h2 id=\"技術に関する◯◯アートについて\" style=\"position:relative;\"><a href=\"#%E6%8A%80%E8%A1%93%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E2%97%AF%E2%97%AF%E3%82%A2%E3%83%BC%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" aria-label=\"技術に関する◯◯アートについて permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>技術に関する◯◯アートについて</h2>\n<h3 id=\"メディアアート\" style=\"position:relative;\"><a href=\"#%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%A2%E3%83%BC%E3%83%88\" aria-label=\"メディアアート permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>メディアアート</h3>\n<p>「<a href=\"https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%A2%E3%83%BC%E3%83%88\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">メディアアート - Wikipedia</a>」によると、メディアアートは、</p>\n<blockquote>\n<p>芸術表現に新しい技術的発明を利用する、もしくは新たな技術的発明によって生み出される芸術の総称的な用語</p>\n</blockquote>\n<p>とのことです。</p>\n<p>コンピュータに限らず、映像技術やロボティクスなどを活用したものも含むようです。</p>\n<h3 id=\"デジタルアート\" style=\"position:relative;\"><a href=\"#%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%A2%E3%83%BC%E3%83%88\" aria-label=\"デジタルアート permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>デジタルアート</h3>\n<p>「<a href=\"https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%A2%E3%83%BC%E3%83%88\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">デジタルアート - Wikipedia</a>」によると、</p>\n<blockquote>\n<p>デジタルアート（Digital art）は、デジタルコンピュータを使って芸術作品を作ること</p>\n</blockquote>\n<p>だそうです。</p>\n<p>「メディアアートのうち、コンピュータを使うものがデジタルアート」ということですね。</p>\n<p>完全にコンピュータで生成する場合もあれば、写真などを元に加工したものも含まれるそうです。</p>\n<h3 id=\"ジェネラティブアート\" style=\"position:relative;\"><a href=\"#%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%A9%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%BC%E3%83%88\" aria-label=\"ジェネラティブアート permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ジェネラティブアート</h3>\n<p>デジタルアートのうち、完全にコンピュータがアルゴリズムで生成したものを、「ジェネラティブアート」と言います。</p>\n<p>参考</p>\n<ul>\n<li><a href=\"https://ja.wikipedia.org/wiki/%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%BC%E3%83%88\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ジェネレーティブアート - Wikipedia</a></li>\n</ul>\n<h3 id=\"その他\" style=\"position:relative;\"><a href=\"#%E3%81%9D%E3%81%AE%E4%BB%96\" aria-label=\"その他 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>その他</h3>\n<p>他にも</p>\n<ul>\n<li>コンピュータアート</li>\n<li>ソフトウェアアート</li>\n<li>インターネットアート</li>\n</ul>\n<p>などの似た言葉がたくさんあり、使い分けはなかなか難しそうでした。</p>\n<h2 id=\"デジタルアートに使えるソフトウェア・ライブラリ\" style=\"position:relative;\"><a href=\"#%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%A2%E3%83%BC%E3%83%88%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%BB%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA\" aria-label=\"デジタルアートに使えるソフトウェア・ライブラリ permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>デジタルアートに使えるソフトウェア・ライブラリ</h2>\n<h3 id=\"processing\" style=\"position:relative;\"><a href=\"#processing\" aria-label=\"processing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Processing</h3>\n<p>デジタルアートに使えるソフトウェアとして最も有名なのは、Processing だと思います。</p>\n<p>Arduino と接続して図形を描画する用途にも使われたりします。</p>\n<p>参考</p>\n<ul>\n<li><a href=\"https://ja.wikipedia.org/wiki/Processing\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Processing - Wikipedia</a></li>\n<li><a href=\"https://qiita.com/RyoAbe/items/05573f8896a17d799fff\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Processingでデジタルアートに挑戦 - Qiita</a></li>\n</ul>\n<h3 id=\"p5js\" style=\"position:relative;\"><a href=\"#p5js\" aria-label=\"p5js permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>p5.js</h3>\n<p>Processing と並んで有名なのが、p5.js です。</p>\n<p>Web 上で p5.js のコーディングや作品の投稿ができる「OpenProcessing」というサービスもあるようです。</p>\n<ul>\n<li><a href=\"https://qiita.com/gohan_shin/items/2bc4eeca1d7fb3b83d5c\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ジェネラティブアートとp5.jsって何？ - Qiita</a></li>\n<li><a href=\"https://note.com/deconbatch/n/nc3821f71a65d\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">趣味としてのクリエイティブ・コーディング：102：OpenProcessing を使おう｜deconbatch｜note</a></li>\n</ul>\n<h3 id=\"その他-1\" style=\"position:relative;\"><a href=\"#%E3%81%9D%E3%81%AE%E4%BB%96-1\" aria-label=\"その他 1 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>その他</h3>\n<p>デジタルアートにつかえるソフトウェアやライブラリは、他にもたくさんあるようです。</p>\n<p>参考: <a href=\"https://blog.creative-plus.net/archives/8171\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">クリエイティブコーディングとは？メディアアート・インタラクティブアートなど音響・映像表現をする為のプログラミング環境のまとめ – Creative Plus</a></p>\n<h2 id=\"クリエイティブコーディング\" style=\"position:relative;\"><a href=\"#%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0\" aria-label=\"クリエイティブコーディング permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>クリエイティブコーディング</h2>\n<p>Processing や p5.js を使ったりして、プログラミングで絵やアニメーションを作ることを「クリエイティブコーディング」と呼びます。</p>\n<p>参考: <a href=\"https://note.com/reona396/n/n7a0ee0205c48\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">クリエイティブコーディングとはどんな活動で、どんな所が面白いのか語らせてくれ！｜reona396｜note</a></p>\n<p>クリエイティブコーディングをしてみたい場合は、書籍や以下のページなどが参考になりそうです。</p>\n<ul>\n<li><a href=\"https://zenn.dev/baroqueengine/books/a19140f2d9fc1a\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">クリエイティブコーディングの教科書</a></li>\n<li><a href=\"https://yoppa.org/mit-creativecoding19\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">yoppa org – クリエイティブコーディング 2019 (プログラミング II)</a></li>\n</ul>","fields":{"slug":"/posts/media-art-and-digital-art-overview","tagSlugs":["/tag/art/"],"autoRecommendPosts":["audio-video-streaming-data-basics","computer-graphics-first-step","image-file-format-basics","command-collection-for-binary-files"]},"frontmatter":{"date":"2021-12-23T06:00:11.003Z","description":"メディアアートやデジタルアートという単語を聞いたことはあったのですが、どんな意味なのかよく分かっていなかったので、改めて調べました。\nまた、特にデジタルアートに利用できるソフトウェア・ライブラリについても調べました。","tags":["art"],"title":"メディアアート・デジタルアートの概要と、利用できるソフトウェア・ライブラリ","socialImage":null,"recommendPosts":null}}},"pageContext":{"slug":"/posts/media-art-and-digital-art-overview"}},"staticQueryHashes":["251939775","3942705351","401334301"]}