feat: いろんな音を鳴らす

This commit is contained in:
Nebel 2020-12-29 19:43:57 +09:00
parent 33bc465182
commit 87e6bd8670

View file

@ -9,7 +9,7 @@ import {
Vector2, Vector2,
WebGLRenderer, WebGLRenderer,
} from "three"; } from "three";
import { Synth } from "tone"; import { Oscillator } from "tone";
import randomInt from "./randomInt"; import randomInt from "./randomInt";
import keyPosition from "./keyPosition"; import keyPosition from "./keyPosition";
import keyLayouts from "./config/keyLayouts"; import keyLayouts from "./config/keyLayouts";
@ -20,16 +20,17 @@ const scene = new Scene();
const camera = new PerspectiveCamera(); const camera = new PerspectiveCamera();
const grid = { colum: 14, row: 4 } as const; const grid = { colum: 14, row: 4 } as const;
const mouse = new Vector2(NaN, NaN); const mouse = new Vector2(NaN, NaN);
const panels = Array.from({ length: grid.colum * grid.row }, () => { const panels = Array.from({ length: grid.colum * grid.row }, (_, i) => {
const geometry = new PlaneGeometry(); const geometry = new PlaneGeometry();
const material = new MeshBasicMaterial({ opacity: 0 }); const material = new MeshBasicMaterial({ opacity: 0 });
const mesh = new Mesh(geometry, material); const mesh = new Mesh(geometry, material);
const note = `${"CDEFGAB"[i % 7]}${Math.floor(i / 7)}`;
mesh.userData.osc = new Oscillator(note, "square").toDestination();
return mesh; return mesh;
}); });
const renderer = new WebGLRenderer(); const renderer = new WebGLRenderer();
const canvas = renderer.domElement; const canvas = renderer.domElement;
const raycaster = new Raycaster(); const raycaster = new Raycaster();
const synth = new Synth({ oscillator: { type: "square" } }).toDestination();
function render() { function render() {
renderer.render(scene, camera); renderer.render(scene, camera);
@ -39,6 +40,11 @@ function vibrate() {
if ("vibrate" in navigator) navigator.vibrate(100); if ("vibrate" in navigator) navigator.vibrate(100);
} }
function tone(osc: Oscillator) {
osc.start();
osc.stop("+0.05");
}
function drawRect() { function drawRect() {
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
const [intersect] = raycaster.intersectObjects(panels); const [intersect] = raycaster.intersectObjects(panels);
@ -47,7 +53,7 @@ function drawRect() {
vibrate(); vibrate();
try { try {
// FIXME: Error: Start time must be strictly greater than previous start time. // FIXME: Error: Start time must be strictly greater than previous start time.
synth.triggerAttackRelease("C4", "16n"); tone(intersect.object.userData.osc);
} catch {} } catch {}
const color = pallet[randomInt(pallet.length - 1)]; const color = pallet[randomInt(pallet.length - 1)];
@ -102,7 +108,7 @@ function adjustPanelSize() {
panel.scale.set(width, height, 1); panel.scale.set(width, height, 1);
Object.assign(panel.position, { Object.assign(panel.position, {
x: width * ((i % grid.colum) - (grid.colum - 1) / 2), x: width * ((i % grid.colum) - (grid.colum - 1) / 2),
y: height * (-Math.floor(i / grid.colum) + (grid.row - 1) / 2), y: height * (Math.floor(i / grid.colum) - (grid.row - 1) / 2),
}); });
} }
} }