Vladislav_Postnikov
/
HomeWork1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="container">
		
	</div>
	<div id="container1">
		
	</div>
	<div id="container2">
		
	</div>

	<style>
		img{
			width: 200px;
			height: 200px;
			padding-right: 10px;
		}
	</style>

	<script>
		function Controll(el,{value=50,min=0,max=100,minAngel=0,maxAngel=360,step=1,wheelSpeed=0.1}={}){

			const img=document.createElement('img');
			img.src='http://c1.asmer.fe.a-level.com.ua/1@3x.png';
			el.append(img);

			const ratio=(maxAngel-minAngel) / (max-min);
			const getAngel=()=>(value-min)*ratio+minAngel;

			this.setValue=newValue=>{
				if(newValue>max){
					newValue=max;
				}
				if(newValue<min){
					newValue=min;
				}
				value=newValue;
				img.style.transform=`rotate(${getAngel()}deg)`;

				if(this.onchange && typeof this.onchange==='function'){
					this.onchange(value);
				}
			}

			img.onmousewheel=e=>{
				const {deltaY} = e;
				const newValue = value+deltaY*wheelSpeed;
				this.setValue(newValue);
				e.preventDefault();
			}

			img.onclick=e=>{
				console.log(e,img.width);
				const {layerX}=e;
				const {width} = img;
				if(layerX>width/2){
					this.setValue(value+step);
				}else{
					this.setValue(value-step);
				}
			}

			const toDeg = rad => ((rad*180)/Math.PI+360+90)%360;
			let prevMouseAngel=null;

			img.onmousedown=e=>{
				const y=e.layerY-img.height/2;
				const x=e.layerX-img.width/2;
				prevMouseAngel=toDeg(Math.atan2(y,x));

				console.log(x,y,getAngel());
				e.preventDefault();
			}

			img.onmousemove= e =>{
				if(prevMouseAngel===null) return;
				const y=e.layerY-img.height/2;
				const x=e.layerX-img.width/2;
				let currentAngel=toDeg(Math.atan2(y,x));
				let moveAngelDiff=(currentAngel-prevMouseAngel);
				this.setValue(value+moveAngelDiff/ratio);
				prevMouseAngel = currentAngel;
			}

			this.getValue=function(){
				return value;
			}

			img.onmouseout=img.onmouseup=()=>{
				prevMouseAngel=null;
			}
			this.setValue(value);
		}	
		
		/*let volumeControl=new Controll(container,{value:50,min:0,max:100,minAngel:-90,maxAngel:90});
		volumeControl.onchange=value=>console.log(value);
		console.log(volumeControl.getValue());*/

		function setRGB(){
			document.body.style.background=`rgb(${red.getValue()},${blue.getValue()},${green.getValue()})`;
		}

		

		let audio=document.createElement('audio');
		container2.appendChild(audio);
		audio.src="Mania-Вьюга.ogg";
		audio.style.display=true;

		audio.volume=0.2;
		audio.controls=true;
		audio.autoplay=true;
		let time=audio.duration;

		audio.onended=function(){
			audio.remove();
		}

		function setVolume(){
			audio.volume=volumeControl.getValue();
		}

		function setSpeed(){
			audio.playbackRate=speedControl.getValue();
		}

		const red=new Controll(container,{min:0,max:255});
		red.onchange=setRGB;

		const green=new Controll(container,{min:0,max:255});
		green.onchange=setRGB;

		const blue=new Controll(container,{min:0,max:255});
		blue.onchange=setRGB;

		const volumeControl=new Controll(container1,{min:0,max:1,wheelSpeed:0.001,step:0.05});
		volumeControl.onchange=setVolume;
		const speedControl=new Controll(container1,{min:0.5,max:2,wheelSpeed:0.001,step:0.05});
		speedControl.onchange=setSpeed;	

	</script>

</body>
</html>