趣味としてのクリエイティブ・コーディング｜deconbatch

趣味としてのクリエイティブ・コーディング：106：座標軸を回転（後編）

趣味としてのクリエイティブ・コーディング座標編、前回は rotate() で座標軸を回転させられることを学びました。同時に translate() を使うことで回転の中心位置を変えられることも学びました。今回はその translate() と rotate() で回転を自在に操る方法を極めましょう！前回の問題を例に考えてみよう前回の最後の問題、下記のような図を作るにはどうしたらよいか？これは、元の縦横に並べた四角形それぞれを 45度回転させればよさそうです。

趣味としてのクリエイティブ・コーディング：105：座標軸を回転（前編）

「趣味としてのクリエイティブ・コーディング座標編」、前回は translate() を使って座標の原点を移動させてみました。その中で translate() の基本的な使い方から複数回指定した場合の動き、 draw() の度に原点はリセットされるという注意点などを学びました。今回からは、座標が難しいと感じる大きな要素「回転」を 2回に分けてやりましょう。 p5.js のコードを例に説明しますが、Processing でも考え方は同様です。前回の問題の回答例その前に

趣味としてのクリエイティブ・コーディング：104：原点を移動してみよう

前回は p5.js や Processing での座標に慣れるため、いろいろ演習してみました。今回も OpenProcessing を使って演習を重ねていきましょう。 OpenProcessing の使い方はこちらの記事を参照ください。趣味としてのクリエイティブ・コーディング：102：OpenProcessing を使おう座標の原点とは今回は座標の原点を移動する演習をしましょう。ぜひ、読むだけではなく、コードを書いて試しながら進めてくださいね。😉 座標の原点は一

趣味としてのクリエイティブ・コーディング：103：y軸が逆！に慣れよう

趣味としてのクリエイティブ・コーディング座標編、p5.js や Processing での座標に慣れるため、今回は演習をしていきましょう。演習のコードは p5.js で、実行は Web 上で簡単に実行できる OpenProcessing を使いたいと思います。 OpenProcessing の使い方は前回の記事を参照ください。趣味としてのクリエイティブ・コーディング：102：OpenProcessing を使おう習うより慣れよ第一回で説明のとおり、p5.js や

趣味としてのクリエイティブ・コーディング：102：OpenProcessing を使おう

趣味としてのクリエイティブ・コーディング座標編、初回では p5.js や Processing での座標は「異常」なんだから難しくて当たり前ですよ、ということをやりました。この「異常」な座標の難しさを克服するため、これから演習を通して慣れていきましょう。演習のコードは p5.js で、実行は Web 上で簡単に実行できる OpenProcessing を使いたいと思います。まずはこの OpenProcessing を説明しますね。 OpenProcessing

趣味としてのクリエイティブ・コーディング：101：座標って難しい？

最近「座標でつまずいてクリエイティブコーディングやめた」的な話をいくつか耳にしました。確かに p5.js や Processing で使う座標は慣れが必要ですね。それもあって、このシリーズではなるべく座標には触れないようにしてきました。でも、いつまでも触れないわけにもいきません。ここからのシリーズで「座標」を克服してしまいましょう！なぜ「座標」は難しいのか？「点の位置を x軸と y軸上の値で表す」、これ言い方は硬いと思いますけど、言ってる中身はそんなに難しいわけ

趣味としてのクリエイティブ・コーディング：011：一緒に作例で楽しみましょう！

前回はこの図をお題に、どうやったら作れるかな？と考えながらコーディングして、見事に成功しました。「こういうのを作りたい」と思って、そのとおり作れるなんてすごいことですよ！やりましたね！今回は本シリーズの締めくくりとして、一緒にいくつか作例を作って楽しみましょう。プログラムの動かし方はシリーズ第一回目をご覧ください。なんか線が多くて、真ん中が太いやつ弓なりのカーブで真ん中を太く、そういうカーブを沢山並べてみたら面白いんじゃないでしょうか？まず、弓なりのカーブを

趣味としてのクリエイティブ・コーディング：010：数学が苦手でも楽しめる！

本シリーズの最初の頃にこういう作例をお出ししました。これはもう作れそうですよね。一緒にやってみましょうか。元のソースはこれを使いましょう。これをコピペして保存してください。 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script> </head> <body><script>// Creative C

趣味としてのクリエイティブ・コーディング：009：もう面倒な計算しなくていいの

コードをきれいに整理したので、変更するのがやりやすくなりました。どんどん変更して大暴れしちゃいましょう！本シリーズの趣旨は初回をご覧ください。思いつくままいろんなパターン前回のソースコードはこれでした。これを元に遊んでみましょう。 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script> </head>

趣味としてのクリエイティブ・コーディング：008：パズルはお好き？

プログラミングはパズルみたいなところがあります。マッチ棒を 2本動かして正方形を 4つにしてくださいとかなんとか、そんなパズルがお好きならきっとプログラミングも好きになると思いますよ。今回はそんなプログラミング自体の楽しさを知るプログラミング回です！さて、前回ソースコードを整理してこのようなコードになりました。 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p

趣味としてのクリエイティブ・コーディング：007：コードを整理！

今回はコードを整理しましょう。「趣味のクリエイティブ・コーディング」なのでコードは汚くても読みづらくても全然自由なんですが、読みづらいソースコードって書き間違いや勘違いを起こしたり、後から修正するのがやりづらかったりするんです。遊び場がジャングルになってしまって、枝にひっかかったり雑草に足を取られたりで遊びづらくなるって感じ。思いっきり駆け回れるように、ここらでちょっとソースコードを整理しましょう。本シリーズの趣旨は初回をご覧ください。 …というわけで整理しま

趣味としてのクリエイティブ・コーディング：006：色彩を操ろう！

前回でとても綺麗なカーブを描くことができましたね。今回はこれを元にしてまた楽しんでいきましょう。プログラムの動かし方はシリーズ第一回目をご参照ください。前回のソースは以下でした。 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script> </head> <body><script>// Creative

趣味としてのクリエイティブ・コーディング：005：ループと変数がわかれば何でもできる！

前回でループと変数の感覚がなんとなく掴めたんじゃないでしょうか。ループと変数が使えるようになれば、クリエイティブ・コーディングで何でも出来ますよ！え？サブルーチン？関数？再帰？クラスにメソッド、オブジェクト指向？要らない、要らない、そんなことまだ気にしなくていいです。そんなの知らなくても趣味のクリエイティブ・コーディングは出来ます。もちろん色々知っていれば、もっと楽しいことをもっと楽にできるようになります。でも、その前にまだまだ沢山楽しめることあり

趣味としてのクリエイティブ・コーディング：004：変数で遊んでみよう

前回、ループを使って新しいプログラムを作りました。 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script> </head> <body> <script>// Creative Commons CC0// sc004 趣味としてのクリエイティブ・コーディング：004：変数で遊んでみよう// 前回のプログラ

趣味としてのクリエイティブ・コーディング

記事一覧