隅歩つ

書いて理解を深める

matplotlibで散布図を表示する

matplotlibで散布図を表示

散布図を使ってみたいと思いました。

大量のデータを扱う際に使えそうです。

matplotlibで散布図を表示しました。

データ作成

まず、matplotlibとpandasをインポートします。

import matplotlib.pyplot as plt
import random

xを100までで作って、yを100までのランダムな数を2つ作ります。

N=100
x=[i for i in range(N)]
y1=[random.randrange(N) for _ in range(N)]
y2=[random.randrange(N) for _ in range(N)]

最後に、散布図として表示します。

plt.scatter(x,y1)
plt.scatter(x,y2)
plt.show()

matplotlibで散布図を表示

無事に表示できました。

Pandasでcsvを読み込む

Pandasを使うとcsvが簡単に読み込めて操作ができそうだったので、やってみました。

まず、pandasをインポートします。

import pandas as pd

そして、read_csvcsvを読み込みます。

今回は私がSpotifyで作っているプレイリストのデータを利用します。

df=pd.read_csv('09weeks2022.csv')

これだけで読み込めました。かなり楽ですね。

初心者としては、簡単で安心しました。

コラムのindexを表示するにはcolumnsを使います。

df.columns

csvに必要ない列があったりします。

削除するには、上のcolumnsの列から不要な列を削除して、dfに上書きします。

今回の場合だと「Unnamed:0」を削除しました。

df=df[['name', 'album', 'artist', 'release_date', 'length', 'mode', 'popularity', 'danceability', 'acousticness', 'energy', 'instrumentalness', 'liveness', 'loudness', 'speechiness', 'tempo',
 'time_signature', 'valence']]

削除できました。

範囲選択する時は、ilocやlocを使います。

ilocを使ってみました。

df.iloc[0:3,4:15]

0~3行、4~14列を抜き出しました。

次は、項目を指定して抜き出します。

df_select=df[['name','artist','popularity','danceability','tempo']]

ソートする場合は、sort_valuesを使います。

df_select.sort_values('popularity')

その他

最初の3行を抜き出す場合

df.head(3)

最後の3行を抜き出す場合

df.tail(3)

列ごとのタイプを表示する場合

df.dtypes
# name                 object
# album                object
# artist               object
# release_date         object
# length                int64

shapeで何行、何列かわかります。

df.shape
# (8, 17)

indexでstart、stop、stepがわかります。

df.index
# RangeIndex(start=0, stop=8, step=1)

matplotlib の第一歩

私は Python 超初心者ですが、データ分析をしてみたいと思ってます。

調べてみたところ、データ分析には NumPy、Pandas、matplotlib は必須なようです。

ということで、まず、matplotlib を試したいと思います。

基本の基本ということで、簡単なグラフを作成しました。

手順&説明

(1)matplotlib をインストールする。

import matplotlib.pyplot as plt

(2)x 軸と y 軸の数字を設定する。

x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
y = [34, 32, 63, 38, 39, 45, 35, 6, 41, 43, 29, 37, 22, 24]

(3)表にする

plt.plot(x,y)
plt.show()

基本的なことはこれだけでした。

あと、折れ線に色や丸をつける場合は、以下のようにします。

plt.plot(x, y, marker='o', color='blue')

また、plt.show の前に以下を入れるとグリッドも付けれます。

plt.grid(color='0.8')

あと、グラフを表示したものが小さいです。

そのグラフサイズは、「plt.figure(figsize=(幅,高さ))」で調整できます。

plt.figure(figsize=(10,10))
plt.plot(x, y, marker='o', color='blue')
plt.grid(color='0.8')
plt.show()

matplotlib はまだまだ奥が深そうです。

Canvasの録画方法

Canvas を何かを作ったらSNSに載せたくなる。

ということで、Canvasでのムービー録画のコードを確認しました。

録画はできたのですが、ガタガタしてます。。
ガタガタの改善策はおいおい確認します。

画面をクリック後、録画開始し 9 秒間録画して停止するプログラムです。

この部分で録画することができました。

let stream = canvas.captureStream(25);
let recordedChunks = [];

let options = { mimeType: 'video/webm; codecs=vp9' };
mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(e) {
    if (e.data.size > 0) {
        recordedChunks.push(e.data);
        download();
    } else {
        console.log('error');
    }
}

setTimeout((e) => {
    console.log('stopping');
    mediaRecorder.stop();
}, 9000);

コードの全体はこちら↓

Canvas録画

いろんなサイトを調べて作ったので、何がなんだかわかっていない部分もありますが、とりあえず良しとします。

TouchDesigner の OP Create Dialogについて

TouchDesigner をやっていると、どの OP Create Dialog を選んだらいいのかわからなくなることがあります。

最初は使っているうちに覚えるだろうと楽観的に考えていました。

けど、ちゃんとわかっていたほうが楽なような気がしたのでまとめてみました。

ビジュアルクリエイターのためのTOUCHDESIGNERバイブル

