Skip to content
Snippets Groups Projects
Commit 545ce850 authored by Marius Bilasco's avatar Marius Bilasco
Browse files

initial commit

parent dfda7e31
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 213 additions and 2 deletions
.gitignore
+ 2
− 2
View file @ 545ce850
**/sol**.js
**/sol**.html
**/sol_*.js
**/sol_*.html
data/happy.mp4 0 → 100644
+ 0
− 0
View file @ 545ce850
File added
data/rgb.png 0 → 100644
+ 0
− 0
View file @ 545ce850
data/rgb.png

102 KiB

data/surprise.mp4 0 → 100644
+ 0
− 0
View file @ 545ce850
File added
data/tambour.png 0 → 100644
+ 0
− 0
View file @ 545ce850
data/tambour.png

1.91 MiB

filters/gray_filters.js 0 → 100644
+ 48
− 0
View file @ 545ce850
ToGrayTask=function(opt_options) { }
ToGrayTask.prototype.process=function(imageData) {
var pixels=imageData.data;
var w=0;
for (var i = 0; i < imageData.height; i++)
for (var j = 0; j < imageData.width; j++) {
var mean=(pixels[w+1]+pixels[w+2]+pixels[w+3])/3;
pixels[w]=mean; pixels[w+1]=mean; pixels[w+2]=mean;
w+=4;
}
}
PartialGrayTask=function(opt_options) {
this.reg_x=opt_options.reg_x; this.reg_y=opt_options.reg_y;
this.reg_w=opt_options.reg_w; this.reg_h=opt_options.reg_h;
}
PartialGrayTask.prototype.process=function(imageData) {
var pixels=imageData.data;
for (var i = this.reg_y; i < this.reg_y+this.reg_h; i++)
for (var j = this.reg_x; j < this.reg_x+this.reg_w; j++) {
var pos=(i*imageData.width+j)<<2;
var mean=(pixels[pos+1]+pixels[pos+2]+pixels[pos+3])/3;
pixels[pos]=mean; pixels[pos+1]=mean; pixels[pos+2]=mean;
}
}
RandomPartialGrayTask=function(opt_options) {
this.reg_x=opt_options.reg_x; this.reg_y=opt_options.reg_y;
this.reg_w=opt_options.reg_w; this.reg_h=opt_options.reg_h;
this.cvs_w=opt_options.cvs_w; this.cvs_h=opt_options.csv_h;
}
RandomPartialGrayTask.prototype.process=function(imageData) {
var pixels=imageData.data;
for (var i = this.reg_y; i < this.reg_y+this.reg_h; i++)
for (var j = this.reg_x; j < this.reg_x+this.reg_w; j++) {
var pos=(i*imageData.width+j)<<2;
var mean=(pixels[pos+1]+pixels[pos+2]+pixels[pos+3])/3;
pixels[pos]=mean; pixels[pos+1]=mean; pixels[pos+2]=mean;
}
}
RandomPartialGrayTask.prototype.random_focus=function() {
this.reg_y=Math.trunc(Math.random()*(this.cvs_h-this.reg_h));
this.reg_x=Math.trunc(Math.random()*(this.cvs_w-this.reg_w));
}
processing.js 0 → 100644
+ 58
− 0
View file @ 545ce850
var processing=function(elementId,task,outputCanvasId) {
this.element=document.getElementById(elementId);
this.width = this.element.width;
this.height = this.element.height;
this.imageData = {};
this.processing_canvas=document.createElement('canvas');
this.processing_canvas.width = this.width;
this.processing_canvas.height = this.height;
this.processing_context=this.processing_canvas.getContext("2d");
this.task=task;
if (outputCanvasId) {
this.output_canvas=document.getElementById(outputCanvasId);
this.output_context=this.output_canvas.getContext("2d");
}
}
processing.prototype.acquire_data_from_img=function() {
this.processing_context.drawImage(this.element,0,0,this.width,this.height);
this.imageData = this.processing_context.getImageData(0, 0, this.width, this.height);
}
processing.prototype.acquire_data_from_video=function() {
this.processing_context.drawImage(this.element,0,0,this.width,this.height);
this.imageData = this.processing_context.getImageData(0, 0, this.width, this.height);
}
processing.prototype.acquire_data_from_canvas=function() {
this.processing_context.drawImage(this.element,0,0,this.width,this.height);
this.imageData = this.processing_context.getImageData(0, 0, this.width, this.height);
}
processing.prototype.acquire_data=function() {
switch (this.element.nodeName.toLowerCase()) {
case 'canvas':
this.acquire_data_from_canvas(); break;
case 'img':
this.acquire_data_from_img(); break;
case 'video':
this.acquire_data_from_video(); break;
default:
throw new Error('Element not supported!');
}
}
processing.prototype.do_process=function() {
this.acquire_data();
this.task.process(this.imageData);
if (this.output_canvas) this.update_output();
}
processing.prototype.update_output=function() {
this.output_context.putImageData(this.imageData,0,0);
}
samples/image_get_pixel.html 0 → 100644
+ 24
− 0
View file @ 545ce850
<html>
<head>
<script lang="js" src="../tools.js"></script>
<script lang="js" src="../features/pixels.js"></script>
<script lang="js" src="../processing.js"></script>
</head>
<body>
<img autoplay loop src="../data/tambour.png" id="input" height="240" width="240"></img>
<br></br>
<div id="output"></p>
<script lang="javascript">
var _output=document.getElementById("output");
var _opt_options={x:100,y:100,output:_output};
var _task=new GetPixelRGBATask(_opt_options)
var _proc=new processing("input",_task);
var loop=function() {
_proc.do_process();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
samples/video_gray_0.html 0 → 100644
+ 22
− 0
View file @ 545ce850
<html>
<head>
<script lang="js" src="../tools.js"></script>
<script lang="js" src="../filters/gray_filters.js"></script>
<script lang="js" src="../processing.js"></script>
</head>
<body>
<video autoplay loop src="../data/happy.mp4" id="input" width="320" height="180"></video>
<canvas id="output" width="320" height="180"></canvas>
<script lang="javascript">
var _opt_options={reg_x:0,reg_y:0,reg_w:160,reg_h:90,cvs_w:320,csv_h:180};
var _task=new ToGrayTask(_opt_options)
var _proc=new processing("input",_task,"output");
var loop=function() {
_proc.do_process();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
samples/video_gray_1.html 0 → 100644
+ 22
− 0
View file @ 545ce850
<html>
<head>
<script lang="js" src="../tools.js"></script>
<script lang="js" src="../filters/gray_filters.js"></script>
<script lang="js" src="../processing.js"></script>
</head>
<body>
<video autoplay loop src="../data/happy.mp4" id="input" width="320" height="180"></video>
<canvas id="output" width="320" height="180"></canvas>
<script lang="javascript">
var _opt_options={reg_x:0,reg_y:0,reg_w:160,reg_h:90,cvs_w:320,csv_h:180};
var _task=new PartialGrayTask(_opt_options)
var _proc=new processing("input",_task,"output");
var loop=function() {
_proc.do_process();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
samples/video_gray_2.html 0 → 100644
+ 22
− 0
View file @ 545ce850
<html>
<head>
<script lang="js" src="../tools.js"></script>
<script lang="js" src="../filters/gray_filters.js"></script>
<script lang="js" src="../processing.js"></script>
</head>
<body>
<video autoplay loop src="../data/happy.mp4" id="input" width="320" height="180"></video>
<canvas id="output" width="320" height="180"></canvas>
<script lang="javascript">
var _opt_options={reg_x:0,reg_y:0,reg_w:160,reg_h:90,cvs_w:320,csv_h:180};
var _task=new RandomPartialGrayTask(_opt_options)
var _proc=new processing("input",_task,"output");
var loop=function() {
_proc.do_process();_task.random_focus();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
tools.js 0 → 100644
+ 15
− 0
View file @ 545ce850
var tools=function(){
this.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
}
tools.prototype.initUserMedia=function(element,opt_options) {
window.navigator.mediaDevices.getUserMedia({
video: true,
audio: (opt_options && opt_options.audio) ? true : false,
}).then(function(stream) {
element.srcObject = stream;
}).catch(function(err) {
throw Error('Cannot capture user camera.');
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment