8th

akella · Oct 26, 2019 · 02786e8 · 02786e8
1 parent 9ab628e
commit 02786e8
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 *.DS_Store
+work/
diff --git a/index8.html b/index8.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>WebGL Image Transitions | Demo 1 | Codrops</title>
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<meta name="author" content="Codrops" />
+		<link rel="shortcut icon" href="favicon.ico">
+		<link rel="stylesheet" type="text/css" href="css/base.css" />
+		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+		<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
+	</head>
+	<body class="demo-1">
+		<main>
+			<div class="message">Some message for mobile (if needed).</div>
+			<div class="frame">
+				<div 
+					id="slider"
+					data-images='["/img/nike1.jpg","/img/nike2.jpg"]'
+					data-disp="/img/disp1.jpg"
+					>
+				</div>
+				<div class="frame__title-wrap">
+					<h1 class="frame__title">Title</h1>
+					<p class="frame__tagline">Subtitle</a></p>
+				</div>
+				<div class="frame__links">
+					<a href="">Previous Demo</a>
+					<a href="">Article</a>
+					<a href="">GitHub</a>
+				</div>
+				<div class="frame__demos">
+					<a href="index.html" class="frame__demo ">demo 1</a>
+					<a href="index2.html" class="frame__demo ">demo 2</a>
+					<a href="index3.html" class="frame__demo ">demo 3</a>
+					<a href="index4.html" class="frame__demo">demo 4</a>
+					<a href="index5.html" class="frame__demo">demo 5</a>
+					<a href="index6.html" class="frame__demo">demo 6</a>
+					<a href="index7.html" class="frame__demo frame__demo--current">demo 7</a>
+				</div>
+			</div>
+			<div class="content">
+				<!-- the content -->
+			</div>
+		</main>
+		<script src="js/three.js"></script>
+		<script src="js/dat-gui.js"></script>
+		<script src="js/gsap.js"></script>
+		<script src="js/sketch.js"></script>
+		<script src="js/demo8.js"></script>
+		<!--script src="https://tympanus.net/codrops/adpacks/demoad.js"></script-->
+	</body>
+</html>
diff --git a/js/demo8.js b/js/demo8.js
@@ -0,0 +1,83 @@
+// planetary
+let sketch = new Sketch({
+	debug: true,
+	uniforms: {
+		intensity: {value: 50., type:'f', min:1., max:100}
+	},
+	fragment: `
+		uniform float time;
+		uniform float progress;
+		uniform float intensity;
+		uniform float width;
+		uniform float scaleX;
+		uniform float scaleY;
+		uniform float transition;
+		uniform float radius;
+		uniform float swipe;
+		uniform sampler2D texture1;
+		uniform sampler2D texture2;
+		uniform sampler2D displacement;
+		uniform vec4 resolution;
+		varying vec2 vUv;
+		mat2 rotate(float a) {
+			float s = sin(a);
+			float c = cos(a);
+			return mat2(c, -s, s, c);
+		}
+		const float PI = 3.1415;
+		const float angle1 = PI *0.25;
+		const float angle2 = -PI *0.75;
+
+		const float noiseSeed = 2.;
+
+		float random() { 
+			return fract(sin(noiseSeed + dot(gl_FragCoord.xy / resolution.xy / 10.0, vec2(12.9898, 4.1414))) * 43758.5453);
+		}
+
+		float hash(float n) { return fract(sin(n) * 1e4); }
+		float hash(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); }
+
+		float hnoise(vec2 x) {
+			vec2 i = floor(x);
+			vec2 f = fract(x);
+
+			float a = hash(i);
+			float b = hash(i + vec2(1.0, 0.0));
+			float c = hash(i + vec2(0.0, 1.0));
+			float d = hash(i + vec2(1.0, 1.0));
+
+			vec2 u = f * f * (3.0 - 2.0 * f);
+			return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+		}
+
+
+		void main()	{
+
+			vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
+			
+			
+			float hn = hnoise(newUV.xy * resolution.xy / 100.0);
+
+			vec2 d = normalize(0.5 - newUV.xy);
+
+			vec2 uv1 = newUV + d * progress / 5.0 * (1.0 + hn / 2.0);
+			vec2 uv2 = newUV - d * (1.0 - progress) / 5.0 * (1.0 + hn / 2.0);
+
+
+			// vec2 uvDivided = fract(newUV*vec2(intensity,1.));
+
+
+			// vec2 uvDisplaced1 = newUV + rotate(3.1415926/4.)*uvDivided*progress*0.1;
+			// vec2 uvDisplaced2 = newUV + rotate(3.1415926/4.)*uvDivided*(1. - progress)*0.1;
+
+			vec4 t1 = texture2D(texture1,uv1);
+			vec4 t2 = texture2D(texture2,uv2);
+
+			gl_FragColor = mix(t1, t2, progress);
+
+		}
+
+	`
+});
+
+