RSP

Canvas を何かを作ったらSNSに載せたくなる。 ということで、Canvasでのムービー録画のコードを確認しました。 録画はできたのですが、ガタガタしてます。。 ガタガタの改善策はおいおい確認します。 画面をクリック後、録画開始し 9 秒間録画して停止するプログラムです。 ↓ canvas_recording いろんなサイトを調べて作ったので、何がなんだかわかっていない部分もありますが、とりあえず良しとします。

初心者が「できたらかっこいい」と思うことの 1 つに React は入っているんじゃないでしょうか。 やっぱり私も「React できたらかっこいい！」と思ってしまいます。 Reactの基本 まずは、基本の基本から始めます。 React を使ってページ上に「Hello React」と表示させます。 まず、HTMLのheadに以下のコードを入れます。 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> HTMLのbodyの「Hello React」を入れる場所に以下を設置します。 <div id="root">wait...</div> #root を読み込みます。 let dom = document.querySelector('#root'); React.createElement で表示する内容を設定する。 →React.createElement(タグ名,属性,中に組み込まれるもの) let element = React.createElement('p', {}, 'Hello React'); ReactDOM.render で表示させる。 →ReactDOM.render(エレメント,DOM) ReactDOM.render(element, dom);

最近、Canvas を勉強しています。 かっこいい GenerativeArt を作ってみたいんですよね。 けど、JavaScript を理解していないので、常につまずいてます。 Canvas（JavaScript）で画像のダウンロード方法がわからなかったのですが、やっとできました。 すぐ忘れそうなので自分用のメモとして残します。 ▼ toDataURL このコードでダウンロードができました。 let a = document.createElement('a'); a.href = canvas.toDataURL('image/jpeg', 1.0); a.download = 'canvas-download'; a.click(); まだ、あまり理解できていません。。 公式含めいろんな記事を参考して、とりあえず動くようになりました。 少しずつ理解しようと思ってます。 ▼ location.reload ついでに画面をリロード（再読み込み）する方法もわかりました。 window.location.reload(); リロードボタンは便利ですね。 ▼ 使ってみた こんな感じの画像を作ってみました。 ブラウザみる コードはこちら↓ CanvasはちゃんとJavaScriptなので、JavaScriptの勉強をしなきゃいけないですね。。

