Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
Hi guy who know a plugin filter to make some animated noise. ?


[IMG]http://labo.project-nya.jp/images/pixijs_filters_noisefilter.png[/IMG]


This is a example a map theme am trying to do.


!A-jcartoon.jpg


I wish I could apply a very very light animated noise, to give an effect similar to a movie.
I would also like to play with different option for some experience.
If a programer has something similar in her bag, I take it.
Thank you.




Tank you for help
 
Last edited by a moderator:

Diretooth

Lv. 25 Werewolf
Veteran
Joined
Mar 10, 2013
Messages
1,231
Reaction score
446
First Language
English
Primarily Uses
RMMV
This tutorial teaches you how to make a noise filter without scripts. It's easy, so that's a plus. Note that, while it is Ace, it should be implementable in MV.
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
This tutorial teaches you how to make a noise filter without scripts. It's easy, so that's a plus. Note that, while it is Ace, it should be implementable in MV.



Its a screen distortion, but the idea are very nice .
tanks for this video
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
This tutorial teaches you how to make a noise filter without scripts. It's easy, so that's a plus. Note that, while it is Ace, it should be implementable in MV.

if it worked with the engine rpg maker vx. 
not with that of rmmv.!!!
I get 2 fps when I activate this way.


My 2 noise picture.

noise1.pngnoise2.png



With parralel procees to show image in multiply


◆Afficher l'Image:#2, noise1, En haut à gauche (0,0), (100%,100%), 255, Multiplier
◆Attendre:5 trames
◆Afficher l'Image:#2, noise2, En haut à gauche (0,0), (100%,100%), 255, Multiplier
◆Attendre:5 trames


I think only Pixi and the filter can offer this kind of rendering 60 fps.
 

biud436

Veteran
Veteran
Joined
Sep 28, 2014
Messages
172
Reaction score
182
First Language
Korean
Primarily Uses
RMMV
Try to apply this plugin.


RS_NoiseFilters.js(Github)


You can be using two plugin commands as follows.

Tilemap_noise Enable minValue maxValue
Tilemap_noise Disable



But, Using this plugin may have the problem that it can not use my other plugin or a similar plugin.

[IMG]http://i.imgur.com/QoQWoCX.png[/IMG]
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
Try to apply this plugin.


RS_NoiseFilters.js(Github)


You can be using two plugin commands as follows.

Tilemap_noise Enable minValue maxValue
Tilemap_noise Disable



But, Using this plugin may have the problem that it can not use my other plugin or a similar plugin.




Awsnome is work and nice rendering ! and fast


Am trying to animated it.


◆Command:Tilemap_noise Enable 0.1 0.2
◆wait:2 trames
◆Command:Tilemap_noise Enable 0.2 0.3
◆wait:2 trames


But is not work the Noise are note regenerate random.
 
Last edited by a moderator:

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
Try to apply this plugin.


RS_NoiseFilters.js(Github)


You can be using two plugin commands as follows.

Tilemap_noise Enable minValue maxValue
Tilemap_noise Disable



But, Using this plugin may have the problem that it can not use my other plugin or a similar plugin.

[IMG]http://i.imgur.com/QoQWoCX.png[/IMG]

I feel that always generates the same pattern, which is cached can be?
Did you know if is possible with random pattern each time i generate ?
 

biud436

Veteran
Veteran
Joined
Sep 28, 2014
Messages
172
Reaction score
182
First Language
Korean
Primarily Uses
RMMV
@Jonforum This plugin has to have a gap of two numbers that is bigger than 0.5 or more. 


But If you want to change the pattern, You will have to modify the math function in this code.

Code:
// 152 line
  Graphics.applyNoiseFilter = function (a, b, c) {
    if(!this._renderTexture) return;
    if(this._noiseFilter) {
        this._noiseFilter.noise = Math.quadraticMotion(a, b, c);
    } else {
      this._noiseFilter = new PIXI.filters.NoiseFilter();
      this._noiseFilter.noise = Math.quadraticMotion(a, b, c);
      this._renderSprite.filters = [this._noiseFilter];
      enabledNoiseFilter = true;
    }
    RS.NoiseFilters.save(enabledNoiseFilter, a, b, c);
  };
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
@Jonforum This plugin has to have a gap of two numbers that is bigger than 0.5 or more. 


