Home Explore Help
Sign In
Vladimir-Grabarev
/
A-level_homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

RGB krutilka done

Vladimir 3 years ago
parent
d36491a676
commit
e353b0ca14
4 changed files with 133 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      RGB krutilka/1619196773_mp3-high.mp3
  2. BIN
      RGB krutilka/1@3x.png
  3. 18 0
      RGB krutilka/index.html
  4. 115 0
      RGB krutilka/main.js

BIN
RGB krutilka/1619196773_mp3-high.mp3
View File


BIN
RGB krutilka/1@3x.png
View File


+ 18 - 0
RGB krutilka/index.html
View File 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <audio controls>
 
+            <source src="1619196773_mp3-high.mp3">
 
+        </audio>
 
+    
+    </div>
 
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 115 - 0
RGB krutilka/main.js
View File 

@@ -0,0 +1,115 @@
 
+let container1 = document.querySelector(".container");
 
+let audio = document.querySelector("audio");
 
+
 
+function Control(el, {value=0, 
+    min=0, 
+    max=100, 
+    minAngle=0,
 
+    maxAngle=360, 
+    wheelSpeed=0.05,
 
+    step=1}={}){
 
+
 
+console.log(step);
 
+
 
+const img = document.createElement('img')
 
+img.src   = '1@3x.png'
 
+el.append(img)
 
+
 
+const ratio    = (maxAngle - minAngle) / (max - min)
 
+const getAngle = () => (value - min) * ratio + minAngle
 
+
 
+this.setValue = newValue => {
 
+if (newValue > max)
 
+newValue = max
 
+if (newValue < min)
 
+newValue = min
 
+
 
+if (typeof this.onchange === 'function' && newValue !== value)
 
+this.onchange(newValue)
 
+
 
+value = newValue
 
+
 
+img.style.transform = `rotate(${getAngle()}deg)`
 
+}
 
+
 
+img.onmousewheel = (event) => {
 
+const {deltaY} = event
 
+//console.log(deltaY)
 
+this.setValue(value  + deltaY * wheelSpeed)
 
+event.preventDefault()
 
+}
 
+
 
+img.onclick = (event) => {
 
+const {layerX} = event
 
+if (layerX < img.width/2)
 
+this.setValue(value  -step)
 
+else
 
+this.setValue(value  +step)
 
+event.preventDefault()
 
+}
 
+
 
+const event2Deg  = event => {
 
+const {layerX, layerY} = event
 
+const {width, height}  = img
 
+const x = layerX - width/2
 
+const y = height/2 - layerY 
+
 
+//console.log(x, y, width, height)
 
+
 
+return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
 
+}
 
+
 
+let prevAngle = null
 
+
 
+img.onmousedown = (event) => {
 
+prevAngle = event2Deg(event)
 
+}
 
+
 
+img.onmousemove = (event) => {
 
+if (prevAngle === null) return
 
+
 
+const currentAngle = event2Deg(event) 
+const deltaValue = (prevAngle - currentAngle) / ratio 
+//console.log(prevAngle - currentAngle, deltaValue)
 
+this.setValue(value  +deltaValue)
 
+prevAngle = currentAngle
 
+event.preventDefault()
 
+}
 
+
 
+img.onmouseup = (event) => {
 
+prevAngle = null
 
+}
 
+
 
+
 
+this.setValue(value)
 
+this.getValue = () => value
 
+}
 
+
 
+
 
+
 
+const volumeControl  = new Control(container1, {value: 0.5, 
+                              min: 0, 
+                              max: 1, 
+                              minAngle: -90, maxAngle: 90, step: 0.1})
 
+
 
+volumeControl.onchange = () => audio.volume = volumeControl.getValue(); //на каждый setValue
 
+//пришейте к нему тэг audio для громкости
 
+
 
+function setRGB(){
 
+    container1.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`
 
+}
 
+
 
+const red  = new Control(container1, {min: 0, max: 255})
 
+red.onchange = setRGB
 
+const green  = new Control(container1, {min: 0, max: 255})
 
+green.onchange = setRGB
 
+const blue  = new Control(container1, {min: 0, max: 255})
 
+blue.onchange = setRGB
 
+
 
+setRGB();
 
+
 
+////сделать три крутилки для RGB
 
+////и обновлять цвет блока/фона блока при вращении любой из трех
 
+
 
+//setTimeout(() => volumeControl.setValue(80), 2000)
 
+