lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

updated Noise filter and test

Browse Source
This commit is contained in:
Eric Rowell
2014-01-02 22:21:21 -08:00
parent 50a91d1e8b
commit 4074eef3aa
3 changed files with 27 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/filters/Noise.js
View File

@@ -4,66 +4,35 @@
* Noise Filter. Randomly adds or substracts to the color channels.
* Performs w*h pixel reads and w*h pixel writes.
* @function
* @author ippo615
* @memberof Kinetic.Filters
* @param {ImageData} src, the source image data (what will be transformed)
* @param {ImageData} dst, the destination image data (where it will be saved)
* @param {Object} opt
* @param {Number} [opt.noiseAmount] The amount of noise to add. Between 0 and 255.
* Each channel of each pixel will change by a random amount
* between +- amount/2. Default is 0.
* @param {Number} [opt.affectAlpha] 1 to add noise to the alpha channel.
* Default is 0.
* @param {Object} imagedata
* @author ippo615
*/
var Noise = function (src, dst, opt) {
var amount = opt.noiseAmount || 0,
affectAlpha = opt.affectAlpha || 0;
var srcPixels = src.data,
dstPixels = dst.data,
nPixels = srcPixels.length,
half = amount / 2,
i;
if (affectAlpha) {
Kinetic.Filters.Noise = function (imageData) {
var amount = this.noise() * 255,
data = imageData.data,
nPixels = data.length,
half = amount / 2,
i;
for (i = 0; i < nPixels; i += 4) {
dstPixels[i + 0] = srcPixels[i + 0] + half - 2 * half * Math.random();
dstPixels[i + 1] = srcPixels[i + 1] + half - 2 * half * Math.random();
dstPixels[i + 2] = srcPixels[i + 2] + half - 2 * half * Math.random();
dstPixels[i + 3] = srcPixels[i + 3] + half - 2 * half * Math.random();
data[i + 0] += half - 2 * half * Math.random();
data[i + 1] += half - 2 * half * Math.random();
data[i + 2] += half - 2 * half * Math.random();
}
} else {
for (i = 0; i < nPixels; i += 4) {
dstPixels[i + 0] = srcPixels[i + 0] + half - 2 * half * Math.random();
dstPixels[i + 1] = srcPixels[i + 1] + half - 2 * half * Math.random();
dstPixels[i + 2] = srcPixels[i + 2] + half - 2 * half * Math.random();
dstPixels[i + 3] = srcPixels[i + 3];
}
}
};
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'noise', 32);
Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'noise', 0.2);
Kinetic.Filters.Noise = function(src,dst,opt){
if( this === Kinetic.Filters ){
Noise(src, dst||src, opt );
}else{
Noise.call(this, src, dst||src, opt || {
noiseAmount: this.getNoiseAmount()
});
}
};
/**
* get/set noise amount. Returns the amount of noise. Between 0 and 1.
* @name noise
* @method
* @memberof Kinetic.Node.prototype
* @param {Number} noise
* @returns {Number}
*/
/**
* get noise amount. Returns the amount of noise. Between 0 and 255.
* @name getNoiseAmount
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set noise amount. Sets the amount of noise. Between 0 and 255.
* @name setNoiseAmount
* @method
* @memberof Kinetic.Image.prototype
*/
})();

4
test/runner.html
View File

@@ -91,8 +91,8 @@
<script src="unit/filters/Enhance-test.js"></script>
<!--<script src="unit/filters/Polar-test.js"></script>-->
<script src="unit/filters/Pixelate-test.js"></script>
<!--<script src="unit/filters/Noise-test.js"></script>
<script src="unit/filters/Threshold-test.js"></script>
<script src="unit/filters/Noise-test.js"></script>
<!--<script src="unit/filters/Threshold-test.js"></script>
<script src="unit/filters/Levels-test.js"></script>
<script src="unit/filters/Flip-test.js"></script>
<script src="unit/filters/Mirror-test.js"></script>

70
test/unit/filters/Noise-test.js
View File

@@ -1,67 +1,4 @@
suite('Noise', function () {
// ======================================================
test('noise', function (done) {
var stage = addStage();
var shapesLayer = new Kinetic.Layer();
// The important line!
shapesLayer.on('draw', function () {
var imageData = this.getContext().getImageData(0,0,this.getCanvas().width/2,this.getCanvas().height);
var scratchData = this.getContext().createImageData(imageData); // only size copied
Kinetic.Filters.Noise(imageData,scratchData,{noiseAmount:96});
this.getContext().putImageData(scratchData,0,0);
});
var triangle = new Kinetic.RegularPolygon({
x: stage.getWidth() / 4,
y: stage.getHeight() / 2,
sides: 3,
radius: 80,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 70,
fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
var circle = new Kinetic.Circle({
x: 3 * stage.getWidth() / 4,
y: stage.getHeight() / 2,
radius: 70,
fill: '#880000',
stroke: 'black',
strokeWidth: 4,
draggable: true,
id: 'myCircle'
});
for( var i=0; i<10; i+=1 ){
for( var j=0; j<10; j+=1 ){
var rect = new Kinetic.Rect({
x: i/10*stage.getWidth(),
y: j/10*stage.getHeight(),
width: stage.getWidth()/10,
height: stage.getHeight()/10,
fill: (i+j)%2===0?'#FF0000':'#FFFF00',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
shapesLayer.add(rect);
}
}
shapesLayer.add(circle);
shapesLayer.add(triangle);
stage.add(shapesLayer);
done();
});
// ======================================================
test('noise tween', function(done) {
@@ -81,14 +18,15 @@ suite('Noise', function () {
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Noise);
darth.setNoiseAmount(128);
darth.cache();
darth.filters([Kinetic.Filters.Noise]);
darth.noise(1);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
noiseAmount: 0,
noise: 0,
easing: Kinetic.Easings.EaseInOut
});