synthing

a waveform sequencing synth on the web
Log | Files | Refs | Submodules

index.js (1767B)

      1 import { h, Component} from 'preact';
      2 import UpdateOnResize from '../UpdateOnResize/';
      3 
      4 const drawCircle = (canvas, percent) => {
      5     const context = canvas.getContext('2d');
      6     const color = '#ff735e';
      7 
      8     const width = canvas.width;
      9     const radius = canvas.width / 2;
     10     const lineWidth = radius / 3;
     11     const innerRadius = radius - lineWidth / 2;
     12     context.lineWidth = lineWidth;
     13     context.clearRect(0,0, width, width);
     14     context.beginPath();
     15     context.strokeStyle = "#00000011";
     16 
     17     if (percent === 0) {
     18         context.arc(radius, radius, innerRadius, 0, 2 * Math.PI);
     19         context.stroke();
     20     }
     21     else {
     22         const begin = -(Math.PI * 3/2);
     23         const end = 2 * Math.PI * percent - Math.PI * 3/2;
     24 
     25         context.arc(radius, radius, innerRadius, end, begin);
     26         context.stroke();
     27         context.beginPath();
     28         context.strokeStyle = color;
     29         context.arc(radius, radius, innerRadius, begin, end);
     30         context.stroke();
     31     }
     32 
     33 }
     34 
     35 export default class Wheel extends Component {
     36     draw = () => {
     37         drawCircle(this.wheelRef, this.props.percent);
     38     }
     39 
     40     componentDidMount() {
     41         this.draw();
     42     }
     43 
     44     componentDidUpdate() {
     45         this.draw();
     46     }
     47 
     48     render() {
     49         const diameter = 36;
     50         const scaledDiameter = diameter * window.devicePixelRatio;
     51         return (
     52             <UpdateOnResize action={this.forceUpdate.bind(this)}>
     53                 <canvas
     54                     class="wheel"
     55                     height={scaledDiameter}
     56                     width={scaledDiameter}
     57                     style={`width:${diameter}px; height: ${diameter}px;`}
     58                     ref={(ref) => {this.wheelRef = ref}}
     59                 ></canvas>
     60             </UpdateOnResize>
     61         );
     62     }
     63 }