Easel | INERTIA. | Latest Arts. 2019年のデイリーコーディングを振り返る - 日常の進捗. はじめに デイリーコーディングについては，過去にこのようなエントリを書きました． takawo.hatenablog.com デイリーコーディングは「毎日コーディングする習慣」を指す造語で，時間ややり方については，明確な定義を設けていません．自分なりに考えて，今は「日々の生活の中で，少しでも時間をとって自分のためにコードを書く習慣を続けること」というふうに考えています．そして，この活動を少しでも誰かと共有し，コードを日々書くことで得られる楽しさを伝えていきたいと思っています． 僕は2015年の9月からの約4年，毎日短いコードを書く習慣を続けています．そして，今年2月に行われたProcessing Community Day 2019に参加したあとから，書いたコードを公開するようになりました．今回のエントリでは，コードを公開し始めて変わったこと，そこで得られた発見についてまとめていこうと思います．誰かの役に立つかもしれないし，自分の1年の振り返りにもなるという，いわゆる一石二鳥を狙っていきます．
デイリーコーディング公開以前 コードを公開する以前にやっていたデイリーコーディング（当時はそんな呼び方もしていませんでしたが）では，基本的に「少しでもコードに触れられればOK」，「自分のなかで何かひとつでも発見があればOK」という観点で習慣を続けていました．それはある種，非常に内省的にコードを書くことでした．エディタを開いてコードを書くその行為自体は，今やっていることとそれほど変わりはありません． 一方で，書いたコードを振り返ることはあまりしませんでした．コード自体もチュートリアルやリファレンスといった誰かのコードを探して，それを書き写したりしていました．それ自体は悪いことでもありませんが，過去に書いたコードから派生して何かを作るということもあまりしませんでした．今思うと，それはとても「もったいない」ことでした．なぜならそこにコードと自分，他者と自分の対話がなかったからです． #Everydays の先駆者 そういった前提から公開すると決めた一方で，何か展望を持っていたわけでもなく，ぼんやりと「せっかくやっているんだったら，書いてるものが多少未熟だとしても，公開してもいいのかもしれない（そもそも見返してないし）」くらいの見通しでスタートしたことも記録しておこうと思います． 1. 2. 3.
おかず｜note. Data made insightful, effective & beautiful through visualization | Visual Cinnamon. 永松 歩 | Ayumu Nagamatsu. 括弧について. Music Theory Workshop Japan | 音楽理論を効率的に学習する方法がわかるサイト. P5er のための Tumblr のすすめ : だらっと学習帳. Processing Advent Calendar 2015 参加記事 Tumblr というサービスをご存知でしょうか。 画像や文章などをスクラップできるブログのようなサービスです。 様々なブログをフォローし、流れてくるコンテンツをお気に入り登録(スキ！ 機能)したり、 Twitterのリツイートのような機能である「リブログ」を行うことで、 「このコンテンツにグッときた！」 という気持ちを記録することができます。 P5er こと Processing ファンにこそTumblrをすすめたい！ Tumblrでスケッチを閲覧してみよう Tumblrには記事ごとにタグをつけることができます。 この他、Processingに関連するタグとしては以下が挙げられます。 Tumblrにスケッチを投稿してみよう 自分でもTumblrにブログを持ちたくなった、あるいはすでに持っているというP5erは、 じゃんじゃんスケッチを投稿してみましょう。 GIFアニメーションを使用している場合、サイズが2MB以下、幅が540ピクセル以下であることを確認します。 とあります。 P5erにオススメしたいTumblrブログ 見ているだけで勉強になる！ Making Things シンプルな色と形が特徴のスケッチが多数。 THE PROJECT — Dear Data. 日常をインフォグラフィックで文通する、2人の記録｜WIRED.jp. 1/32ポサヴェックの愚痴を描いたインフォグラフィック。 愚痴の対象が誰かによって、色分けされている。 2/32 3/32ルピは、楽譜のように愚痴をヴィジュアライズした。 愚痴の対象は音符で表現。 4/32 5/32ポサヴェックの、1週間分の携帯電話の使用状況を記録したインフォグラフィック。
それぞれの色が、どんな目的で使ったかを示している。 1日を構成する数字は、「時間」「分」「秒」だけではない。 2人のインフォメーション・デザイナー、ニューヨークに住むジョルジア・ルピとロンドンに住むステファニー・ポサヴェックは、そんな日常のデータに注目して、風変わりな文通を始めた。 「わたしたちがやっていることは、個人的な記録作品に近いものです」とルピは語る。 ヴィジュアライゼーション、とひと言で言っても、ふたりのスタイルの違いは明らかだ。 このプロジェクトは「Dear Data」と名付けられ、ふたりは1年間にわたってウェブサイトにインフォグラフィックを公開していくという。 関連記事：インフォグラフィック作成の秘訣. Processingクイックリファレンス. The Coding Train. The Heptapod language. プログラミングをこれから勉強する人たちへ - Neareal. Last-modified: Wed, 17 Jul 2013 19:29:51 HAST Counter:9159 Today:8 Yesterday:3 Online:9 はじめに この文章はプログラミングに興味はあるけど知識のない、中高生以上の方を対象にしています。 内容は「プログラミングを勉強したいけど、何をしてよいのか分からない人」や「Processingに興味がある人」に、「Processingは何が良いのか」「Processingとは何か」を伝えるためのものです。 すごく長い文章ですが、できるだけ簡単な言葉で書いています。 何か新しいことを勉強するためには、大変な苦労をしなければならないことを私は知っています。 またプログラミングを勉強したことがない人にとって、何から始めたら良いのか分からない、という問題が、非常に大きな題になっていることも知っています。 プログラムとプログラミング言語って これを読んでいて、プログラミングをこれから勉強したい、と思っている人の多くは、プログラミングについて、ちょっとだけ情報を持っているんだと思います。 そしてプログラムを作るためには、良くわからない難しい文字をたくさん書いていくものだ、と知っているかもしれません。
多くのプログラミング言語とProcessing もしかしたらプログラミング言語にはいろいろな種類があることを、あなたは知っているかもしれません。 もしもプログラミング言語に沢山の種類があることを知らなかったなら、あなたはこう思うかもしれません。 「Processing」はプログラムを書くためのプログラミング言語の1つです。 次のような場面を想像してください。 Processingの良いところ 準備がとても簡単 Processingは、プログラミングを勉強するための準備が手早く簡単にすみます。 Processingは、料理をするために必要な道具が一つの道具箱にまとめてあって、その道具箱のフタを開けるだけでプログラムを書き始めることができます。
見た目ですぐに結果を確認できる 多くのプログラミング言語の入門書では、ただ文字を表示したり、コンピュータに足し算や引き算の計算させてみたりします。 Processingを勉強するまでの不安 「Processingの良いところ」では、Processingがとても素晴らしいもののように紹介しました。 おわりに. Processingをはじめよう | 東京上野のWeb制作会社LIG. Work — FutureDeluxe. FutureDeluxe — Design, Technology & Moving Image. Robert Hodgin. Zenbullets. 100 Abandoned Artworks [Processing] - Last piece uploaded! | 100 artworks by @zenbullets. Processing に入門してみた話. p5.js入門 (全14回) デザインとプログラミング 2018 - yoppa org. Processing 学習ノート. Processingのショートカット. Processing 1.0 _ALPHA_ » Reference.
Size() (サイズ) ; (セミコロン) = (アサイン) () (括弧) , (コンマ) // (コメント) /* */ (マルチラインコメント) void ボイド setup()（セットアップ） loop()（ループ） new（新規） {} (波括弧) [](配列アクセス) . (ドット) width（幅） height（高さ） framerate()（フレームレート） delay()（ディレイ） smooth()（スムーズ） noSmooth()（スムーズなし） cursor()（カーソル） noCursor()（カーソルなし） save()（セーブ） saveFrame()（フレーム保存） Primitive（基本） int（整数） float（浮動小数点数） char（文字） byte（バイト） boolean（ブーリアン） color（色） Composite（構成） String（ストリング） Array（配列） Object（オブジェクト） Conversion（転換） int()（整数） float()（浮動小数点数） char()（文字） byte()（バイト） Parsing（変換） splitInts()（整数分解） splitFloats()（浮動少数点分解） splitStrings()（文字分解） join()（結合） sort()（ソート） Formatting （形式化） nf() Relational Operators （関係演算子） > (～より大きい) < (～より小さい) >= (以上) <= (以下) == (等価) !
Iteration （反復） while()（whileループ） for()（forループ） Conditionals （条件） if()（if構文） else（else構文） Logical operators （条件） || (論理和) && (論理積) ! 2D Primitives （２次元基本） point() （点） line()（線） triangle()（三角形） quad()（四角形） 3D Primitives （３次元基本） box()（箱） sphere()（球） Stroke attributes （ストローク特性） strokeWeight()（ストロークの太さ） ゼロから学べるProcessing入門サイト : P5 Code School. KLab Creative Advent Calendar 2018 - Adventar. ジェネラティブアートを始めよう｜なめらかサンショウウオ｜note. 大学の授業で Processing を取り入れた話 : だらっと学習帳. Processing Advent Calendar 2014 参加記事 私は現在、大学院の修士1年なのですが、 大学院生になるとティーチングアシスタントといって、 先生の補助として仕事を請け負うという活動を行います。
テストの監督や答案の採点、あるいは実験の補助などが主な内容なのですが、 私の指導教官がプログラミングの授業の担当ということで、 その授業で教壇に立つことになりました。 授業内容はもちろんProcessing(+α)です。 対象は、学部2年生のプログラミング演習の授業と、 学部1年生の情報リテラシー実習という授業です。 学部2年生の授業について授業の目的と内容 学部2年生前期に「プログラミング演習」という必修授業が行われます。 授業の内容としては、アルゴリズムの授業で学習した各種ソートを実装するというものです。 また、受講生は1年生後期にC言語の基本的な使い方に関する授業を受けています。 Processingをどのように取り入れたか 毎週の授業の冒頭に、Processingについての説明を行いました。 学期末の試験のかわりとして、Processingの課題に取り組んでもらいました。 受講生の取り組み 受講生はProcessingの解説について真剣に聞いてくれたと思います。 学期末の課題では、ゲームを制作した受講生が多かったように思います。 Processingの活用 「データの可視化」についてProcessingを試験的に利用しました。
縦軸に日付、横軸に時間を取り、提出回数を記載しました。 また、提出された課題の合否についても可視化しました。 左に並んでいる数字は問題番号で、緑の領域は合格した回数、赤の領域は不合格だった回数を示しています。 学部1年生の授業について授業の目的と内容 学部1年生前期で「情報リテラシー実習」という必修授業が開かれます。 学期末に、プログラミング学習の導入としてProcessingを紹介しました。 大学に入学して初めてのプログラミングの授業ということで、 まずはPDE(Processing開発環境)の導入から行い、 プログラミングの基本的な要素(分岐、繰り返し等)や Processing独自の文法や関数について解説しました。 指導教官からのコメント このように授業に取り入れたことに対し、指導教官にもお話を伺いました。 Processing入門 (全15回) Processing勉強会 #22. P5er のための Tumblr のすすめ : だらっと学習帳. Denkitribe(keijiro)さんのProcessingのスケッチが最高にクールなので紹介したい！ - karaage. [からあげ] プログラミングでお絵かきして遊ぶための50のアイディア - FAL 制作メモ. プログラミングでお絵かきする試みを続けるうちにスケッチが100個ほど溜まりました。 似たようなことをして遊んでみたい人のために、過去のスケッチを例に出しつつ、アイディアというかネタというか、そういうのを列挙してみます。 これはProcessing Advent Calendar 2018 - Qiitaの6日目の記事です。 遅刻！ 動きに着目する（基礎） [2] 速度・加速度を付けてみる Rectangle Microbes — FAL Works 画面上にいくつか物体を放って、それらが物理法則に従って動くようにします。
[4] 引力を適用してみる Gravitation - OpenProcessing 物理法則シリーズその３。 [6] イージングさせてみる Teleporting Dots — FAL Works 速度＆加速度をあたえて後はよろしく、というのとはまったく別のアプローチです。 イージングについては以前の記事でも書いています。 動きに着目する（応用） [8] 物理シミュレーションを頑張ってみる The Cloth-Like (3D phys. sim.) - OpenProcessing この例では、3D空間にて布のような物体の挙動を作ってみました。 物理っぽい方向でさらに進める余地はいろいろありますが（衝突とか剛体とか）、実装がどんどんめんどくさくなってくるので、既存の物理エンジンライブラリを活用するのもいいと思います。 [9] 曲線上で動かしてみる Bezier Fire - OpenProcessing ベジェ曲線に沿って流れるように動かします。 [10] 軌道を組み合わせて複雑にしてみる Orbit — FAL Works この作例、ふにゃふにゃした不規則な軌道に見えると思いますが、実は等速円運動しかやっていません。 [12] 整列させてみる Mass Game — FAL Works 多数の要素がいっせいにザッと整列したりばらけたりすると楽しい。 情報を視覚化する（抽象） [15] 構造を視覚化してみる Data Structures — FAL Works なぜか分かりませんが構造という概念が好きです。 [16] ネットワークを視覚化してみる Königsberg — FAL Works 任意のネットワークをごちゃごちゃしないようにうまく自動配置するのは結構めんどくさい。 文字で遊ぶ 未分類. Processing Advent Calendar 2018. Processing Advent Calendar 2018. クリエイティブコーディング学習の最適解としてのProcessingと，デイリーコーディングのススメ - 日常の進捗. これはProcessing Advent Calendar 2017 - Qiitaの21日目の記事です。
Advent Calendarを通じて「プログラミングを通じて個人が表現する文化」がもっと盛り上がったら良いなと思ったので，思い立って勢いで書いてみることにしました．このエントリの内容は大きくは以下の2つです． クリエイティブコーディング環境として，Processingは日頃のアイデアを形にしたり，プログラミングの基礎であるアルゴリズムを学ぶ道具として最適決まった時間で短いコードでも良いから毎日書く「デイリーコーディング」は日々の成長が感じられてオススメ Processingで具体的に何か作ったものを紹介するというより，作るための取り組みとして毎日コードを書く習慣や，そのために出来ること（参考になる情報の紹介やモチベーションの維持など）について紹介できればと思います． クリエイティブ・コーディングとは Wikipediaによると， Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional. だそう．これをざっと訳すると，こんな感じです． クリエイティブ・コーディングは，機能的ではなく表現力のあるものを創造することを目指すコンピュータプログラミングの一種です．ライブビジュアルやVJ、ビジュアルアートとデザイン、アートインスタレーション、プロジェクションマッピング、サウンドアート、広告、プロダクトのプロトタイプなどの作成に使用されます。
ここで使われている「クリエイティブ」という言葉は，対立項としての「機能的で役に立つもの」を軽視するのではなく，より感覚的にプログラミングすることを通じて，表現やアウトプットすること自体のハードルを下げ，これまでにないものを生み出すことを狙いにするために用いられていると読めます． Processingとは Processing.org デイリーコーディングとは デイリーコーディング 10のコツ 0. ハードルを高く上げていた頃は，何らかの事情で途切れた場合に復帰する際，膨大なエネルギーが要りました． 1. 2. 1か月間、ほぼ毎日曲を作ってみました。 参考. Processing入門！音楽と同期するデジタルアートを作ってみた | TECH::NOTE｜テックノート｜テクノロジー学習やエンジニア転職に役立つ情報を発信しています. 「映像作品に興味がある」「プログラミングをはじめてみたい」 そう考えてはいるけれど、なかなかきっかけがなくてはじめられないとう方も多いのではないでしょうか？ そのような方々を代表して、ビジュアルアートに最適なプログラミング言語「Processing（プロセッシング）」で音楽と映像の同期に挑戦してみました。 この記事を読めば、初心者にもおすすめと言われるプロセッシングの魅力が理解できます。 プロセッシング(Processing）で音楽と映像を融合したい まずは、上記の動画をご覧いただきたいです。
これを自分でも「やってみたい」と思いませんか？ 上記の映像は、Ableton Liveにプロセッシングを同期させて制作されています。 音楽はすでにLogic Proで作った楽曲を準備済みです。 音楽や映像の制作に興味がある方や、ビジュアルアートをはじめてみたいと考えている方はぜひ参考にしてみてください。 プロセッシング（Processing）について まずは、映像制作が可能なプロセッシングの概要について紹介します。 オープンソースのビジュアルアートのIDE プロセッシング（Processing）は、オープンソースのビジュアルアートに適したプログラミング言語であり、IDE（統合開発環境）です。 ビジュアルアートに興味がある方だけでなく、プログラミングの入門にもおすすめ。 また、視覚的に結果を理解できることもプロセッシングが取り組みやすいポイントと言えるでしょう。 Processing.org プロセッシングとJavaの関係について プロセッシングはプログラミング言語ですが、Javaによって構築されたソフトウェアという見方もできます。 それでは、何がJavaと違うのかと言うと、Javaと比較すると手続きなどの記述が少なくとってもすっきりしたコードになります。 プロセッシングの用途はビジュアル・アートだけではない 上記の動画ではプロセッシングを利用して、Android向けのゲームアプリを制作しています。 また、プロセッシングはP5.jsを使って、Webページへの埋め込みも可能。 このようにプロセッシングの用途は、ビジュアルアートに限定されないのです。 Processingの活用事例を紹介 実際にプロセッシングでどのような作品が制作できるのか、気になる方も多いのではないでしょうか。 Search – Dribbble 円を表示させる. Processing歴１年になったのでこの１年間を振り返ってみた - Processing中毒者の嘔吐物.
２年前 P5歴は１年だけれども、P5に出会ったのは２年前のこと。 大学一回生の春学期のコンピュータ演習という授業で担当の教授に教えてもらった。 コンピュータ演習の授業は３クラスほどに分かれていて、担当の教授によって授業の内容が結構バラバラだったりする。 Processingを教えていたのは僕の担当の教授だけだったようで、今思えば運が良かった。 １年前 コンピュータ演習でProcessingを触った後、２回生になるまで全く使わなかった。 確かに入門書なんだけれど、本当の入門者にとっては説明が" 的確すぎ "た。 とりあえずこの本をじっくり読んでみた。 １０ヶ月前 Processingのスキルを磨こうと思い次に読んだのがこの本↓ これが大正解だった。 このスケッチはたった５０行のソースコードで出来ている。 9ヶ月前 色々作っていると、作品を公開したくなってきた。
8ヶ月前 Processingに限らず何かを作っていると、インプットしたい時期とアウトプットしたい時期があると思う。 The Nature of Code 高校では英語しか勉強していなかったので英語には自信があって（センター本番では筆記１８９点でした）単語を調べながらではあったけど普通に読めた。 これがまたいい本だった。 それから夏休みも終わって学校が始まったので、特に紹介できるようなことはしなかったけど、ちまちま色んな知識は溜め込んでいた。 2ヶ月前 一気に２ヶ月前まで飛ぶ。 アニメ「サイコパス」の第２期が終わっていたと思う。 最近 春休みが終わってからすぐに次のアイデアが出てきて作ったのがコレ↓ 我ながら最高に美しい作品だと思う。 縦横等間隔にノード（点）を配置して、そのノードを格子状にバネで繋ぐ。 終わりに ここまで記事を読んで下さった方、ありがとうございます。 プログラミング初心者でも大丈夫！Processingでデジタルアートを作ろう | 東京上野のWeb制作会社LIG.