final reports

++Subproject commit 5cecd1eccf2cbab550329d1d89d8de28c78e9056

-import pygame
-import time
-
-pygame.mixer.init()
-test = pygame.mixer.Sound("test1.wav")
-while True:
-    test.play()
-time.sleep(2.0)

-import soundfile as sf
-import sounddevice as sd
-
-weight = 1.7
-
-data, fs = sf.read('test1.wav')
-sd.play(data * weight, fs, blocking=True)

+import { WaveGroup } from "./wavegroup.js";
+
+class App{
+    constructor(){
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        document.body.appendChild(this.canvas);
+
+        this.waveGroup = new WaveGroup();
+
+        window.addEventListener('resize', this.resize.bind(this), false);
+        this.resize();
+
+        requestAnimationFrame(this.animate.bind(this));
+    }
+
+    resize() {
+        this.stageWidth = document.body.clientWidth;
+        this.stageHeight = document.body.clientHeight;
+
+        this.canvas.width = this.stageWidth * 2;
+        this.canvas.height = this.stageHeight * 2;
+        this.ctx.scale(2,2);
+
+        this.waveGroup.resize(this.stageWidth,this.stageHeight);
+    }
+
+    animate(t){
+        this.ctx.clearRect(0,0,this.stageWidth,this.stageHeight);
+        this.waveGroup.draw(this.ctx);
+        requestAnimationFrame(this.animate.bind(this));
+    }
+}
+
+window.onload = () =>{
+    new App();
+}
\ No newline at end of file

+export class Point {
+    constructor(index, x, y){
+        this.x = x;
+        this.y = y;
+        this.fixedY = y;
+        this.speed = 0.03;
+        this.cur = index;
+        this.max = Math.random() * 100 +200;
+    }
+
+    update() {
+        this.cur += this.speed;
+        this.y = this.fixedY + (Math.sin(this.cur) * this.max);
+    }
+
+
+
+}
\ No newline at end of file

+*{
+    user-select: none;
+    -ms-user-select: none;
+    outline: 0;
+    margin: 0;
+    padding: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #ffffff;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+}
+
+button {
+    width:100px;
+    background-color: #f8585b;
+    border: none;
+    color:#fff;
+    padding: 15px 0;
+    border-radius:10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 20px;
+    margin: 4px;
+    cursor: pointer;
+}

+import {
+    Point
+} from './point.js'
+export class Wave {
+    constructor(index, totalPoints, color) {
+        this.index = index;
+        this.totalPoints = totalPoints;
+        this.color = color;
+        this.points = [];
+    }
+
+    resize(stageWidth, stageHeight){
+        this.stageWidth = stageWidth;
+        this.stageHeight = stageHeight;
+
+        this.centerX = stageWidth /2;
+        this.centerY = stageHeight /2;
+
+        this.pointGap = this.stageWidth/ (this.totalPoints - 1);
+        
+
+        this.init();
+
+    }
+    init(){
+        this.points = [];
+        for (let i = 0; i < this.totalPoints; i++){
+            const point = new Point(
+                this.index +i,
+                this.pointGap * i,
+                this.centerY,
+            );
+            this.points[i] = point;
+        } 
+    }
+    draw(ctx) { 
+        ctx.beginPath();
+        ctx.fillStyle = this.color;
+        let prevX = this.points[0].x;
+        let prevY = this.points[0].y;
+
+        ctx.moveTo(prevX,prevY);
+        for(let i = 1; i < this.totalPoints; i++){
+            if (i < this.totalPoints - 1){
+                this.points[i].update();
+
+            }
+            const cx = (prevX + this.points[i].x) / 2;
+            const cy = (prevY + this.points[i].y) / 2;
+
+            ctx.quadraticCurveTo(prevX, prevY, cx,cy);
+
+            prevX = this.points[i].x;
+            prevY = this.points[i].y;
+        }
+
+        ctx.lineTo(prevX,prevY);
+        ctx.lineTo(this.stageWidth,this.stageHeight);
+        ctx.lineTo(this.points[0].x,this.stageHeight);
+        ctx.fill();
+        ctx.closePath();
+    }
+}
\ No newline at end of file

+import{
+    Wave
+} from './wave.js'
+
+export class WaveGroup {
+    constructor(){
+        this.totalWaves = 3;
+        this.totalPoints = 6;
+
+        this.color = ['rgba(255,199,235,0.4)','rgba(255,146,199,0.4)','rgba(0,87,158,0.4)'];
+
+        this.waves = [];
+
+        for (let i = 0; i < this.totalWaves; i++){
+            const wave = new Wave(
+                i,
+                this.totalPoints,
+                this.color[i]
+            );
+            this.waves[i] = wave;
+        }
+    }
+    resize(stageWidth, stageHeight){
+        for (let i =0; i < this.totalWaves; i++){
+            const wave = this.waves[i];
+            wave.resize(stageWidth,stageHeight);
+
+        }
+    }
+    draw(ctx){
+        for (let i =0; i < this.totalWaves; i++){
+            const wave = this.waves[i];
+            wave.draw(ctx);
+        }
+
+    }
+}
\ No newline at end of file

+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"   />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+        <title>Haptic Recording</title>
+        <link rel="stylesheet" href="{{url_for('static', filename = 'style.css')}}">
+        <style>
+            #start {
+                width:100px;
+    background-color: #f8585b;
+    border: none;
+    color:#fff;
+    padding: 15px 0;
+    border-radius:10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 20px;
+    margin: 4px;
+    cursor: pointer;
+            }
+        </style>
+    </head>
+    <body>
+        <div style="text-align: center; padding-top: 10%;">
+            <h1>Haptic Data Recording</h1>
+            <p style="margin-top: 2%;">Subeen Kang & Jinhyeong Park</p>
+            <form method ="post" action="/record">
+                <button style="margin-top: 10%;" type="submit" id="start" > START </button>
+            </form>
+        </div>
+    <script type="module" src="{{url_for('static', filename = 'app.js')}}"></script>
+    </body>
+</html> 
\ No newline at end of file

