From dabf5f067755f471d0b6568040a21f457a194470 Mon Sep 17 00:00:00 2001 From: robinszym <46560732+robinszym@users.noreply.github.com> Date: Thu, 10 Jan 2019 11:39:12 +0100 Subject: [PATCH] Add files via upload --- css/style.css | 75 +++++++ index.html | 83 ++++++++ js/index.js | 544 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 702 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/index.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7b5264d --- /dev/null +++ b/css/style.css @@ -0,0 +1,75 @@ +.wave-container { + display: flex; + justify-content: flex-start; +} + +#canvas{ + border: 2px solid #111111; + background-color: rgb(0, 0,35 ); + position: relative; + padding-left: 0; + padding-right: 0; + display: block; + +} +#radio{ + display: flex; + flex-direction: column; + + padding: 10px; + margin-top: 20px; + width: auto; + margin-left: auto; + margin-right: auto; +} + +.first-line { + margin-bottom: 20px; +} + +#radio input { + +} +#panel{ + position: relative; + box-shadow: 2px 2px 2px rgb(200 200 200); + width: 300px; + padding: 20px; + margin: 2px; + + +} + +#panel > * { + display: inline-flex; + padding-top:5px; +} + +.wave-container > *{ + +} + +.form-block { + display: flex; + flex-direction: column; + +} + +.btn input { + background-color: transparent; + border: #88EAA5 solid 3px; + padding: 10px; + border-radius: 20px; +} + +.btn { + padding: 10px; + font-weight: bold; +} + +.btn:hover input { + background-color: #88EAA5; + color: white; + border: #88EAA5 solid 3px; +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a506830 --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + WaveVisualisator (WV) + + + + + + + + + + + + + + +
+ +
+
+ +
+
+ +
+
+

Frequency

+ +
+
+

Amplitude

+ +
+
+

Decibel reference

+ +
+
+

Damping

+ +
+
+
+ Microphone + Wall + Sin +
+ +
+ Wave + Nothing + +
+ +
+
+
+ + + + + + + + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..75c5285 --- /dev/null +++ b/js/index.js @@ -0,0 +1,544 @@ +const micro_height=100; +const micro_width=100; +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +const SPEED= 50; +const AMPLITUDE=50; +const SIZE=1; +const NP=10; +const rigi=5; +const krigi=0.9; +const CLAMPED=1; +var DAMP=0.05; +var firstMic = 1; +var myId = 0; +var nbMicro = 0; +var l=Math.floor(canvas.height/NP); //length of a row +var midl=Math.pow(l,2)/2-l/2; +var r=1; +var redstyle=0; +var bluestyle= 0; +var tempx,tempy,tempvx,tempvy,i,b,j,k,f,v,vunx,vuny,vdeuxx,vdeuxy,diffun,diffdeux,average,self,start, mousedown,press,radioval,firstmic=0; +var tab=[]; +var tabuffer=[]; +var previoustab=[]; +var tabtaken=[]; +var tabsin=[]; + +frequency=document.querySelector("#freq"); +amplitude=document.querySelector("#gain"); +DB=document.querySelector("#db"); +damping=document.querySelector("#damp"); + +//////////////INITIALISATION//////// +function initialisation() { + + console.log("initialisation"); + for (i=0;il&&i&& i%l && (i%l)-l+1 && il*l-l-1){ + temp=up(i)+down(i)+left(i); + act=tab[i-l].active + +tab[i-1].active+tab[i+1].active; + } + if(i0){ + temp=up(i)+down(i)+right(i); + act=tab[i+l].active+tab[i-1].active+tab[i+1].active; + } + if(!act){act=1} + temp=(temp*(rigi-1)/(act*rigi)+(tab[i].z)*1/rigi)/2; + temp+=previoustab[i].z*1/2; + previoustab[i].z=temp; + } + tabuffer[i].z=temp; + } + } + for(i=0;i0){ + return temp; + } + else {return midl}; +} + +////////////RENDER/////////////////// +function render(){ + var xsize,ysize,xpos,ypos=10; + var up,right,diag=0; + var r,g,b,avr=0; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + for(i=0;i