But If you want to change the pattern, You will have to modify the math function in this code.



// 152 line
Graphics.applyNoiseFilter = function (a, b, c) {
if(!this._renderTexture) return;
if(this._noiseFilter) {
this._noiseFilter.noise = Math.quadraticMotion(a, b, c);
} else {
this._noiseFilter = new PIXI.filters.NoiseFilter();
this._noiseFilter.noise = Math.quadraticMotion(a, b, c);
this._renderSprite.filters = [this._noiseFilter];
enabledNoiseFilter = true;
}
RS.NoiseFilters.save(enabledNoiseFilter, a, b, c);
};

Can i do someting like this ?


var RanPatt = 1 + Math.floor(Math.random() * 3);
Graphics.applyNoiseFilter = function (a, b, c) {
if(!this._renderTexture) return;
if(this._noiseFilter) {
if (RanPatt === 1){
this._noiseFilter.noise = Math.quadraticMotion(a, b, c);
}else if (RanPatt === 2) {
this._noiseFilter.noise = Math.quadraticMotion(b, c, a);
}else if (RanPatt === 3) {
this._noiseFilter.noise = Math.quadraticMotion(a, c, a);
}

}


:)
 

biud436

Veteran
Veteran
Joined
Sep 28, 2014
Messages
172
Reaction score
182
First Language
Korean
Primarily Uses
RMMV
@Jonforum But, The pattern may still be not changed. 


So, To fix the noise issue, I think that you have to directly change the Fragment shader of the Noise Filter.


That Fragment shader looks like this, But It is not simple.

Code:
// 24057 line (pixi.js)
// @link https://github.com/pixijs/pixi.js/blob/dev/src/filters/noise/noise.frag

precision highp float;

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform float noise;
uniform sampler2D uSampler;

float rand(vec2 co)
{
    return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main()
{
    vec4 color = texture2D(uSampler, vTextureCoord);

    float diff = (rand(gl_FragCoord.xy) - 0.5) * noise;

    color.r += diff;
    color.g += diff;
    color.b += diff;

    gl_FragColor = color;
}
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
@Jonforum But, The pattern may still be not changed. 


So, To fix the noise issue, I think that you have to directly change the Fragment shader of the Noise Filter.


That Fragment shader looks like this, But It is not simple.




ok i try many math fucntion example


with Math.abs.
But no work 


I found this , The guy say is work for make noise 
But am not anouft good in javascript :)
I started and this is still too difficult


noise.seed(Math.random());

for (var x = 0; x < canvas.width; x++) {
for (var y = 0; y < canvas.height; y++) {
// All noise functions return values in the range of -1 to 1.

// noise.simplex2 and noise.perlin2 for 2d noise
var value = noise.simplex2(x / 100, y / 100);
// ... or noise.simplex3 and noise.perlin3:
var value = noise.simplex3(x / 100, y / 100, time);

image[x][y].r = Math.abs(value) * 256; // Or whatever. Open demo.html to see it used with canvas.
}
}




If I understand, it is not possible to animate the noise in javascript?
As in after effects or photoshop?
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
@Jonforum But, The pattern may still be not changed. 


So, To fix the noise issue, I think that you have to directly change the Fragment shader of the Noise Filter.


That Fragment shader looks like this, But It is not simple.




I're you a quick video (1min) to show you the effect I search with the NOISE.
In this video the NOISE is somewhat exaggerate in the game, but I used aftereffect to make it.


When I say random patern , I'm talking about a sort of active noise.
Look at left, in the black of the map.


Is this possible or its like you said, too complex with the Pixi engine.


small lag in the video, but the fault of the screenrec software i used.


Play it at HD 720 To see the small noise active pattern effect.


Youtube has the effect of removing noise, but see a can.










Tanks you for help with this awsome plugin.
 
Last edited by a moderator:

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
I found the way to fix the the issue. that is to add new uniform value into the Fragment shader.


I also added new variables by modifying the default PIXI.filters.NoiseFilter. Thanks.


v1.0.1 - https://github.com/biud436/MV/blob/master/Laboratory/RS_NoiseFilters.js





@biud436


OMMGGG !!


Work work  :D


Freak good work friend.
you ref here ?
https://pixijs.github.io/docs/PIXI.filters.NoiseFilter.html
 


Your plugin give very hot cinematographic ambient to the game.
i use  Tilemap_noise Enable 0.1 0.2


