Stauffer Project1 Submission 1

README.md

@@ -1,5 +1,34 @@
 # [HW1: Noise](https://github.com/CIS700-Procedural-Graphics/Project1-Noise)
 
+## Stauffer Notes - Project One - Noise
+
+Sorry for the inelegant code. I didn't have time to make it prettier.
+I left my comments in so that I can know what was going on when I get back to the code one day.
+
+My code implements:
+
+1. Two independently controlled multi-octave noise (MON) generators.
+2. Each uses the same underlying noise generator, unfortunately, although this may give some good continuity effects.
+3. Each can have its parameters controlled from the GUI:
+
+	a. N1 is for generator one, N2 is for generator two
+
+	b. Time Scale - scales down the time value to control 'speed' of animation
+
+	c. fundamental - set the fundamental frequency of sampling
+
+	d. harmScale - set the scaling factor between harmonics of the MON. Harmonic N = fundamental * harmScale ^ (N-1).
+
+	e. components - the number of harmonics in the MON.
+
+	f. persistence - scales the amplitude of each component in the MON. Values > 1 are interesting!
+
+	g. symmetry[XYZ] - controls symmetry of noise across each axis. Only looks good if 0 or 1. Intermediate values look good in static renders but I had trouble making it smooth with how I was using time to vary vertex position.
+
+4. Time is used simply to offset vertex position, and vertex position is used to generate noise. This has awkward effect of making noise look to be moving in a direction in some cases. Better would be to create true 4D noise with time as 4th dim.
+5. The default settings combine symmetry in X for a slow movig, high spatial-frequency noise, with symmetry in Y for a faster-moving, low spatial-frequency noise. I think this makes it look alive, like a tiny plankton creature, undulating with water pressure and life processes.
+
+
 ## Getting Started
 
 1. [Install Node.js](https://nodejs.org/en/download/). Node.js is a JavaScript runtime. It basically allows you to run JavaScript when not in a browser. For our purposes, this is not necessary. The important part is that with it comes `npm`, the Node Package Manager. This allows us to easily declare and install external dependencies such as [three.js](https://threejs.org/), [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage), and [glMatrix](http://glmatrix.net/). Some other packages we'll be using make it significantly easier to develop your code and create modules for better code reuse and clarity. These tools make it _signficantly_ easier to write code in multiple `.js` files without globally defining everything.

src/framework.js

@@ -21,9 +21,14 @@ function init(callback, update) {
     stats: stats
   };
 
+	//Stauffer test
+	window.addEventListener('click', function(event) {
+	  console.log("You clicked:", event.screenX, event.screenY);
+	});
+
   // run this function after the window loads
   window.addEventListener('load', function() {
-
+	console.log(" IN load callback func");
     var scene = new THREE.Scene();
     var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
     var renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -43,6 +48,7 @@ function init(callback, update) {
 
     // resize the canvas when the window changes
     window.addEventListener('resize', function() {
+      console.log(" IN resize cback func");
       camera.aspect = window.innerWidth / window.innerHeight;
       camera.updateProjectionMatrix();
       renderer.setSize(window.innerWidth, window.innerHeight);

src/main.js

@@ -2,6 +2,43 @@
 const THREE = require('three'); // older modules are imported like this. You shouldn't have to worry about this much
 import Framework from './framework'
 
+//Make this a global so can see it in onUpdate to
+// get at uniforms.
+//Must be a better way!?
+//
+var adamMaterial = new THREE.ShaderMaterial({
+uniforms: {
+  image: { // Check the Three.JS documentation for the different allowed types and values
+	type: "t", 
+	value: THREE.ImageUtils.loadTexture('./adam.jpg')
+	},
+  //Maybe better to do this by creating a second shader?
+  uTimeMsec: { value: 0.0 },
+  uN1TimeScale: { value: 15000.0 },
+  uN1Scale: { value: 0.8 },
+  uN1fundamental: { value: 2.71828 },
+  uN1overtoneScale: { value: 2.71828 },
+  uN1numComponents: { value: 3.0 },
+  uN1persistence: { value: 2 },
+  uN1symmetryX: {value: 1.0 },
+  uN1symmetryY: {value: 0.0 },
+  uN1symmetryZ: {value: 0.0 },
+
+  uN2TimeScale: { value: 1500.0 },
+  uN2Scale: { value: 1.0 },
+  uN2fundamental: { value: 0.1 },
+  uN2overtoneScale: { value: 2.71828 },
+  uN2numComponents: { value: 4.0 },
+  uN2persistence: { value: 1.5 },
+  uN2symmetryX: {value: 0.0 },
+  uN2symmetryY: {value: 1.0 },
+  uN2symmetryZ: {value: 0.0 }
+
+  },
+vertexShader: require('./shaders/project1-vert.glsl'),
+fragmentShader: require('./shaders/project1-frag.glsl')
+});
+
 // called after the scene loads
 function onLoad(framework) {
   var scene = framework.scene;
@@ -15,21 +52,13 @@ function onLoad(framework) {
 
   // initialize a simple box and material
   var box = new THREE.BoxGeometry(1, 1, 1);
-
-  var adamMaterial = new THREE.ShaderMaterial({
-    uniforms: {
-      image: { // Check the Three.JS documentation for the different allowed types and values
-        type: "t", 
-        value: THREE.ImageUtils.loadTexture('./adam.jpg')
-      }
-    },
-    vertexShader: require('./shaders/adam-vert.glsl'),
-    fragmentShader: require('./shaders/adam-frag.glsl')
-  });
-  var adamCube = new THREE.Mesh(box, adamMaterial);
-
+  var sphere = new THREE.SphereGeometry(1, 120, 120);
+
+  //var adamCube = new THREE.Mesh(box, adamMaterial);
+  var adamCube = new THREE.Mesh(sphere, adamMaterial);
+
   // set camera position
-  camera.position.set(1, 1, 2);
+  camera.position.set(0, 0, 3);
   camera.lookAt(new THREE.Vector3(0,0,0));
 
   scene.add(adamCube);
@@ -39,11 +68,36 @@ function onLoad(framework) {
   gui.add(camera, 'fov', 0, 180).onChange(function(newVal) {
     camera.updateProjectionMatrix();
   });
+  //console.log(adamMaterial.uniforms.uTime.value);
+  gui.add(adamMaterial.uniforms.uN1TimeScale, 'value', 0.01, 25000).name('N1 Time Scale');
+  gui.add(adamMaterial.uniforms.uN1Scale, 'value', 0.01, 10).name('N1 Size Scale');
+  gui.add(adamMaterial.uniforms.uN1fundamental, 'value', 0.01, 10).name('N1 fundamental');
+  gui.add(adamMaterial.uniforms.uN1overtoneScale, 'value', 0.1, 10).name('N1 harmScale');
+  gui.add(adamMaterial.uniforms.uN1numComponents, 'value', 1, 16).name('N1 components');
+  gui.add(adamMaterial.uniforms.uN1persistence, 'value', 0.1, 4).name('N1 persistence');
+  gui.add(adamMaterial.uniforms.uN1symmetryX, 'value', 0.0, 1.0).name('N1 symmetryX');
+  gui.add(adamMaterial.uniforms.uN1symmetryY, 'value', 0.0, 1.0).name('N1 symmetryY');
+  gui.add(adamMaterial.uniforms.uN1symmetryZ, 'value', 0.0, 1.0).name('N1 symmetryZ');
+
+  gui.add(adamMaterial.uniforms.uN2TimeScale, 'value', 0.01, 25000).name('N2 Time Scale');
+  gui.add(adamMaterial.uniforms.uN2Scale, 'value', 0, 10).name('N2 Size Scale');
+  gui.add(adamMaterial.uniforms.uN2fundamental, 'value', 0.01, 10).name('N2 fundamental');
+  gui.add(adamMaterial.uniforms.uN2overtoneScale, 'value', 0.1, 10).name('N2 harmScale');
+  gui.add(adamMaterial.uniforms.uN2numComponents, 'value', 1, 16).name('N2 components');
+  gui.add(adamMaterial.uniforms.uN2persistence, 'value', 0.1, 4).name('N2 persistence');
+  gui.add(adamMaterial.uniforms.uN2symmetryX, 'value', 0.0, 1.0).name('N2 symmetryX');
+  gui.add(adamMaterial.uniforms.uN2symmetryY, 'value', 0.0, 1.0).name('N2 symmetryY');
+  gui.add(adamMaterial.uniforms.uN2symmetryZ, 'value', 0.0, 1.0).name('N2 symmetryZ');
+
+  //start the time
+  framework.startTime = Date.now();
 }
 
 // called on frame updates
 function onUpdate(framework) {
-  console.log(`the time is ${new Date()}`);
+  //console.log(`the time is ${new Date()}`);
+  adamMaterial.uniforms.uTimeMsec.value = Date.now() - framework.startTime;
+  //console.log(adamMaterial.uniforms.uTimeMsec.value);
 }
 
 // when the scene is done initializing, it will call onLoad, then on frame updates, call onUpdate

src/npm-debug.log

@@ -0,0 +1,24 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'stop' ]
+2 info using npm@3.10.10
+3 info using node@v6.9.4
+4 verbose stack Error: missing script: stop
+4 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:151:19)
+4 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:61:5
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:356:5
+4 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:320:45)
+4 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:354:3)
+4 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:5)
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:311:12
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16
+4 verbose stack     at tryToString (fs.js:455:3)
+4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:12)
+5 verbose cwd /Users/michael/Box Sync/Penn/MES/700-006-Procedural-Gfx-Spr-2017/week1/HW1/Project1-Noise/src
+6 error Darwin 14.5.0
+7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "stop"
+8 error node v6.9.4
+9 error npm  v3.10.10
+10 error missing script: stop
+11 error If you need help, you may report this error at:
+11 error     <https://github.com/npm/npm/issues>
+12 verbose exit [ 1, true ]

src/shaders/adam-frag.glsl

@@ -7,6 +7,6 @@ void main() {
 
   vec4 color = texture2D( image, vUv );
 
-  gl_FragColor = vec4( color.rgb, 1.0 );
+  gl_FragColor = vec4( color.gbr, 1.0 );
 
 }

src/shaders/adam-vert.glsl

@@ -1,6 +1,6 @@
-
+uniform float uScale;
 varying vec2 vUv;
 void main() {
     vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position * uScale, 1.0 );
 }

src/shaders/project1-frag.glsl

@@ -0,0 +1,17 @@
+varying vec2 vUv;
+varying float vNoise;
+uniform sampler2D image;
+
+float getSin(float t){
+  return sin( t * 1.57);
+}
+
+void main() {
+
+  //vec4 color = texture2D( image, vUv );
+  //gl_FragColor = vec4( color.gbr, 1.0 );
+  //float val = getSin( vUv.x );
+  //gl_FragColor = vec4( val, val, val, 1.0 );
+
+  gl_FragColor = vec4( vNoise*vNoise*vNoise, vNoise*vNoise, (1.0-vNoise) * (1.0-vNoise), 1.0 );
+}