「ビジュアルクリエイターのためのTOUCHDESIGNERバイブル」には以下のようにあります。

COMP(Component Operator)→その他
TOP(Texure Operator)→画像
CHOP(Channel Operator)→数字・配列
SOP(Surface Operator)→3DCG(形状)
MAT(Material Operator)→3DCG(表面)
DAT(Data Operator)→文字列・テーブル
Custom(Custom Operator)→ユーザオリジナル

ざっくり理解するにはこのくらいでいいですね。

けど、作業をするとちょっと少なく感じる。 もうちょっと深めたい。

Visual Thinking with TouchDesigner

「Visual Thinking with TouchDesigner」ではもうちょっと詳しく書かれています。

COMP

COMP(Component Operator)は以下のように書かれています。

プログラムの下地を作るようなオペレータがこちらに配置されています。 Window、UIなどの基本的な要素

なるほどな、という感じです。
さらに3つに分かれてます。

3D Objects

3D Objectsは3D環境を構築する基本的なオペレータになります。Camera・Light・Geoは3Dコンテンツを作る際には必須のオペレータです。それらはRender TOPと合わせて使われてます。

Panels

Panelsはユーザーインターフェイスの作成に使われます。デジタルサイネージやVJソフトなどでボタンやスライダーなどが必要になりますが、それらの要素がこちらになります。

Other

Otherはそれ以外の要素になりますが、結構重要なオペレータがこちらに配置されています。Baseはマクロやサブルーチンといった入れ物として使用されます。PanelsのContainerとも親しいのですが、こちらはインターフェイスとして使えません。
AnimationはAfterEffectsのようなアニメーションカーブが作成できます。Replicatorインスタンスのようなもので、あるオブジェクトを複製することが可能です。Windowsは外部モニタへの出力先を設定する時に使用します(Performモードで必要になります)。

TOP

TOP(Texture Operator)は以下のように書かれています。

2Dのグラフィック制御のためのオペレーター わかりやすく言うと2D画像処理を行うオペレータのカテゴリーになります。3D処理も最終的にはレンダリングを行い2Dとなるので、その後処理をこちらで行います。Photoshopのように画像加工やレイヤー合成などをこちらのオペレータで行います。

「3D処理も最終的には2D」とあって納得しました。
TOPは画像と説明されていることが多くて、なぜ画像なんだろう?とずっと思ってました。

CHOP

CHOP(Channel Operator)は以下のように書かれています。

数値を扱うオペレーター。外部データの簡易的な取得 数値として処理できるものや、デバイスからの信号を数値化して入出力するオペレータが揃っています。音の入出力もこちらになりますし、Kinectなどのセンサーからの値もまとめて処理することができます。他のオペレータの値をCHOPで数値化することも可能です。

あまりピンとこないですが、「信号を数値化して入出力する」ところだと覚えておきたいと思います。

SOP

SOP(Surface Operator)は以下のように書かれています。

3Dを扱うオペレーター TOPが2Dで、SOPが3Dと覚えてもらえれば大丈夫です。プリミティブなオブジェクト、BoxやSphereなどといった3Dモデルを作成したり、パーティクルのような複雑な3Dもこちらで生成することが可能となります。

TOP=2D、SOP=3Dですね。
この違いだけ、しっくりきます。

MAT

MAT(Material)は以下のように書かれています。

3Dの見栄えを扱うオペレーター 基本的に3Dと一緒に使用すると覚えておいてください。SOP、もしくはCOMPのGeoと一緒に使用することが多いです。その場合、Constant、Phong、Point Spriteなどと併用することが大半となります。GLSLオペレータで直接記述することも可能です。ただ、GLSLはバージョンとGPUに左右されるので、使用できないPC、OSも存在してしまいます。

私はMATを、3DのMaterialを設定すると覚えてます。

DAT

DAT(DATA)は以下のように書かれています。

外部データを扱うオペレーター データベース関係や外部デバイスとのやりとりが可能となるOperatorになります。一部CHOPと被るOperatorも存在します。OSC/Serialなどです。ただ、こちらの方がCHOPより深い設定が可能となります。インターネットとの連携もWebやWebSocketと絡めて行うことになります。

DATですが、私はまだ使ったことがないです。
けど、DATを使いこなすことでTouchDesignerがさらにおもしろくなるんだろうなと思ってます。

Custom

TOP、CHOP、SOP、およびDATを、C++で拡張したオペレーターを組み込めるエリア

今のところまったくわかりません。

satoruhiga.com

satoruhigaさんのサイトにもOP Create Dialogのことが、ものすごくわかりやすく載っていました。

この図のOP Create Dialogの説明が一番わかりやすいかもしれません。

SOPとCOMPが真ん中にあったり、GLSLとPythonC++の範囲、GPUとCPUの担当など、かなりスッキリする部分が多いです。

こんな図を書けるようになりたい!

以下のサイトにいろんな情報が載っています。

satoruhiga.com

yuuuha.hatenablog.com