let mono;

let flame;

let locked = false;

let overDial = false;

let flameScale = 1;

let dia = 50;

let posx=50;

let posy=400;

let flicker=5;

let stove;

function preload(){

    mono = loadFont('robotoMono.ttf');

    stove = loadImage('stove.png');

}

function setup() {

  createCanvas(600, 600);

  frameRate(12);

}

​

​

​

​

function mousePressed(){

  if (overDial){

    locked = true;

  }

}

  function mouseDragged(){

    if (locked){

      posy = mouseY;

    }

    if (posy > 550 ){

      posy=550;

    }

    if (posy < 350){

      posy = 350;

    }

  }

function mouseReleased(){

  overDial = false;

  locked = false;

}

​

​

​

​

function draw() {

​

  background(255);

  textFont(mono);

  textSize(22);

  fill(180);

  noStroke();

  image(stove, 10,275);

  let d = dist(mouseX , mouseY , posx , posy);

  if (d < dia/2){

    overDial = true;

  }

///////////////////dial////////////////////////////////

  strokeWeight(6);

  stroke(0);

  fill(255,0,0);

  line(50 , 350, 50 , 550);

  noStroke();

​

  circle(posx , posy , dia);

  fill(0);

  // triangle(125 , 350 , 100 , 350 , 125 , 550);

    fill(0,0,205);

​

      text('flameSize = ' + flameScale*10,50,110);

​

  //////////////////////dial////////////////////////////

  flameScale = map(posy,550,350,0.2,1);

  flicker = map(posy, 550 , 350, 5, 50);

  let flameColour = map(flameScale, 0.2,1, 200,0);

  flame = new flames(width/2,height*9/10,flicker,255,flameColour,0);

  flame.create();

}

​

class flames {

  constructor(x,y,a,r,g,b){

    this.a=a;

    this.ax=0;

    this.ay=0;

    this.r=r;

    this.g=g;

    this.b=b;

    this.x = x;

    this.y = y;

  }

  create(){

    noStroke();

  this.ax=random(-this.a,this.a);

  this.ay=random(-this.a,this.a);

    fill(this.r,this.g,this.b);

    noStroke();

    fill(160,82,45);

    text("class", 25,50);

        fill(0,0,205);

​

    text("flame()", 100,50);

​

    text('flickering = ' + floor(this.ax),50,80);

​

        fill(this.r,this.g,this.b);

    noStroke();

        translate(this.x,this.y);

​

scale(flameScale);

  beginShape();

    curveVertex(0,-height/2);

​

    curveVertex(0+this.ax,-height*3/4+20+this.ay);

       curveVertex(0-(width/6),-height/6);

       curveVertex(0,0);

       curveVertex(0+(width/6),-height/6);

​

    curveVertex(0+this.ax,-height*3/4+20+this.ay);

    curveVertex(0,-height/2); 

  endShape();

  fill(255);

    scale(0.2);

 beginShape();

    curveVertex(0,-height/2);

​

    curveVertex(0+this.ax,-height*3/4+20+this.ay);

       curveVertex(0-(width/6),-height/6);

       curveVertex(0,0);

       curveVertex(0+(width/6),-height/6);

​

    curveVertex(0+this.ax,-height*3/4+20+this.ay);

    curveVertex(0,-height/2); 

  endShape();

  }

​

}