SoupMix

by djwelsh

HTML

<div id="body">
  <canvas id="soup" width="400" height="400"></canvas>
  <button id="mix-red">Red</button>
  <button id="mix-green">Green</button>
  <button id="mix-blue">Blue</button>
  <div id="soup-color">
  
  </div>
</div>

CSS

#body {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
#soup {
  width: 400px;
  height: 400px;
  background-color: #fff;
  margin: 20px;
}

JavaScript

class Stuff {
	
  ctx = null;
  
  color = {
  	r : 0,
    g : 0,
    b : 0
  }
  opacity = 0.2;
  colorStep = 10;
  
  soupBaseColor = '#a0522d';
  
  constructor (ctx) {
  	this.ctx = ctx;
  }
  
  addItem (color) {
  	for (let m in this.color) {
    	if (m == color) {
      	this.color[m] += this.colorStep;
      }
      else {
      	this.color[m] -= this.colorStep / 2;
        if (this.color[m] < 0) {
        	this.color[m] = 0;
        }
      }
    }
  	
    this.drawSoup();
  }
  
  drawSoup () {
  	
    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    
    let newColor = `rgba(${this.color.r},${this.color.g},${this.color.b}, ${this.opacity})`;
    document.querySelector('#soup-color').innerHTML = newColor;
    
    // Soup base
    this.ctx.fillStyle = this.soupBaseColor;
    
    this.ctx.beginPath();
    this.ctx.ellipse(
    	this.ctx.canvas.width / 2, 
      this.ctx.canvas.height / 2,
      180,
      50,
      0,
      0,
      Math.PI * 2
    );
    this.ctx.fill();
    
    // Soup color
    this.ctx.fillStyle = newColor;
    
    this.ctx.beginPath();
    this.ctx.ellipse(
    	this.ctx.canvas.width / 2, 
      this.ctx.canvas.height / 2,
      180,
      50,
      0,
      0,
      Math.PI * 2
    );
    this.ctx.fill();
    
    
    this.ctx.strokeStyle = "#000000";
    this.ctx.lineWidth = 3;
    this.ctx.stroke();
    
    
  }
  
}

let stuff;

window.addEventListener('load', (event) => {
	
  stuff = new Stuff(
  	document.querySelector('#soup').getContext('2d')
  );
  
  

  document.querySelector('#mix-red').addEventListener('click', (event) => {
    stuff.addItem('r');
  });
  document.querySelector('#mix-green').addEventListener('click', (event) => {
    stuff.addItem('g');
  });
  document.querySelector('#mix-blue').addEventListener('click', (event) => {
    stuff.addItem('b');
  });
  
  
  stuff.drawSoup();
  
  
  
});