+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"   />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+        <title>Haptic Recording</title>
+        <link rel="stylesheet" href="{{url_for('static', filename = 'style.css')}}">
+        <style>
+            #stop, #home {
+                width:100px;
+                background-color: #f8585b;
+                border: none;
+                color:#fff;
+                padding: 15px 0;
+                border-radius:10px;
+                text-align: center;
+                text-decoration: none;
+                display: inline-block;
+                font-size: 20px;
+                margin: 4px;
+                cursor: pointer;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div style="text-align: center; padding-top: 10%;">
+            <h1>Converting...</h1>
+            <h1 style="margin-top: 2%; color:#f8585b;"id="clock">00:00</h1>
+            <form method ="post" action="/stop">
+                <button style="margin-top: 10%;" id="stop" type="submit"> STOP </button>
+            </form>
+
+                <button style="margin-top: 10%; visibility: hidden;" id="home" type="button" onclick="location.href='/'"> HOME </button>
+
+        </div>
+    <script type="module" src="{{url_for('static', filename = 'app.js')}}"></script>
+    </body>
+    
+    <script>
+        var clockTarget = document.getElementById("clock");
+            var seconds = 0;
+            var miliseconds = 0;
+
+        function clock() {
+            clockTarget .innerText = `${seconds < 10 ? `0${seconds }`: seconds }:${miliseconds < 10 ? `0${miliseconds }` :miliseconds}`;
+            miliseconds = miliseconds +1;
+            if(miliseconds >99){
+            seconds = seconds +1;
+            miliseconds = miliseconds %100;
+            }
+        }
+
+        var inter;
+        function init() {
+            clock();
+            inter = setInterval(clock, 10);
+        }
+
+        function stopit(){
+            clearInterval(inter);
+            document.getElementById("home").style.visibility="visible";
+            document.getElementById("stop").style.visibility="hidden";
+        }
+
+        document.getElementById('stop').addEventListener('click', stopit);
+
+        init();
+    </script>
+</html>
\ No newline at end of file

+<!DOCTYPE html>
+<html>
+    <body>
+        <div style="text-align: center;">
+        <video controls width="300">
+            <source src="{{url_for('static', filename = 'output.mp4')}}" type="video/mp4"></source>
+            이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+    </video>
+      
+</div>
+    </body>
+</html>
\ No newline at end of file