Blending Experiment 29

Developer
Aitor
Size
7,996 Kb
Views
26,312
  1. Blending Experiment 29 Previews
  2. Blending Experiment 29 HTML Codes
  3. Blending Experiment 29 CSS Codes
  4. Blending Experiment 29 JS Codes

How do I make an blending experiment 29?

Experiment. What is a blending experiment 29? How do you make a blending experiment 29? This script and codes were developed by Aitor on 16 September 2022, Friday.

Blending Experiment 29 Previews
IQ Test

Blending Experiment 29 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blending Experiment 29</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas width="640" height="480"></canvas> <script src="js/index.js"></script>
</body>
</html>

Blending Experiment 29 - Script Codes CSS Codes

html,
body { background: #000; color: #fff; margin: 0; padding: 0; overflow: hidden;
}

Blending Experiment 29 - Script Codes JS Codes

"use strict";
var canvas = document.querySelector("canvas");
var gl = canvas.getContext("webgl");
function linear(a, b, p) { return a + (b - a) * p;
}
function quadratic(a, b, c, p) { var d = linear(a, c, p); var e = linear(c, b, p); return linear(d, e, p);
}
function cubic(a, b, c, d, p) { var e = linear(a, c, p); var f = linear(c, d, p); var g = linear(d, b, p); var h = linear(e, f, p); var i = linear(f, g, p); return linear(h, i, p);
}
function isPowerOfTwo(v) { return v && !(v & v - 1);
}
function roundToPowerOfTwo(v) { v--; v |= v >> 1; v |= v >> 2; v |= v >> 4; v |= v >> 8; v |= v >> 16; v++; return v;
}
console.log(roundToPowerOfTwo(2));
console.log(roundToPowerOfTwo(23));
console.log(roundToPowerOfTwo(65));
function createBuffer(content, type) { var buffer = gl.createBuffer(); gl.bindBuffer(type, buffer); gl.bufferData(type, content, gl.STATIC_DRAW); gl.bindBuffer(type, null); return buffer;
}
function createShader(source, type) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(shader)); return null; } return shader;
}
function createProgram(vertex, fragment) { var program = gl.createProgram(); gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(program)); return null; } return program;
}
function createImage(src) { return new Promise(function (resolve, reject) { var image = new Image(); function load(e) { var image = e.target; image.removeEventListener("error", error); image.removeEventListener("load", load); if (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height)) { var newWidth = roundToPowerOfTwo(image.width); var newHeight = roundToPowerOfTwo(image.height); var _canvas = document.createElement("canvas"); _canvas.width = newWidth; _canvas.height = newHeight; var context = _canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height, 0, 0, newWidth, newHeight); resolve(_canvas); } else { resolve(image); } } function error(e) { var image = e.target; image.removeEventListener("error", error); image.removeEventListener("load", load); reject(new Error("Loading image")); } image.crossOrigin = "anonymous"; image.src = src; image.addEventListener("load", load); image.addEventListener("error", error); });
}
function createRandomImage() { var width = arguments.length <= 0 || arguments[0] === undefined ? 512 : arguments[0]; var height = arguments.length <= 1 || arguments[1] === undefined ? 512 : arguments[1]; var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { var channel = Math.round(Math.random() * 255); context.fillStyle = "rgb(" + channel + "," + channel + "," + channel + ")"; context.fillRect(x, y, 1, 1); } } return canvas;
}
function updateTextureFromCanvas(canvas, texture) { if (gl.isTexture(texture)) { gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); gl.bindTexture(gl.TEXTURE_2D, null); return texture; } else { throw new Error("Invalid texture"); } return null;
}
function createTextureFromCanvas(canvas) { var texture = createTexture(canvas); gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); gl.bindTexture(gl.TEXTURE_2D, null); return texture;
}
function createTextureFromUrl(url) { var texture = createTexture(createCheckerboardImage()); createImage(url).then(function (image) { console.log("Loaded"); gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.bindTexture(gl.TEXTURE_2D, null); }).catch(function (error) { console.error(error); }); return texture;
}
function createCheckerboardImage() { var width = arguments.length <= 0 || arguments[0] === undefined ? 512 : arguments[0]; var height = arguments.length <= 1 || arguments[1] === undefined ? 512 : arguments[1]; var step = arguments.length <= 2 || arguments[2] === undefined ? 16 : arguments[2]; var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var cols = Math.ceil(width / step); var rows = Math.ceil(height / step); for (var y = 0; y < rows; y++) { for (var x = 0; x < cols; x++) { if (x % 2 === 0 && y % 2 === 0 || x % 2 !== 0 && y % 2 !== 0) { context.fillStyle = "rgb(255,0,0)"; } else { context.fillStyle = "rgb(255,255,255)"; } context.fillRect(x * step, y * step, step, step); } } return canvas;
}
function createTexture(image) { var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.bindTexture(gl.TEXTURE_2D, null); return texture;
}
var vertexShader = createShader("\nprecision mediump float;\n\nattribute vec4 position;\n\nvarying vec2 texturePosition;\n\nvoid main() {\n gl_Position = vec4(position.x,position.y,0.0,1.0);\n texturePosition = vec2(position.z,position.w);\n}\n", gl.VERTEX_SHADER);
var fragmentShader = createShader("\n#define PI 3.14159265\n\nprecision highp float;\n\nuniform float progress;\nuniform sampler2D a;\nuniform sampler2D b;\n//uniform sampler2D c;\nuniform vec2 size;\n\nvarying vec2 texturePosition;\n\nfloat rand(vec2 co){\n return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\n}\n\nfloat r(float progress, float ref, float range) {\n float start = ref - range;\n float end = ref + range;\n if (progress > start && progress < end) {\n return sin(((progress - start) / (end - start)) * PI * 0.5);\n } else if (progress < start) {\n return 0.0;\n } else if (progress > end) {\n return 1.0;\n }\n}\n\nfloat masking(float progress, float ref, float range) {\n return r(((progress - range) * (1.0 + range * 2.0)), ref, range);\n}\n\nvec2 nearest(float roundTo, vec2 value) {\n return vec2(\n floor(value.x / roundTo) * roundTo,\n floor(value.y / roundTo) * roundTo\n );\n}\n\nvoid main() {\n vec2 n = nearest(sin(progress * PI), texturePosition);\n gl_FragColor = mix(texture2D(a,n), texture2D(b,n), progress);\n}\n", gl.FRAGMENT_SHADER);
var program = createProgram(vertexShader, fragmentShader);
var params = { attributes: { position: gl.getAttribLocation(program, "position") }, uniforms: { a: gl.getUniformLocation(program, "a"), b: gl.getUniformLocation(program, "b"), c: gl.getUniformLocation(program, "c"), size: gl.getUniformLocation(program, "size"), progress: gl.getUniformLocation(program, "progress") }
};
var vertices = new Float32Array([-1.0, -1.0, 0.0, 0.0, 1.0, -1.0, 1.0, 0.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 0.0, 0.0, -1.0, 1.0, 0.0, 1.0, 1.0, 1.0, 1.0, 1.0]);
var buffer = createBuffer(vertices, gl.ARRAY_BUFFER);
var transitionCanvas = document.createElement("canvas");
transitionCanvas.width = 2048;
transitionCanvas.height = 1024;
var transitionContext = transitionCanvas.getContext("2d");
transitionContext.fillStyle = "#000";
transitionContext.fillRect(0, 0, transitionCanvas.width, transitionCanvas.height);
var textures = [createTextureFromUrl("http://rojo2.com/labs/webgl/image1.jpg"), createTextureFromUrl("http://rojo2.com/labs/webgl/image2.jpg")
//createTextureFromUrl("http://rojo2.com/labs/webgl/splats2.jpg")
//createTextureFromUrl("http://rojo2.com/labs/webgl/stripes.jpg")
//createTextureFromUrl("http://rojo2.com/labs/webgl/lines.jpg")
//createTextureFromUrl("http://rojo2.com/labs/webgl/radial.jpg")
];
function render(now) { var progress = (Math.sin(now / 1000.0) + 1.0) * 0.5; gl.clearColor(1.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, canvas.width, canvas.height); gl.useProgram(program); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, textures[0]); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, textures[1]); //gl.activeTexture(gl.TEXTURE2); //gl.bindTexture(gl.TEXTURE_2D, textures[2]); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.enableVertexAttribArray(params.attributes.position); gl.vertexAttribPointer(params.attributes.position, 4, gl.FLOAT, 0, 0, 16); gl.uniform1i(params.uniforms.a, 0); gl.uniform1i(params.uniforms.b, 1); //gl.uniform1i(params.uniforms.c, 2); gl.uniform1f(params.uniforms.progress, cubic(0, 1, 0, 1, progress)); gl.uniform2f(params.uniforms.size, canvas.width, canvas.height); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); window.requestAnimationFrame(render);
}
window.requestAnimationFrame(render);
var invert = 0;
window.addEventListener("click", function () { invert = !invert;
});
window.addEventListener("mousemove", function (e) { var x = e.clientX / window.innerWidth * transitionCanvas.width; var y = e.clientY / window.innerHeight * transitionCanvas.height; var size = Math.max(transitionCanvas.width, transitionCanvas.height) >> 4; for (var i = 0; i < 16; i++) { var sx = x + (Math.random() - 0.5) * size; var sy = y + (Math.random() - 0.5) * size; var ss = size * Math.random() * 0.125; var gradient = undefined; if (!invert) { gradient = transitionContext.createRadialGradient(sx, sy, 0, sx, sy, ss); gradient.addColorStop(0, "rgba(255,255,255,1.0)"); gradient.addColorStop(1, "rgba(255,255,255,0.0)"); } else { gradient = transitionContext.createRadialGradient(sx, sy, 0, sx, sy, ss); gradient.addColorStop(0, "rgba(0,0,0,1.0)"); gradient.addColorStop(1, "rgba(0,0,0,0.0)"); } transitionContext.globalOpacity = 0.125; transitionContext.fillStyle = gradient; transitionContext.fillRect(sx - ss, sy - ss, ss * 2, ss * 2); } updateTextureFromCanvas(transitionCanvas, textures[2]);
}, false);
window.addEventListener("resize", function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight;
});
window.dispatchEvent(new Event("resize"));
Blending Experiment 29 - Script Codes
Blending Experiment 29 - Script Codes
Home Page Home
Developer Aitor
Username AzazelN28
Uploaded September 16, 2022
Rating 4
Size 7,996 Kb
Views 26,312
Do you need developer help for Blending Experiment 29?

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!

Aitor (AzazelN28) Script Codes
Name
Adventure
Superformula
Multiple CSS Backgrounds
Romboids
AudioContext Concept
Dancing Text
Date Input
Countdown
Clock
Asteroids
Create amazing sales emails 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!