One Distortion

Developer
Cmalven
Size
4,981 Kb
Views
4,048
  1. One Distortion Previews
  2. One Distortion HTML Codes
  3. One Distortion CSS Codes
  4. One Distortion JS Codes

How do I make an one distortion?

Distorting an image using Pixi.js and and a WebGL shader.. What is a one distortion? How do you make a one distortion? This script and codes were developed by Cmalven on 29 January 2023, Sunday.

One Distortion Previews
IQ Test

One Distortion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One Distortion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script id="shader" type="shader"> // Shader Reference: // http://www.shaderific.com/glsl/ precision mediump float; varying vec2 vTextureCoord; // The coordinates of the current pixel uniform sampler2D uSampler; // The image data uniform vec2 mouse; uniform vec2 resolution; uniform float time; uniform float distortionAmount; uniform bvec3 distortColors; void main() { float xPercent = mouse.x / resolution.x; float yPercent = mouse.y / resolution.y; float pixPercentX = gl_FragCoord.x / resolution.x; float pixPercentY = gl_FragCoord.y / resolution.y; float maxDist = resolution.x; float distFromPix = distance(mouse, gl_FragCoord.xy); float percentDist = distFromPix / maxDist; // Draw the texture vec2 modCoords = vec2( vTextureCoord.x + (percentDist * (distortionAmount * sin(time))), vTextureCoord.y + (percentDist * (-distortionAmount * cos(time))) ); vec4 tex = texture2D(uSampler, modCoords); float r = tex.r; float g = tex.g; float b = tex.b; if (distortColors.r) { r = xPercent / r; } if (distortColors.g) { g = xPercent / g; } if (distortColors.b) { b = xPercent / b; } // Change value based on uniforms gl_FragColor = vec4(r, g, b, 1.0); }
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.1/gl-matrix-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

One Distortion - Script Codes CSS Codes

canvas { max-width: 100%; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
}

One Distortion - Script Codes JS Codes

'use strict';
var PixiPlayground = function PixiPlayground() { // // Private Vars // /////////////////////////////////////////////////// var self = { stage: null, renderer: null, item: new PIXI.Sprite(), gui: null, width: 800, height: 800, targetX: 0, targetY: 0, logo: null, uniforms: {}, settings: { timeSpeed: 0.01, distortionAmount: 0.6, rDistort: false, gDistort: true, bDistort: false } }; // // Private Methods // /////////////////////////////////////////////////// var _init = function _init() { _addGui(); _createRenderer(); _createItems(); _addEventListeners(); _getShader(); window.requestAnimationFrame(_update); }; var _addGui = function _addGui() { self.gui = new dat.GUI(); self.gui.add(self.settings, 'timeSpeed', 0.005, 0.05).step(0.005); self.gui.add(self.settings, 'distortionAmount', 0.01, 1.0).step(0.01); self.gui.add(self.settings, 'rDistort'); self.gui.add(self.settings, 'gDistort'); self.gui.add(self.settings, 'bDistort'); }; var _createRenderer = function _createRenderer() { self.renderer = PIXI.autoDetectRenderer(self.width, self.height, { backgroundColor: 0x000000 }); document.body.appendChild(self.renderer.view); // create the root of the scene graph self.stage = new PIXI.Container(); }; var _addEventListeners = function _addEventListeners() { $('body').on('* mousemove', _onMouseMove); }; var _onMouseMove = function _onMouseMove(evt) { self.targetX = evt.offsetX; self.targetY = evt.offsetY; self.uniforms.mouse.value = { x: evt.offsetX, y: evt.offsetY }; self.uniforms.distortionAmount.value = self.settings.distortionAmount; self.uniforms.distortColors.value = { x: self.settings.rDistort, y: self.settings.gDistort, z: self.settings.bDistort }; }; var _createItems = function _createItems() { //Load an image and create an object self.logo = PIXI.Sprite.fromImage('https://pbs.twimg.com/profile_images/497038023570112512/2AEwu-CC.png'); // Set it at the center of the screen self.logo.x = self.width / 2; self.logo.y = self.height / 2; // Make sure the center point of the image is at its center, instead of the default top left self.logo.anchor.set(0.5); //Add it to the screen self.stage.addChild(self.logo); //Create a uniforms object to send to the shader self.uniforms.mouse = { type: 'v2', value: { x: 0, y: 0 } }; self.uniforms.time = { type: 'f', value: 0 }; self.uniforms.distortionAmount = { type: 'f', value: self.settings.distortionAmount }; self.uniforms.resolution = { type: 'v2', value: { x: self.width, y: self.height } }; self.uniforms.distortColors = { type: 'v3', value: { x: self.settings.rDistort, y: self.settings.gDistort, z: self.settings.bDistort } }; }; var _getShader = function _getShader() { // Get shader code as a string var shaderCode = document.getElementById('shader').innerHTML; // Create our Pixi filter using our custom shader code var simpleShader = new PIXI.AbstractFilter('', shaderCode, self.uniforms); // Apply it to our object self.logo.filters = [simpleShader]; }; var _updateElements = function _updateElements() {}; var _renderStage = function _renderStage() { self.renderer.render(self.stage); }; var _update = function _update() { _updateElements(); _renderStage(); self.uniforms.time.value += self.settings.timeSpeed; window.requestAnimationFrame(_update); }; // // Initialize // /////////////////////////////////////////////////// _init(); // Return the Object return self;
};
new PixiPlayground();
One Distortion - Script Codes
One Distortion - Script Codes
Home Page Home
Developer Cmalven
Username cmalven
Uploaded January 29, 2023
Rating 3
Size 4,981 Kb
Views 4,048
Do you need developer help for One Distortion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Cmalven (cmalven) Script Codes
Name
Three.js Playground
Stacked Card Navigation
AnimPanel Demo
VerbalExpressions Converter
Progressively-Enhanced Smooth Scroll
A Pen by cmalven
Input with Draggable Values
Chi Coast
THREE.js Globe imported from OBJ
Smooth Chars
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!