Beatles, A Hard Day's Nightのイントロをフーリエ変換する
The Beatles, A Hard Day's Night をPythonでフーリエ変換してみる。
元曲の音はこちら
フーリエ変換したグラフがこちら
レベルの高い周波数をピックする。
- 150Hz D3(147) or D#3(156)
- 2380Hz D7(2349), 2370 and 2375 and 2361
- 1320Hz E6(1318) 1315Hz E6
- 264Hz C6(261)
- 3153Hz G7(3136)
- 2766Hz F7(2794)
- 110Hz A2(110)
- 300Hz D4(294)/D#3(311)
- 352Hz F4(349)
- 395Hz G4(392)
- 440Hz A4(440)
- 525Hz C5(523)
- 2640Hz E7(2637)
- 1052Hz C6(1046)
注目なのが、150Hzの音。一番大きい音となる。ポールのベースだと思われるが、D3とD3#の中間の音となる。これが、チューンをズラした音の可能性がある。もしくは、ジョージマーティンが被せたピアノの音の可能性もある。テープの回転を変えたピアノの音をミックスしたらしいから。
GarageBandで、レベルと高い音をMIDIにして音を合成してみる。E6,G6の音は高音すぎるので省略。100Hzも低音すぎるので省略。音色はHard Rock Guitarと、Picked Bass。音はこちら。
ここから、ベースの音を、Pitch Bend パラメータを使って、1/3半音上げた音がこちら。
この音の方が、不協和音的で、元に近いと思う。
プログラムは、こちら。
import sys
import scipy.io.wavfile
import numpy as np
import matplotlib.pyplot as plt
rate, data = scipy.io.wavfile.read('../Documents/hard.wav')
data = data / 32768
fft_data = np.abs(np.fft.fft(data))
freqList = np.fft.fftfreq(data.shape[0], d=1.0/rate)
plt.plot(freqList, fft_data)
plt.xlim(0, 3500)
plt.show()
球面上に６電子をランダムに配置した時の動き
球面上に６電子をランダムに配置した時の動きをThree.jsでシミュレートする
マウスドラッグで、XYZ軸が回転します。
3000行のjavascriptの直接貼り付けは、Hatena Blogではできませんでした。
結局、外部にjsファイルを置いてsrcタグで読み込みました。
球面上の古典電子シミュレーション結果をまとめる
球面上の古典電子シミュレーション結果をまとめてみる。
参考にしたのは、このページ
http://v.rentalserver.jp/morigon.jp/Repository/SUBI0/tok.html
まずは、電子を頂点とした多面体を、電子４個から３４個まで並べた結果
Morikawa氏の論文では１２面体まで結果が出ていた。
Morikawa氏は、「平衡配置のVoronoi図の境界線同士の交点」に新しい電子を配置する方法であったが、私の場合は「球面上のメッシュ上で、他の電子から最も離れた点」
に新しい電子を配置する方法を使っている。この方法は、根拠が薄いが、電子が増えた場合での計算時間が少なくてすむメリットがある。なので、結果の数が増やしやすかった。
次の画像は、球面上の電子が円との接点になるように配置した面を描いた図形。面と面の交線で面を切って多面体にしている。いわば、外側多面体(outer poluhedron)
球面にランダムに電子を置いた時の動きのシミュレーション
電子が球面上しか移動できない条件の下で、
複数の電子をランダムに配置した時の動きをシミュレートしたページを作った。
http://www.nariuchi.com/3d/randomj.html
WebGL/Three.js を使っています。
電子数が２だと中心を通る線分。
電子数が３だと中心を通る正三角形。
電子数が４だと正四面体。
ここまでは、思い描いた通りの結果なのです。
電子数が６だど正八面体に、なる事が多い。
電子数が８だと正六面体にならない。
電子数が１２だと正二十面体に、なる事が多い。
いろいろ研究していきます。
Three.js サンプルのまとめ
これまでのサンプルをまとめてみた。
円柱、Ambient color、アニメーション、ブログ埋め込みを使っている。
ソースは、こちら、
var ThreeCanvas = document.getElementById("ThreeCanvas");
var Width = ThreeCanvas.clientWidth;
var Height = ThreeCanvas.clientHeight;
var ThreeCamera = new THREE.PerspectiveCamera( 45 , Width / Height , 1 , 10000 );
var ThreeRenderer = new THREE.WebGLRenderer({antialias: true});
var ThreeScene = new THREE.Scene();
var Distance = 3000;
function onLoad() {
ThreeRenderer.setSize(Width, Height );
ThreeCanvas.appendChild(ThreeRenderer.domElement);
ThreeRenderer.setClearColorHex(0xFFFFFF, 1.0);
var light = new THREE.PointLight(0xFFFFFF, 1.0, 0);
light.position.set( 100, 100, 200 );
ThreeScene.add(light);
var ambientLight = new THREE.AmbientLight(0x888888);
ThreeScene.add(ambientLight);
ThreeScene.add(ThreeCamera);
ThreeCamera.position.z = 100;
ThreeCamera.up.x = 0;
ThreeCamera.up.y = 0;
ThreeCamera.up.z = 1;
var col = 0xff0000;
var mat = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
var cyl = createCylinder(0,0,100,10, 100,100,0,10, col, false);
ThreeScene.add(cyl);
cyl = createCylinder(0,0,100,10, -100,100,0,10, col, false);
ThreeScene.add(cyl);
cyl = createCylinder(0,0,100,10, 100,-100,0,10, col, false);
ThreeScene.add(cyl);
cyl = createCylinder(0,0,100,10, -100,-100,0,10, col, false);
ThreeScene.add(cyl);
cyl = createCylinder(100,100,0,10, -100,100,0,10, col, false);
ThreeScene.add(cyl);
cyl = createCylinder(100,100,0,10, 100,-100,0,10, col, false);
ThreeScene.add(cyl);
cyl = createCylinder(100,-100,0,10, -100,-100,0,10, col, false);
ThreeScene.add(cyl);
cyl = createCylinder(-100,100,0,10, -100,-100,0,10, col, false);
ThreeScene.add(cyl);
window.requestAnimationFrame(loop);
}
function loop() {
Distance -= 5;
ThreeCamera.position.x = Distance;
ThreeCamera.position.z = 0.1*Distance;
ThreeCamera.lookAt( {x:0, y:0, z:85 } );
ThreeRenderer.clear();
ThreeRenderer.render(ThreeScene, ThreeCamera);
window.requestAnimationFrame(loop);
}
function createCylinder(x0,y0,z0,r0, x1,y1,z1,r1, col, open)
{
var v = new THREE.Vector3(x0-x1, y0-y1, z0-z1);
var len = v.length();
var material = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(r0, r1, len, 0, 0, open), material);
cylinder.overdraw = true;
if (len > 0.001) {
cylinder.rotation.z = Math.acos(v.y/len);
cylinder.rotation.y = 0.5*Math.PI + Math.atan2(v.x, v.z);
cylinder.eulerOrder = 'YZX';
}
cylinder.position.x = (x1+x0)/2;
cylinder.position.y = (y1+y0)/2;
cylinder.position.z = (z1+z0)/2;
return cylinder;
}
onLoad();
Three.js をブログに埋め込む
ブログに直接 Thee.js を埋め込んでみた。
<body onload="onload()"> は、使えなかった。
<div>の中に、JavaScript を埋め込んで、関数を呼べばよいみたい。
コードは、これ。HTMLファイルで保存すると、ブラウザで開けます。
ブログに組み込む時は、htmlとbodyの部分を外してください。
<html>
<body>
<div id="ThreeCanvas" style="height:200px;width:200px;background-color:#eeeeee">
<script type="text/javascript" src="http://www.nariuchi.com/3d/Three.js"><script>
<script type="text/javascript">
<!--
var ThreeCanvas = document.getElementById("ThreeCanvas");
var Width = ThreeCanvas.clientWidth;
var Height = ThreeCanvas.clientHeight;
var ThreeCamera = new THREE.PerspectiveCamera( 45 , Width / Height , 1 , 10000 );
var ThreeRenderer = new THREE.WebGLRenderer({antialias: true});
var ThreeScene = new THREE.Scene();
var Theta = 0;
function onLoad() {
ThreeRenderer.setSize(Width, Height );
ThreeCanvas.appendChild(ThreeRenderer.domElement);
ThreeRenderer.setClearColorHex(0xFFFFFF, 1.0);
var light = new THREE.PointLight(0xFFFFFF, 1.0, 0);
light.position.set( 100, 100, 200 );
ThreeScene.add(light);
var ambientLight = new THREE.AmbientLight(0x888888);
ThreeScene.add(ambientLight);
ThreeScene.add(ThreeCamera);
ThreeCamera.position.z = 100;
ThreeCamera.up.x = 0;
ThreeCamera.up.y = 0;
ThreeCamera.up.z = 1;
var col = 0xff0000;
var mat = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
var box = new THREE.Mesh(new THREE.CubeGeometry(100,100,100), mat);
ThreeScene.add(box);
box.position.set(0,0,0);
window.requestAnimationFrame(loop);
}
function loop() {
Theta += 0.02;
ThreeCamera.position.x = 300*Math.sin(Theta);
ThreeCamera.position.y = 300*Math.cos(Theta);
ThreeCamera.lookAt( {x:0, y:0, z:0 } );
ThreeRenderer.clear();
ThreeRenderer.render(ThreeScene, ThreeCamera);
window.requestAnimationFrame(loop);
}
onLoad();
//->
</script>
</div>
</body>
</html>
最もシンプルな、Three.js サンプル
一番シンプルは、Three.js のサンプルを書いてみた。
リンクは、http://www.nariuchi.com/3d/simple.html
HTMLのコードは、こちらの４０行
<head>Simplest Three.js sample</head>
<body onload="onLoad()">
<div id="ThreeCanvas" style="height:400px;width:400px"></div>
</body>
<script type="text/javascript" src="Three.js"></script>
<script type="text/javascript">
function onLoad() {
var ThreeCanvas = document.getElementById("ThreeCanvas");
var width = ThreeCanvas.clientWidth;
var height = ThreeCanvas.clientHeight;
var ThreeRenderer = new THREE.WebGLRenderer({antialias: true});
ThreeRenderer.setSize(width, height );
ThreeCanvas.appendChild(ThreeRenderer.domElement);
ThreeRenderer.setClearColorHex(0xFFFFFF, 1.0);
var ThreeScene = new THREE.Scene();
var light = new THREE.PointLight(0xFFFFFF, 1.0, 0);
light.position.set( 100, 100, 200 );
ThreeScene.add(light);
var ambientLight = new THREE.AmbientLight(0x888888);
ThreeScene.add(ambientLight);
var ThreeCamera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );
ThreeScene.add(ThreeCamera);
ThreeCamera.position.x = 100;
ThreeCamera.position.y = 150;
ThreeCamera.position.z = 500;
var col = 0xff0000;
var mat = new THREE.MeshLambertMaterial({ color:col, ambient:col, opacity:1.0 });
var box = new THREE.Mesh(new THREE.CubeGeometry(100,100,100), mat);
ThreeScene.add(box);
box.position.set(0,0,0);
ThreeRenderer.clear();
ThreeRenderer.render(ThreeScene, ThreeCamera);
}
</script>
</html>