Spotify のライブラリの spotipy を使いこなしたくて、勉強し始めています。 今回は、あるアーティストに関連している（似ている？）アーティストを取得する Module を使ってみます。 artist_related_artists(artist_id) このサイトを参考にしました。 Spotify API で楽曲情報やアーティスト情報を取得してみた 参考と言うか、ほぼ同じなのですが。。 違う部分は、出力を csv にしているところです。 ↓spotipy_artist_related.py 出力内容はこんな感じです。 基準となるアーティストは「Orbital」にしました。 Orbitalと関連するアーティストがちゃんと取得できていました。 ▼ コードの中身 まず、spotipyをインポートします。 import spotipy from spotipy.oauth2 import SpotifyClientCredentials 自分のIDを入れます。 client_id = 'CLIENT_ID' client_secret = 'CLIENT_SECRET' 認証します。 client_credentials_manager = spotipy.oauth2.SpotifyClientCredentials(client_id, client_secret) spotify = spotipy.Spotify(client_credentials_manager=client_credentials_manager) artist_related_artistsにアーティスIDを入れて、resultに入れます。 result = spotify.artist_related_artists('3csPCeXsj2wezyvkRFzvmV') resultの中身を取り出して、csvに書き出します。 with open('orbital.csv...

何でもかんでも、どんどん忘れてしまいます。 「人間は忘れていかないと生きるのがしんどいから忘れる能力がある」的なことをよく言われていて納得する部分もあります。 しかし、それにしても忘れるスピードと量がすごいです。 p5.js をやっていて「class」を使おうと思ったら、久しぶりすぎてやり方を忘れてしまったので再確認です。 30 個のcircleをclassで作る 円を同時に複数個を作るものを class を使って作ってみました。 ブラウザで見る ↓class-p5js.js ブラウザで見る クラスはコードをわかりやすくすることも、使用する1つの目的だと思うけど、なんか複雑になっている気がします。。 circle() - p5.js reference 

Blenderで作ったものをTouchDesignerで扱いたいと思いました。 しかし、いろいろ調べたのですが、方法が見つからなくて苦労しました。 基本的すぎて誰も記事や動画にしないのかもしれません。。 参考にした動画 TDSW Youtube Academyを参考にしました。 無事に完了して、以下の画像のようになりました。 手順 Blenderで作ったものをTouchDesignerで扱うための方法は以下の手順です。 １．Blenderで作ったものを「obj」形式でエクスポート ２．objファイルをTouchDesignerにドラッグ・アンド・ドロップする ３．配置したSOPの右側を右クリックしてGeometoryCOMPを置く ４．CameraCOMPを置く ５．LightCOMPを置く ６．renderTOPを置く。自動的にGeometoryCOMP、CamaraCOMP、LightCOMPとつながる。 これでBlenderで作ったものをTouchDesignerで扱えるようになります。 ちなみに 3Dを扱うときの画面分割方法は、 ・左にいつもの作業画面 ・右上にGeometory Viewer ・右下にTop Viewer を置くといいようです。 右下は、Top Viewerを選択した後、OutTOPのDisplayをオンにすると表示されます。

Python の勉強をしている時、dict 型の items()が出てきてよくわからなかった。 確認してみました。 サンプルとして、ビートルズの「アビーロード」の 6 曲目までを dict にして確認しました。 Abbey_Road = {'1': 'Come Together', '2': 'Something','3':'Maxwell\'s Silver Hammer', '4': 'Oh!Darling', '5':'Octopus\'s Garden', '6': 'I Want You(She\'s So Heavy)'} ▼ items まずは、items()です。 これで、すべての要素を取ってこれます。 for item in Abbey_Road.items(): print(item) ('1', 'Come Together') ('2', 'Something') ('3', "Maxwell's Silver Hammer") ('4', 'Oh!Darling') ('5', "Octopus's Garden") ('6', "I Want You(She's So Heavy)") 曲番とタイトルを別々にも取れます。 for num, title in Abbey_Road.items(): print(num, ':', title) 1 : Come Together 2 : Something 3 : Maxwell's Silver Hammer 4 : Oh!Darli...

BlenderでPythonを使って制作ができるそうです。 私は BlenderとPythonを勉強しているので、「2つを同時に勉強できるのはいいかも！」と思って取り組み出しました。 まずは、超基本的なコードです。 デフォルトのCubeを削除して、Scriptingに読み込んで実行すると新しいCubeが表示される。 import bpy bpy.ops.mesh.primitive_cube_add() Mesh を 3 つを並べる 3 つの Mesh を x 軸上に並べてみました。 Blenderの超基本的なMeshはプリミティブと呼ばれているようです。 なので、コードも「primitive_cube_add()」とプリミティブが入っています。 ↓ bpy.py コードの確認 まず、「bpy」モジュールをインポートします。 import bpy 今あるメッシュ（最初の立方体とか）を削除する。 for m in bpy.data.meshes: bpy.data.meshes.remove(m) 次は、3つのオブジェクト（Mesh）を追加します。 今回は立方体（cube）、モンキー（monkey）、UV 球（uv_sphere）にします。 他のMeshは こちらのページ（Mesh Operators） にあり。 bpy.ops.mesh.primitive_cube_add() bpy.ops.mesh.primitive_uv_sphere_add() bpy.ops.mesh.primitive_monkey_add() 追加したオブジェクトを入れるためのリストを作成する。 obj = [] オブジェクトを Mesh であるかどうかを確認して、Mesh であればリストに入れる。 for o in bpy.data.objects: if o.type == "MESH": obj.append(o) obj にちゃんと入っているか、念のため確認します。 print(obj) # [bpy.data.objects[...

GenerativeArt でかっこいいアートを作ってみたい。私の夢です。 p5.js とか TouchDesigner が有名ですが、Canvas はぜひマスターしたいと思ってます。 Canvas 基本 CanvasAPI のチュートリアルをみて作ってみました。 グレーの背景に赤い四角がある単純なものです。 ↓canvas.js CanvasAPIチュートリアル Canvasってp5.jsと違って、もろJavaScriptなので勉強になっていい感じですね。

私は音楽が好きなのですが、自分の好みを客観的に知りたいです。 客観的に知るためには、やはりデータ分析ですね。 どうやって音楽のデータを手に入れるのか。 SpotifyがAPIでデータを提供してくれています。 Spotify for Developers Web API それを使って、自分の好みの音楽を分析したいと思います。 SpotifyAPIからプレイリスト情報を取得する まずはプレイリストの情報を取得することから始めます。 spotipyというライブラリがあるので、それを使います。 spotipy こちらのページを参考にさせていただいてます。 【Sisense News】Spotify音楽データの分析① 私は毎週プレイリストを作っているので、そのプレイリストのデータを取得したいと思います。 ↓code これを実行するとcsvでダウンロードできます。 このcsvには、プレイリスト中のアーティスト・曲名・リリース日・曲の長さなどが入っています。 このコードはちょっとおかしい部分やエラーが出ていますが、一応ほしい情報は手に入りまいした。 今後Pythonを勉強しながらエラーをなくしていきたいと思います。 Spotifyのプレイリストデータをspotipyで取得したい https://t.co/AYsg9NvWXG — radiospj (@radiospj) January 19, 2022

以前、時計の針が動くものをp5.jsで作った のですが、コードが長くて冗長な感じになってしまいました。 もっと短くできるだろうと思い、やってみました。 コードをシンプルにする ブラウザで見る ↓clockhand.js ブラウザで見る コードをシンプルにするにはclassを使わないといけないと思いこんでいて、なかなかできませんでした。 classってどんな時に使えばいいのだろう？

以前、時計の針が動くものを Canvas で作った のですが、コードが長くて冗長な感じになってしまいました。 もっと短くできるだろうと思い、挑戦してみました。 コードをシンプルにする ブラウザで見る ↓clockhand_canvas.js ブラウザで見る 時計の針の動作を以下にまとめてみました。 function clockHand(rad, hand_length) { angle = (Math.PI / 180) * rad; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo( cx + Math.cos(angle) * hand_length, cy + Math.sin(angle) * hand_length ); ctx.stroke(); } そして、それぞれの針の数値はrenderの以下の部分に設定しています。 clockHand(new Date().getHours() * 30 - 90, 100); clockHand(new Date().getMinutes() * 6 - 90, 150); clockHand(new Date().getSeconds() * 6 - 90, 250); シンプルにしたつもりなのですが、おそらく全然シンプルじゃないですね。。 もっと勉強して、さらに改善できるようにします。

「ニューラルネットワーク」ってかっこいいですよね。 私はプログラマーでも数学者でもないので、ニューラルネットワークを扱うなんて夢のまた夢だと思ってました。 しかし、わりと簡単に使えるライブラリがあると知って、やってみました。 こんな本があったので「やれるかも！」と挑戦してみました。 まったく簡単ではなかったですが。。 まずは基本から まず、基本の基本です。 Google Colaboratoryで実行しています。 ↓networkx.py 最後の行を実行すると以下のような画像が出てきます。 この画像が出てきた時は感動しました。 すごいプログラマーや研究者になった気分になれます。 マスターできたらかっこいいし、データ分析に活用できてたら楽しそう。 複数のライブラリが絡んでくるのでマスターするのは時間がかかりそうですが、少しずつやっていこうと思います。