Tech­nique

Web Designer - - Web Workshop -

1. Cre­at­ing rip­ples

In order to cre­ate rip­ple ef­fects like Mustafa Ce­lik, Pix­ijs will be used since this pro­vides sim­ple dis­place­ment ef­fects. Here the Javascript code sets up the vari­ables needed and loads the images to cre­ate the ef­fect. Once the images are loaded the ‘setup’ func­tion is called. var app = new Pixi.ap­pli­ca­tion(win­dow. in­ner­width, win­dow.in­ner­height); doc­u­ment.body.ap­pend­child(app.view); app.stage.in­ter­ac­tive = true; var posx, dis­place­mentsprite, dis­place­ment­fil­ter, bg, vx; var con­tainer = new Pixi.con­tainer(); app.stage.ad­d­child(con­tainer); Pixi.loader.add(“img/rip­ple.png”).add(“img/ bg.jpg”).load(setup);

2. Cre­at­ing the dis­place­ment

In the ‘setup’ func­tion the dis­place­ment sprite is cre­ated that will cre­ate the rip­ple ef­fect and this is added to a dis­place­ment fil­ter. It’s then set to move its an­chor point to the cen­tre of the im­age and po­si­tioned on the screen. func­tion setup() { posx = app.ren­derer.width / 2; dis­place­mentsprite = new PIXI.SPRITE(PIXI. loader.re­sources[“img/rip­ple.png”].tex­ture); dis­place­ment­fil­ter = new Pixi.fil­ters.dis­pla ce­ment­fil­ter(dis­place­mentsprite); dis­place­mentsprite.an­chor.set(0.5); dis­place­mentsprite.x = app.ren­derer.width

/ 2; dis­place­mentsprite.y = app.ren­derer.height

/ 2; vx = dis­place­mentsprite.x;

3. Fin­ish the setup

To fin­ish off the ‘setup’ func­tion, the dis­place­ment fil­ter scale is set and the back­ground po­si­tioned. No­tice the scale is ‘0’ for the dis­place­ment, that’s be­cause it will be set to a height as soon as the mouse moves. app.stage.ad­d­child(dis­place­mentsprite); con­tainer.fil­ters = [dis­place­ment­fil­ter]; dis­place­ment­fil­ter.scale.x = 0; dis­place­ment­fil­ter.scale.y = 0; bg = new Pixi.sprite(pixi.loader. re­sources[“img/bg.jpg”].tex­ture); bg.width = app.ren­derer.width; bg.height = app.ren­derer.height; con­tainer.ad­d­child(bg); app.stage.on(‘mouse­move’, on­point­er­move). on(‘touch­move’, on­point­er­move); loop();

}

4. Get the mouse

The next code just grabs the po­si­tion of the mouse on the x-axis when­ever the mouse moves. This will be used to trig­ger the amount of rip­ple dis­place­ment ef­fect when the user moves their mouse. More move­ment will make the rip­ple big­ger. func­tion on­point­er­move(event­data) { posx = event­data.data.global.x;

}

5. Mak­ing it move

The ‘loop’ func­tion con­tin­u­ally up­dates the screen. A ve­loc­ity for the x-axis is worked out us­ing the po­si­tion of the mouse and the rip­ple. This is then mapped onto the fil­ter to give a value be­tween 0 and 120. func­tion loop() { re­ques­tani­ma­tion­frame(loop); vx += (posx - dis­place­mentsprite.x) * 0.045; dis­place­mentsprite.x = vx; var disp = Math.floor(posx dis­place­mentsprite.x); if (disp < 0) disp = -disp; var fs = map(disp, 0, 500, 0, 120); disp = map(disp, 0, 500, 0.1, 0.6);

6. Fin­ish­ing the code

At the end of the ‘loop’ func­tion the sprite is scaled to the amount of dis­place­ment and fil­ter scaled to the amount of depth it should have. Fi­nally, the map func­tion is de­clared that maps value ranges to new val­ues. dis­place­mentsprite.scale.x = disp; dis­place­ment­fil­ter.scale.x = fs;

} map = func­tion(n, start1, stop1, start2, stop2) { var new­val = (n - start1) / (stop1 - start1)

* (stop2 - start2) + start2; re­turn new­val;

};

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.