textureWrap example

processing · Feb 23, 2019 · e67c1c6 · e67c1c6
1 parent 62a2dd3
commit e67c1c6
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/test/manual-test-examples/webgl/material/textureWrap/index.html b/test/manual-test-examples/webgl/material/textureWrap/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title></title>
+  <link rel="stylesheet" href="../../../styles.css">
+  <script language="javascript" type="text/javascript" src="../../../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="../../../../../lib/addons/p5.dom.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  <script src="../../stats.js"></script>
+</head>
+
+<body>
+  <header>
+    <p>press any key to toggle beteween CLAMP, MIRROR, REPEAT, and mixed wrap modes</p>
+  </header>
+</body>
+
+</html>
diff --git a/test/manual-test-examples/webgl/material/textureWrap/sketch.js b/test/manual-test-examples/webgl/material/textureWrap/sketch.js
@@ -0,0 +1,73 @@
+var img;
+var tex;
+var wrapShader;
+var wrapMode = 0;
+
+var vertexShader = `
+attribute vec3 aPosition;
+
+
+void main() {
+
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+
+  gl_Position = positionVec4;
+}`;
+
+var fragmentShader = `
+precision mediump float;
+
+uniform sampler2D uTex0;
+uniform vec2 uTexResolution;
+uniform vec2 uWindowSize;
+
+void main() {
+
+  // center the image in the screen coordinates
+  vec2 windowCoord = gl_FragCoord.xy - uWindowSize / 2.0 + uTexResolution / 2.0;
+
+  vec2 uv = windowCoord / uTexResolution;
+  uv.y = 1.0 - uv.y;
+
+  gl_FragColor = texture2D(uTex0, uv);
+}`;
+
+function preload() {
+  img = loadImage('../../assets/UV_Grid_Sm.jpg');
+}
+
+function setup() {
+  let canvas = createCanvas(windowWidth, windowHeight, WEBGL);
+
+  wrapShader = createShader(vertexShader, fragmentShader);
+
+}
+
+function draw() {
+  background(255);
+
+  shader(wrapShader);
+  wrapShader.setUniform('uTex0', img);
+  wrapShader.setUniform('uTexResolution', [img.width, img.height]);
+  wrapShader.setUniform('uWindowSize', [width, height]);
+
+  rect(0, 0, width, height);
+
+}
+
+function keyPressed() {
+  wrapMode = (wrapMode + 1) % 4;
+
+  if(wrapMode == 0){
+    textureWrap(CLAMP);
+  } else if( wrapMode == 1){
+    textureWrap(MIRROR);
+  } else if(wrapMode == 2) {
+    textureWrap(REPEAT);
+  } else if(wrapMode == 3){
+    textureWrap(CLAMP, MIRROR);
+  }
+
+
+}