A Pen by Nick Mkrtchyan

Developer
Nick Mkrtchyan
Size
6,258 Kb
Views
14,168
  1. A Pen by Nick Mkrtchyan Previews
  2. A Pen by Nick Mkrtchyan HTML Codes
  3. A Pen by Nick Mkrtchyan CSS Codes
  4. A Pen by Nick Mkrtchyan JS Codes

How do I make an a pen by nick mkrtchyan?

What is a a pen by nick mkrtchyan? How do you make a a pen by nick mkrtchyan? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

A Pen by Nick Mkrtchyan Previews
IQ Test

A Pen by Nick Mkrtchyan - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Nick Mkrtchyan</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; padding: 0; border: 0;
}
body { background: #ddf; font: 30px sans-serif; overflow: hidden;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 resolution;
uniform sampler2D texture;
void main() { vec2 uv = gl_FragCoord.xy / resolution.xy; gl_FragColor = texture2D( texture, uv );
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 position;
void main() { gl_Position = vec4( position, 1.0 );
}
</script>
<script id="surfaceVertexShader" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec2 surfacePosAttrib;
varying vec2 surfacePosition;
void main() { surfacePosition = surfacePosAttrib; gl_Position = vec4( position, 1.0 );
}
</script>
<script id="mengerfs" type="x-shader/x-fragment">
precision highp float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
vec2 rotate(vec2 p, float r)
{ return vec2(p.x * cos(r) - p.y * sin(r), p.x * sin(r) + p.y * cos(r));
}
float fr(float t) { return t < 0.0 ? ceil(t) : floor(t);
}
vec3 fr(vec3 t) { return vec3(fr(t.x), fr(t.y), fr(t.z));
}
float shader(vec2 uv, vec3 e)
{ float d = 1.0; float n; float Z = 3.0; float IZ = 1.0/Z; vec3 s = e; vec3 r = vec3(1.0, uv.x, uv.y); vec3 t = e; vec3 g = r; g.zx = rotate(g.zx, time * 0.2); vec3 ir = 1.0 / r; vec3 iv; vec3 zero = vec3(0.0); for(int i = 16; i >= 0;i--) { if (d <= 0.0001) { break; } d *= IZ; iv = fr(t); t = t - iv; t.xy *= Z; t.z = (t.z < 0.0) ? (1.0 + t.z) : t.z; t.z *= Z; iv = fr(t); float j = iv.x * iv.x + iv.y * iv.y + iv.z * iv.z; j = mod(j, 4.0); if (j >= 2.0) { vec3 f = max(sign(r), zero); t = (f - (t - iv)) * ir; n = min(min(t.x, t.y), t.z); e += r * (n * d + 0.001); t = e; d = 1.0; } } e -= s; return 1.0 - exp(-length(e));
}
void main()
{ float acc = 0.1; vec2 uv = gl_FragCoord.xy; uv /= resolution; uv *= 2.0; uv -= vec2(1.0); uv.x *= resolution.x / resolution.y; uv.x = abs(uv.x) < 0.001 ? 0.001 : uv.x; uv.y = abs(uv.y) < 0.001 ? 0.001 : uv.y; float t = time * 0.5; float ex = 0.5 + cos(t * 0.5) * acc; float ey = 0.5 + cos(t * 0.47) * acc; float ez = -t * 0.3 + sin(t * 0.3 - 0.01); float c = shader(uv, vec3(ex, ey, ez)); gl_FragColor = vec4(0, c, 0, 1.0);
}
</script>
<canvas id="menger"></canvas> <script> window.addEventListener('DOMContentLoaded', function(){ initGLSLCode(	document.getElementById('menger'),	document.getElementById('mengerfs').textContent );
}); </script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Nick Mkrtchyan - Script Codes CSS Codes

* { margin: 0; padding: 0; border: 0;
}
body { background: #ddf; font: 30px sans-serif; overflow: hidden;
}

A Pen by Nick Mkrtchyan - Script Codes JS Codes

function initGLSLCode(canvasElement, fs, rendercb) { var quality = 2, quality_levels = [ 0.5, 1, 2, 4, 8 ]; var canvas, gl, buffer, currentProgram, vertexPosition, screenVertexPosition,	parameters = { startTime: Date.now(), time: 0, mouseX: 0.5, mouseY: 0.5, screenWidth: 0, screenHeight: 0 },	surface = { centerX: 0, centerY: 0, width: 1, height: 1, isPanning: false, isZooming: false, lastX: 0, lastY: 0 },	frontTarget, backTarget, screenProgram, getWebGL, resizer = {}, compileOnChangeCode = true, renderCallback,	textureIndex; function init() {	canvas = canvasElement;	renderCallback = rendercb;	if (!document.addEventListener) { document.location = 'http://get.webgl.org/'; return;	}	//	try { gl = canvas.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } );	} catch( error ) { }	if (!gl) { alert("WebGL not supported, but code will be shown.");	} else { buffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, buffer ); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [ - 1.0, - 1.0, 1.0, - 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0 ] ), gl.STATIC_DRAW ); // Create surface buffer (coordinates at screen corners) surface.buffer = gl.createBuffer();	}	resizer.offsetMouseX = 0;	resizer.offsetMouseY = 0;	resizer.isResizing = false;	resizer.currentWidth = 100;	resizer.currentHeight = 100;	resizer.minWidth = 100;	resizer.minHeight = 100;	resizer.maxWidth = 100;	resizer.maxHeight = 100;	resizer.element = document.createElement( 'div' );	resizer.element.className = 'resizer';	resizer.element.addEventListener( 'mousedown', function ( event ) { if (event.button !== 2) {	resizer.offsetMouseX = event.clientX - resizer.currentWidth;	resizer.offsetMouseY = event.clientY - resizer.currentHeight;	resizer.isResizing = true;	event.preventDefault(); }	}, false );	if (gl) { var surfaceMouseDown = function ( event ) {	if (event.shiftKey) { resetSurface();	}	if (event.button === 0) { surface.isPanning = true; document.body.style.cursor = 'move';	} else { surface.isZooming = true; document.body.style.cursor = 'se-resize';	}	surface.lastX = event.clientX;	surface.lastY = event.clientY;	event.preventDefault(); }; var noContextMenu = function ( event ) {	event.preventDefault(); }; canvas.addEventListener( 'mousedown', surfaceMouseDown, false ); canvas.addEventListener( 'contextmenu', noContextMenu, false);	}	var clientXLast, clientYLast;	document.addEventListener( 'mousemove', function ( event ) { var clientX = event.clientX; var clientY = event.clientY; if (clientXLast == clientX && clientYLast == clientY)	return; clientXLast = clientX; clientYLast = clientY; var codeElement, dx, dy; parameters.mouseX = clientX / window.innerWidth; parameters.mouseY = 1 - clientY / window.innerHeight; if (resizer.isResizing) {	resizer.currentWidth = Math.max(Math.min(clientX - resizer.offsetMouseX, resizer.maxWidth), resizer.minWidth);	resizer.currentHeight = Math.max(Math.min(clientY - resizer.offsetMouseY, resizer.maxHeight), resizer.minWidth);	event.preventDefault(); } else if (surface.isPanning) {	dx = clientX - surface.lastX;	dy = clientY - surface.lastY;	surface.centerX -= dx * surface.width / window.innerWidth;	surface.centerY += dy * surface.height / window.innerHeight;	surface.lastX = clientX;	surface.lastY = clientY;	computeSurfaceCorners();	event.preventDefault(); } else if (surface.isZooming) {	dx = clientX - surface.lastX;	dy = clientY - surface.lastY;	surface.height *= Math.pow(0.997, dx + dy);	surface.lastX = clientX;	surface.lastY = clientY;	computeSurfaceCorners();	event.preventDefault(); }	}, false );	function settleDown ( event ) { resizer.isResizing = surface.isPanning = surface.isZooming = false; document.body.style.cursor = 'default';	}	function mouseLeave(event) { settleDown(event);	}	document.addEventListener( 'mouseup', settleDown, false );	document.addEventListener( 'mouseleave', mouseLeave, false );	onWindowResize();	window.addEventListener( 'resize', onWindowResize, false );	compileScreenProgram();	compile(fs);	if (gl) { animate(); } } function computeSurfaceCorners() {	if (gl) { surface.width = surface.height * parameters.screenWidth / parameters.screenHeight; var halfWidth = surface.width * 0.5, halfHeight = surface.height * 0.5; gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer ); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [	surface.centerX - halfWidth, surface.centerY - halfHeight,	surface.centerX + halfWidth, surface.centerY - halfHeight,	surface.centerX - halfWidth, surface.centerY + halfHeight,	surface.centerX + halfWidth, surface.centerY - halfHeight,	surface.centerX + halfWidth, surface.centerY + halfHeight,	surface.centerX - halfWidth, surface.centerY + halfHeight ] ), gl.STATIC_DRAW );	} } function resetSurface() {	surface.centerX = surface.centerY = 0;	surface.height = 1;	computeSurfaceCorners(); } function compile(fragment) {	if (!gl) { if (!getWebGL) {	getWebGL = true; } return;	}	var program = gl.createProgram();	//var fragment = document.getElementById('flarefs').textContent;	var vertex = document.getElementById('surfaceVertexShader').textContent;	var vs = createShader( vertex, gl.VERTEX_SHADER );	var fs = createShader( fragment, gl.FRAGMENT_SHADER );	if ( vs == null || fs == null ) return null;	gl.attachShader( program, vs );	gl.attachShader( program, fs );	gl.deleteShader( vs );	gl.deleteShader( fs );	gl.linkProgram( program );	if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) { var error = gl.getProgramInfoLog(program); console.error(error); console.error('VALIDATE_STATUS: ' + gl.getProgramParameter( program, gl.VALIDATE_STATUS ), 'ERROR: ' + gl.getError()); return;	}	if (currentProgram) { //gl.deleteProgram(currentProgram);	}	currentProgram = program;	// Cache uniforms	cacheUniformLocation( program, 'time' );	cacheUniformLocation( program, 'mouse' );	cacheUniformLocation( program, 'resolution' );	cacheUniformLocation( program, 'backbuffer' );	cacheUniformLocation( program, 'surfaceSize' );	// Load program into GPU	gl.useProgram( currentProgram );	// Set up buffers	surface.positionAttribute = gl.getAttribLocation(currentProgram, "surfacePosAttrib");	gl.enableVertexAttribArray(surface.positionAttribute);	vertexPosition = gl.getAttribLocation(currentProgram, "position");	gl.enableVertexAttribArray( vertexPosition ); }; function compileScreenProgram() {	if (!gl) { return; }	var program = gl.createProgram();	var fragment = document.getElementById( 'fragmentShader' ).textContent;	var vertex = document.getElementById( 'vertexShader' ).textContent;	var vs = createShader( vertex, gl.VERTEX_SHADER );	var fs = createShader( fragment, gl.FRAGMENT_SHADER );	gl.attachShader( program, vs );	gl.attachShader( program, fs );	gl.deleteShader( vs );	gl.deleteShader( fs );	gl.linkProgram( program );	if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) { console.error( 'VALIDATE_STATUS: ' + gl.getProgramParameter( program, gl.VALIDATE_STATUS ), 'ERROR: ' + gl.getError() ); return;	}	screenProgram = program;	gl.useProgram( screenProgram );	cacheUniformLocation( program, 'resolution' );	cacheUniformLocation( program, 'texture' );	screenVertexPosition = gl.getAttribLocation(screenProgram, "position");	gl.enableVertexAttribArray( screenVertexPosition ); } function cacheUniformLocation( program, label ) {	if ( program.uniformsCache === undefined ) { program.uniformsCache = {};	}	program.uniformsCache[ label ] = gl.getUniformLocation( program, label ); } // function createTarget( width, height ) {	var target = {};	target.framebuffer = gl.createFramebuffer();	target.renderbuffer = gl.createRenderbuffer();	target.texture = gl.createTexture();	// set up framebuffer	gl.bindTexture( gl.TEXTURE_2D, target.texture );	gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null );	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.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST );	gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST );	gl.bindFramebuffer( gl.FRAMEBUFFER, target.framebuffer );	gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target.texture, 0 );	// set up renderbuffer	gl.bindRenderbuffer( gl.RENDERBUFFER, target.renderbuffer );	gl.renderbufferStorage( gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height );	gl.framebufferRenderbuffer( gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, target.renderbuffer );	// clean up	gl.bindTexture( gl.TEXTURE_2D, null );	gl.bindRenderbuffer( gl.RENDERBUFFER, null );	gl.bindFramebuffer( gl.FRAMEBUFFER, null);	return target; } function createRenderTargets() {	frontTarget = createTarget( parameters.screenWidth, parameters.screenHeight );	backTarget = createTarget( parameters.screenWidth, parameters.screenHeight ); } // var dummyFunction = function() {}; function htmlEncode(str){	return String(str) .replace(/&/g, '&amp;') .replace(/"/g, '&quot;') .replace(/'/g, '&#39;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;'); } function createShader( src, type ) {	var shader = gl.createShader(type);	var line, lineNum, lineError, index = 0, indexEnd;	gl.shaderSource(shader, src);	gl.compileShader(shader);	if (!gl.getShaderParameter( shader, gl.COMPILE_STATUS)) { var error = gl.getShaderInfoLog( shader ); // Remove trailing linefeed, for FireFox's benefit. while ((error.length > 1) && (error.charCodeAt(error.length - 1) < 32)) {	error = error.substring(0, error.length - 1); } console.error( error ); return null;	}	return shader; } function onWindowResize( event ) {	var isMaxWidth = ((resizer.currentWidth === resizer.maxWidth) || (resizer.currentWidth === resizer.minWidth)), isMaxHeight = ((resizer.currentHeight === resizer.maxHeight) || (resizer.currentHeight === resizer.minHeight));	resizer.isResizing = false;	resizer.maxWidth = window.innerWidth - 75;	resizer.maxHeight = window.innerHeight - 125;	if (isMaxWidth || (resizer.currentWidth > resizer.maxWidth)) { resizer.currentWidth = resizer.maxWidth;	}	if (isMaxHeight || (resizer.currentHeight > resizer.maxHeight)) { resizer.currentHeight = resizer.maxHeight;	}	if (resizer.currentWidth < resizer.minWidth) { resizer.currentWidth = resizer.minWidth; }	if (resizer.currentHeight < resizer.minHeight) { resizer.currentHeight = resizer.minHeight; }	canvas.width = window.innerWidth / quality;	canvas.height = window.innerHeight / quality;	canvas.style.width = window.innerWidth + 'px';	canvas.style.height = window.innerHeight + 'px';	parameters.screenWidth = canvas.width;	parameters.screenHeight = canvas.height;	computeSurfaceCorners();	if (gl) { gl.viewport( 0, 0, canvas.width, canvas.height ); createRenderTargets();	} } // function animate() {	requestAnimationFrame( animate );	render(); } function render() {	if (!currentProgram) return;	parameters.time = Date.now() - parameters.startTime;	// Set uniforms for custom shader	gl.useProgram( currentProgram );	gl.uniform1f( currentProgram.uniformsCache[ 'time' ], parameters.time / 1000 );	gl.uniform2f( currentProgram.uniformsCache[ 'mouse' ], parameters.mouseX, parameters.mouseY );	gl.uniform2f( currentProgram.uniformsCache[ 'resolution' ], parameters.screenWidth, parameters.screenHeight );	gl.uniform1i( currentProgram.uniformsCache[ 'backbuffer' ], 0 );	gl.uniform2f( currentProgram.uniformsCache[ 'surfaceSize' ], surface.width, surface.height );	if (renderCallback) { renderCallback(gl);	}	gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer );	gl.vertexAttribPointer( surface.positionAttribute, 2, gl.FLOAT, false, 0, 0 );	gl.bindBuffer( gl.ARRAY_BUFFER, buffer );	gl.vertexAttribPointer( vertexPosition, 2, gl.FLOAT, false, 0, 0 );	gl.activeTexture( gl.TEXTURE0);	gl.bindTexture( gl.TEXTURE_2D, backTarget.texture );	// Render custom shader to front buffer	gl.bindFramebuffer( gl.FRAMEBUFFER, frontTarget.framebuffer );	gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );	gl.drawArrays( gl.TRIANGLES, 0, 6 );	// Set uniforms for screen shader	gl.useProgram( screenProgram );	gl.uniform2f( screenProgram.uniformsCache[ 'resolution' ], parameters.screenWidth, parameters.screenHeight );	gl.uniform1i( screenProgram.uniformsCache[ 'texture' ], 1 );	gl.bindBuffer( gl.ARRAY_BUFFER, buffer );	gl.vertexAttribPointer( screenVertexPosition, 2, gl.FLOAT, false, 0, 0 );	gl.activeTexture( gl.TEXTURE1 );	gl.bindTexture( gl.TEXTURE_2D, frontTarget.texture );	// Render front buffer to screen	gl.bindFramebuffer( gl.FRAMEBUFFER, null );	gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );	gl.drawArrays( gl.TRIANGLES, 0, 6 );	// Swap buffers	var tmp = frontTarget;	frontTarget = backTarget;	backTarget = tmp; } init(); return {	program : currentProgram,	gl : gl };
}
A Pen by Nick Mkrtchyan - Script Codes
A Pen by Nick Mkrtchyan - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4
Size 6,258 Kb
Views 14,168
Do you need developer help for A Pen by Nick Mkrtchyan?

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!

Nick Mkrtchyan (Sonick) Script Codes
Name
CSS3 Room
Canvas Starfield
Canvas Green Particles
Animan CSS3
3D Gallery
CSS3 Text Animation Effect
Preloader
Canvas Hover Effect
CSS2 Spotlight
CSS3 Text Animation Effect 2
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!