var sel;

​

function setup() {

  createCanvas(400, 400);

  q = new Qtools();

 sel = select('#rangeValue');

}

​

class Qtools {

    constructor(type, name, args) {

        this.t = 0;

        this.dt = 0.005;

        this.Radius = 100;

        this.sizeA = 50;

        this.rangeValue = 0;

        this.doubleLeftValue = -50;

        this.doubleRightValue = 100;

        this.numberInputValue = 0;

​

        select('#rangeValue').input((e) => this.rangeValue=select('#rangeValue').value());

        select('#doubleLeftValue').input((e) => this.doubleLeftValue=select('#doubleLeftValue').value());

        select('#doubleRightValue').input((e) => this.doubleRightValue=select('#doubleRightValue').value());

        select('#numberInputValue').input((e) => this.numberInputValue=select('#numberInputValue').value());

​

    }

​

      report() {

        console.log(`t: ${this.t}`);

        console.log(`dt: ${this.dt}`);

        console.log(`Radius: ${this.Radius}`);

        console.log(`sizeA: ${this.sizeA}`);

        console.log(`rangeValue: ${this.rangeValue}`);

        console.log(`doubleLeftValue: ${this.doubleLeftValue}`);

        console.log(`doubleRightValue: ${this.doubleRightValue}`);

        console.log(`numberInputValue: ${this.numberInputValue}`);

    }

​

}

function draw() {

  background(220);

  ellipse(q.doubleLeftValue, q.doubleLeftValue, q.Radius, q.sizeA);

  q.t+=q.dt;

}