when you publish it I will make some suggestions
At the moment I'm too happy thank you.


If you wanted some fast sugestion to improve , ( but it is perfect for me.)
this are
Plugin run without event parralelle process.
Posibility to set to layer  (over picture layer, bottom picture layer ) .
ScriptCall command for dynamic


But these are sugestion, your plugin is very great like thats.
 

biud436

Veteran
Veteran
Joined
Sep 28, 2014
Messages
172
Reaction score
182
First Language
Korean
Primarily Uses
RMMV
I have referred to this page.

Plugin run without event parralelle process.
Posibility to set to layer  (over picture layer, bottom picture layer ) .
ScriptCall command for dynamic



I updated your suggestions. But the second suggestion was not possible. That is pretty complicated.


That is because the noise filter is bound in ShaderTilemap.


https://github.com/biud436/MV/blob/master/Laboratory/RS_NoiseFilters.js
 


Script Calls :

$gameSystem.setNoiseProperty('enabledNoise', true);
$gameSystem.setNoiseProperty('enabledNoise', false);
$gameSystem.setNoiseProperty('a', 0.1);
$gameSystem.setNoiseProperty('b', 0.2);
$gameSystem.setNoiseProperty('x', 12.9898);
$gameSystem.setNoiseProperty('y', 78.233);
$gameSystem.setNoiseProperty('minX', -3);
$gameSystem.setNoiseProperty('maxX', 3);
$gameSystem.setNoiseProperty('minY', -2);
$gameSystem.setNoiseProperty('maxY', 2);



Plugin Commands : 

Tilemap_noise Enable minNoiseAmount maxNoiseAmount
Tilemap_noise Enable 0.1 0.2


Tilemap_noise SetRandomX min max
Tilemap_noise SetRandomX -3 3


Tilemap_noise SetRandomY min max
Tilemap_noise SetRandomY -2 2


Tilemap_noise Disable
 
Last edited by a moderator:

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
@biud436


I will try this today.


Your are very good , as see profil you are  korea !
So english and javascript are not natal language for you.
You are awsome dude !


Ok i give you a video result of your plugin
i do too mutch noise, but you maybe understant what i trying to do.
soory for lag rec, your plugin ride my game 120 FPS with no lag.
crazy cinematografic effect.
Liitle bit too mutch with this video but am testing some tricks.












Ok i give you a video result of your plugin
i do too much noise, but you maybe understand what i trying to do.
sorry for lag with my RecSoft, your plugin ride my game 120 FPS with no lag.
crazy cinematografic effect.!!!
I give, little bit too much noise,  with this video but am testing some tricks.
Am very happy, tank to you friend.
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV

youtube, deletes the video noise.
But here's what the game supposed to seen, in true with your awesome filter plugin.
We Really-have the feeling of a movie and animation.
These just a great plugin.


i have exaggerate on noise , but you maybe understand what am trying to do 


https://mega.nz/#!wYQ0iRxQ!lN-HhMMECOo_LiCmvZ5hwMCpegAHKAiw_Kt-HgpOhxI


Do you will publish this plugin?
Otherwise I can do for you friend I'm happy  ?
 
Last edited by a moderator:

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
update 


for new version rmmv and pixi , need replace the line 59 with this

Code:
var isFilterPIXI4 = (PIXI.VERSION === "4.0.3" && Utils.RPGMAKER_VERSION >= "1.3.4");
 

Latest Threads

Latest Profile Posts

2dfloor.png
What a fun tileset I've got here so far!
Minecraft Tiles, Maid Day, Custom Menu, Retry at GameOver, Save in Appdata | RPG Maker News #36

side view special bust.png
Reworking the art for the 'special busts' in important game dialogue. Potentially replacing the more 'dead-on' look of the original:
original.png
Me: Imma work on my game! Let's get some progress done
Me, five minutes later smoking a cigarette: *screams into the void*
Just got back from work... I got to recommend a dish I liked to a group of senior ladies, and they said they'd order it for dessert! What was it? CHURROS! It's one of my favorite desserts at my workplace.
What's your favorite dessert? I'll eat any pastry with cinnamon and sugar, but especially churros. And then there's chocolate... omg, so good!

Forum statistics

Threads
111,262
Messages
1,059,653
Members
144,542
Latest member
codyquakenbush
Top