image procss

by blackpolygon

HTML

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="400" height="600"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";

var width = canvas.width;
var height = canvas.height;

var particles = [];
var particleCount = 100;
var vx = 1;
var vy = 0;

var image = new MarvinImage();
image.load("https://i.imgur.com/3ebFIRq.jpg?3", imageLoaded);

function imageLoaded() {
  var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
  image.draw(canvas);
  // Edge Detection (Prewitt approach)
  //Marvin.prewitt(image, imageOut);
  // Invert color
  //Marvin.invertColors(imageOut, imageOut);
  Marvin.colorChannel(image, imageOut, 14, 0, -8);
  // Threshold
  //Marvin.thresholding(imageOut, imageOut, 250);
  imageOut.draw(canvas);

  createParticles();
  animate();
}

function createParticles() {
  for (var i = 0; i < particleCount; i++) {
    particles.push(createNewParticle());
  }
}

function createNewParticle() {
  var p ={
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx:1, 
    vy: 0
  };
  return p;
}

function updateParticle(p) {
  var v = getData(p);
  var angle = 2*Math.PI * v;
  var xx = Math.cos(angle);
  var yy = Math.sin(angle);
  // console.log(v);
  p.vy += (-0.5 + v) /10;
  p.x += xx;
  p.y += yy;

  if (p.x > canvas.width) {
    p.x = 0;
  }

  if (p.y > canvas.height) {
    p.y = 0;
  }
}

function paintParticle(p) {
  context.fillRect(p.x, p.y, 2, 2);
}

function animate() {

  for (var i = 0; i < particleCount; i++) {
    updateParticle(particles[i]);
    paintParticle(particles[i]);
  }

  window.requestAnimationFrame(animate);
}

function getData(p) {
  var x = p.x || 0;
  var y = p.y || 0;

  // set color now
  var canvasColor = context.getImageData(Math.floor(x), Math.floor(y), 1, 1).data; // rgba e [0,255]
  var r = canvasColor[0];
  var g = canvasColor[1];
  var b = canvasColor[2];
  var value = (r + g + b) / 255;
  //console.log(p.x, p.y, r,g,b, value);
  return value;

}



function example1() {
  imageExample1...