JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<div class="info" id="info">
</div>


<div style="padding: 10px">
  <div class="wrapper">
    <input type="range" name="brightness" id="input-brightness" step="1" min="-100" max="100" value="0" list="datalist">
    <label for="input-brightness">Brightness</label>
  </div>

  <div class="wrapper">
    <input type="range" name="contrast" id="input-contrast" step="1" min="-100" max="100" value="-100" list="datalist">
    <label for="input-contrast">Contrast</label>
  </div>
    <div class="wrapper">
    <input type="range" name="saturate" id="input-saturate" step="1" min="-100" max="100" value="-100" list="datalist">
    <label for="input-saturate">Saturate</label>
  </div>
      <div class="wrapper">
    <input type="range" name="hue" id="input-hue" step="1" min="0" max="360" value="0" list="hue_datalist">
    <label for="input-saturate">Hue</label>
  </div>
</div>

<datalist id="datalist">
  <option value="-100"></option>
  <option value="0"></option>
  <option value="100"></option>
</datalist>
<datalist id="hue_datalist">
  <option value="0"></option>
  <option value="180"></option>
  <option value="360"></option>
</datalist>

CSS

.info {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  color: black;
}

.wrapper {
  display: flex;
}

JavaScript

const color = new PIXI.filters.ColorMatrixFilter();

const app = new PIXI.Application({
  width: 300,
  height: 300
});
document.body.appendChild(app.view);
/* const imageSrc = 'https://dspewdm6uepxg.cloudfront.net/480x480/1591072354653_1591072355306.png'; */

const imageSrc = 'https://d1efk3962q5p8g.cloudfront.net/480x480/cat_1602137249802.png';

const none = {
  'brightness': 0,
  'contrast': 50,
  'saturation': 10,
  'hue': 0
};

normalizeBrightness = (value) => (parseFloat(value) + 100) / 100;

normalize = (value) => (parseFloat(value) * 0.01);

let brightness = 1.0;
let contrast = 0.0;
let saturate = 0.0;
let hue = 0;

let colorMatrix = new PIXI.filters.ColorMatrixFilter();
const sprite = new PIXI.Sprite(PIXI.Texture.from(imageSrc));

sprite.width = app.screen.width;
sprite.height = app.screen.height;
sprite.filters = [colorMatrix];

applyFilter = () => {
  colorMatrix.brightness(brightness);
  colorMatrix.contrast(constrast, true);
  colorMatrix.saturate(saturate, true);
  colorMatrix.hue(hue, true);
};

/* applyFilter(); */

app.stage.addChild(sprite);

document.getElementById("input-brightness").oninput = (event) => {
  brightness = normalizeBrightness(event.target.value);
  colorMatrix.brightness(brightness, true);
 // applyFilter();
};

document.getElementById("input-contrast").oninput = (event) => {
  contrast = normalize(event.target.value);
  applyFilter();
};

document.getElementById("input-saturate").oninput = (event) => {
  saturate = normalize(event.target.value);
  applyFilter();
};

document.getElementById("input-hue").oninput = (event) => {
  hue = parseInt(event.target.value);
  colorMatrix.hue(hue);
 // applyFilter();
};