This repository has been archived by the owner on Sep 27, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
曲線から音階に分割する処理の完成
- Loading branch information
Showing
7 changed files
with
130 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export const BAR_NUM = 8; | ||
export const NOTE_NUM = 4; | ||
export const SCALE_NUM = 7; | ||
|
||
export const WHOLE_NOTE = [1, 2, 4, 5, 6]; | ||
export const HALF_NOTE = [3, 7]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
export type Coordinate = { | ||
x: number; | ||
y: number; | ||
}; | ||
|
||
export type CurveInformationDto = { | ||
coordinates: Coordinate[]; | ||
length: number; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import paper from 'paper'; | ||
import styles from '@/styles/colors.module.scss'; | ||
import { Coordinate, CurveInformationDto } from '../dto/curve'; | ||
|
||
function handleMouseDown(event: paper.ToolEvent): paper.Path { | ||
const newPath = new paper.Path(); | ||
newPath.strokeColor = new paper.Color(styles.primaryColor); | ||
newPath.strokeWidth = 2; | ||
newPath.add(event.point); | ||
return newPath; | ||
} | ||
|
||
function handleMouseDrag(event: paper.ToolEvent, path: paper.Path | null) { | ||
if (path) { | ||
path.add(event.point); | ||
} | ||
} | ||
|
||
async function handleMouseUp(path: paper.Path | null): Promise<CurveInformationDto> { | ||
let curveInformation: CurveInformationDto = { coordinates: [], length: 0 }; | ||
|
||
if (path) { | ||
path.smooth(); | ||
const coordinates: Coordinate[] = path.segments.map((segment: paper.Segment) => ({ | ||
x: segment.point.x, | ||
y: segment.point.y, | ||
})); | ||
const length = path.length; | ||
|
||
curveInformation = { coordinates, length }; | ||
} | ||
|
||
return curveInformation; | ||
} | ||
|
||
export async function curveDraw(): Promise<CurveInformationDto> { | ||
let path: paper.Path | null = null; | ||
let curveInformation: CurveInformationDto = { coordinates: [], length: 0 }; | ||
|
||
return new Promise((resolve) => { | ||
const tool = new paper.Tool(); | ||
|
||
// イベントハンドラの呼び出し | ||
tool.onMouseDown = (event: paper.ToolEvent) => { | ||
path = handleMouseDown(event); | ||
}; | ||
|
||
tool.onMouseDrag = (event: paper.ToolEvent) => { | ||
handleMouseDrag(event, path); | ||
}; | ||
|
||
tool.onMouseUp = async () => { | ||
curveInformation = await handleMouseUp(path); | ||
|
||
resolve(curveInformation); | ||
}; | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { BAR_NUM, NOTE_NUM } from '../const'; | ||
import { Coordinate } from '../dto/curve'; | ||
|
||
export function splitCurve(coordinates: Coordinate[]): Coordinate[] { | ||
const resultCurve = Array.from( | ||
{ length: BAR_NUM * NOTE_NUM }, | ||
(_, i) => coordinates[Math.floor((i * coordinates.length) / (BAR_NUM * NOTE_NUM))], | ||
); | ||
|
||
return resultCurve; | ||
} |
30 changes: 30 additions & 0 deletions
30
src/app/draw/features/FreeDrawing/functions/intervalCreate.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { Interval, ScaleInterval } from '@/types'; | ||
import { Coordinate } from '../dto/curve'; | ||
import { HALF_NOTE, SCALE_NUM, WHOLE_NOTE } from '../const'; | ||
|
||
export function createInterval(curveCoordinates: Coordinate[]): Interval[] { | ||
const yBase = curveCoordinates[0].y; | ||
const yMax = Math.max(...curveCoordinates.map((c) => c.y - yBase)); | ||
const yMin = Math.min(...curveCoordinates.map((c) => c.y - yBase)); | ||
const yMaxAbs = Math.max(Math.abs(yMax), Math.abs(yMin)); | ||
|
||
const normalizedCurve = curveCoordinates.map((c) => ({ | ||
x: c.x, | ||
y: Math.abs((c.y - yBase) / yMaxAbs), | ||
})); | ||
const scaledCurveY: ScaleInterval[] = normalizedCurve.map((nc) => { | ||
return Math.floor(nc.y * SCALE_NUM) as ScaleInterval; | ||
}); | ||
|
||
const interval: Interval[] = scaledCurveY.map((scy) => { | ||
if (WHOLE_NOTE.includes(scy)) { | ||
return 2; | ||
} else if (HALF_NOTE.includes(scy)) { | ||
return 1; | ||
} else { | ||
return 0; | ||
} | ||
}); | ||
|
||
return interval; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters