R.P. Churchill.com | Adventures in Engineering and Life

Data Collection: Minimum Sample Size

Posted on February 22, 2017 by R.P. Churchill

While searching my hard drive for images representative of data collection I stumbled upon something I’ve also had in mind to look for, which is guidance on how to determine the minimum required sample size. The formulas are usually variations on this equation:

n >= (z • σ / MOE)²

where:

    n = minimum sample size
    z = z-score (e.g., 1.96 for 95% confidence interval)
    σ = sample standard deviation
    MOE = measure of effectiveness (e.g., difference between sample and population means in units of whatever you’re measuring)

The initial sample population should be at least 30. In theory this method only applies to data that is normally distributed, which a lot of data aren’t. Process times for many activities tends to be skewed left, where most of the values cluster to the low end with a long tail of higher values.

Other forms of this calculation are easily located via search.

A form of this calculation will be added to the simulation framework as the data collection capabilities are implemented. The data collection interface will provide ongoing estimates of required sample size as the sample data are collected, and will let the user know when the minimum number of data points is reached.

Posted in Tools and methods | Tagged data collection, sample size, statistics | Leave a comment

GitHub — Ya Gotta Start Somewhere

Posted on February 21, 2017 by R.P. Churchill

I’ve had brief encounters with GitHub over time but not enough to gain any muscle memory. As I’m finalizing the last bits of static content for my website, learning how to work with GitHub makes a good side project.

https://github.com/rpchurchill

I’ve poked around in a few repositories to get the feel of what they’re doing and how it all fits together, I’ve worked through the course at Code Academy, and I’ve used it a bit from the command line but that’s no substitute for using it consistently over time in different modes.

The first new repository I created, beyond the ones that already existed from the aforementioned encounters, is for the discrete-event simulation project. As it stands now this project is just one big file with all of the flotsam and jetsam in it from my stream-of-consciousness explorations, and a couple of supporting framework files I’ll never touch. My workflow has been to create a new version of it with every update, appended with the date in the form discrete-event-sim_yyyymmdd.html, upload it to my site, and make it available in an iframe embedded in that day’s WordPress post. If I want to make it easy to view as a standalone page on a mobile device I include a separate link to it.

This workflow has been pretty effective for me. I have all of the dated versions of the code in a directory on my computer and on my web host, so I know what’s going on, but in the longer run the main file will have to get cleaned up, divided into modules, and made available in a form amenable to being worked on by more than one person.

This part of the effort is on the project’s To Do list anyway, so I’m killing multiple birds with this stone. Over time I’ll add repositories for other projects I have worked on or am working on, and we’ll see where it goes.

Posted in Tools and methods | Tagged GitHub | Leave a comment

Website Update Update

Posted on February 20, 2017 by R.P. Churchill

I continued to tweak the meta tag settings on some of the pages to get them to look right on mobile devices. I got to test things on several different phones yesterday, which helped a lot. What I came up with was this:

This setting worked well to scale most of the pages in an effective way. It fits the header in without extra line breaks and ensures the content fills up most of the width of the page. This is the desired result for most pages, in both portrait and landscape modes. This is most important on the Roles and Portfolio main pages, where I wanted the header to be spaced without line breaks while the content displays as a single column of article entries that fill the width of the screen.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

The home page needs to accommodate a slightly wider header and two fairly wide elements at the top of the page while ensuring that the article entries (duplicates of those found on the Roles page) show up in a single column filling the width of the screen. I tried setting the width directly to 750 in an attempt to get the page behavior I wanted but that made the display run off the right side of the screen. Then I tried setting the scale down to 0.5 and got the effect I wanted. I can’t say I understand this quite yet, I need to read more, but it worked well on a number of devices. Interestingly, when some phones are rotated to landscape mode the header and top elements still look OK while the articles show up three across at their 350-pixels wide setting. That actually works for me.

    <meta name="viewport" content="width=750, initial-scale=0.5">

1	<meta name="viewport" content="width=750, initial-scale=0.5">

Finally, I wanted the resume page to be displayed in a zoomed-out format that would make the layout most closely match the way it would look on the printed page. The solution that worked best was commenting the meta tag out altogether. This just lets each device take its best shot at rendering something at its native resolution. I don’t know how this will look on significantly older phones but it looked about the way I wanted it on all of those I tried. I see that my phone scales down the text in the two sections arranged as three columns of bullets while the remainder of the non-header text is of uniform size.

Last but not least I saw that the site would route the user to the address rpchurchill.com/rpc/, which generated a server error. If the rpc/ was hand-edited off the address then everything worked, but that was clearly not acceptable. This seemed to be a reference to the site’s root directory on my webhost’s server. The root directories of all my domains on that service share the same master parent directory. A brief inspection showed a stray .htaccess file in that shared master directory left over from moving the WordPress installation down one level. I changed the name of that file, effectively deleting it, and that solved the problem.

I’m not saying this setup is optimal but it seems to work and doesn’t involve code. I learned a lot by going through this process and it gives me a good basis for learning and asking questions going forward.

In the meantime feel free to let me know if anything doesn’t look right on one of your devices. This is especially true if you have suggestions for better ways to do any of it. 🙂

Posted in Software | Tagged HTML, web design | Leave a comment

Website Update Mostly Complete

Posted on February 16, 2017 by R.P. Churchill

I slogged through and got the hard part done. Migrating the WordPress installation down one directory was blissfully easy and the rest of it was just applying elbow grease and being thorough. It’s nice having a true landing page. That said, the materials need some tweaking there and I have to make backing pages for some of the articles on the Roles page. I may add a couple more articles on the Portfolio page.

Everything looks OK on a regular computer but it’s not behaving the way I’d like on my phone. The Roles and Portfolio pages were showing up on my phone with the articles in two columns. Its actual pixel width is 750 so I set the responsive breakpoint to 860 pixels. It stretches the articles out so they’re up to 650 pixels across below a screen width of 860, which means they show up as only one column. Above a screen width of 860 the articles assume a standard maximum width of 350, which means they’ll display as many across as the screen width will fit (effectively up to four because I cap the page width at 1600). The idea was that 750 was less than 860 so the articles would be 650 and only show up as one column sized reasonably to most phones.

Problem: the effective pixel width of my iPhone 7 is 980 pixels. That’s larger than my breakpoint and yielded two columns of 350-pixel articles.

I quickly looked around for some kind of solution and tried the following (this appears to have no effect on desktop browsers):

    <meta name="viewport" content="width=600, initial-scale=1.0">

1	<meta name="viewport" content="width=600, initial-scale=1.0">

In theory this should set the effective screen size to 600, which would be perfect for my needs. It would look good on most devices. This setting doesn’t appear to do what I thought it did, however. It looks like it fits about 2/3s of the image on the screen. Is this 600 / 980 -ish? I can pinch it into place but I have to do that for every new page, even after rebooting the phone, so that’s highly non-optimal.

This is annoying but it’ll have to keep for a bit. I’ll definitely be doing some more reading and experimenting until this makes sense to me. It may well take some coding. We shall see.

Posted in Software | Tagged CSS, HTML, web design | Leave a comment

Website Update In Progress

Posted on February 15, 2017 by R.P. Churchill

I’m in the process of hand-editing all of the static webpages and I think it’s coming together reasonably. Doing these pages over and over again makes it clear that I should be doing at least the simplest level of automation, which is using common header and footer sections and tying the pieces together using simple PHP.

While that or something like it should be straightforward I still have to migrate the WordPress installation down one level and make sure the responsive ideas I’ve had actually work on mobile devices. I think what I’ve done will work, but I won’t know what I’ve done will work until I see it. Murphy’s Law and all that…

Posted in Software | Tagged CSS, HTML, web design | Leave a comment

Responsive Design: One Observation

Posted on February 14, 2017 by R.P. Churchill

I try to keep digging until I understand things from first principles if it’s at all practical. I won’t claim I’m above settling for a temporary fix if there’s a deadline or so I can move on for a while, but I don’t like doing it and will try to circle back to get it right when I can. I’ll definitely comment or otherwise document the loose end.

Today’s invocation of this desire involved making the new static pages reasonably responsive. It took several cycles of reading and experimenting with things until the pieces started to come together in my mind. I’ll spare you the details and a long list of links; you’re welcome to check the CSS when it’s all done. Until then the observation is that I saw that the idea of trying to target configurations for individual devices is a mug’s game. To put this even more strongly I was thinking you’d have to be on crack to try to jump through all those hoops. I knew there had to be a simpler way but I didn’t yet know what it was.

This impression was confirmed during my continued reading but I still had to figure out why different files were acting inconsistently on different devices (I was using my phone, a couple different browsers on my PC, and the test capability in Chrome that I’d discovered previously). “Why,” I asked myself, “is a media query applying when the screen size clearly indicates that it shouldn’t?” That’s when I finally “got” what the meta/viewport element is for and that I need to include it in all the HTML files.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

This (also pay special attention to the notes at the very bottom of this page) tells the device to treat its operational resolution as its native, physical resolution.

I get why devices try to scale things and I’ve noticed this on my iPhones over time, especially my own WordPress pages. It seems much simpler to not have to predict what different devices are going to do. Monkeying with this stuff takes enough effort without having to deal with extra steps.

There are doubtless a few inconsistencies left to stumble over but I’m thinking the rest of this process just got a lot easier.

Posted in Software | Tagged CSS, HTML, web design | Leave a comment

Random Explorations

Posted on February 13, 2017 by R.P. Churchill

Over the past few weeks I met two nice people who have both built websites based on Jekyll (the newer one was actually based on OctoPress). As I’m redoing my website I’m trying to find a good way to make the blog content be somewhat deemphasized in favor of the more or less static content. The simplest way to do this would be to migrate the WordPress installation down one directory level and install the static content in the root (and its subdirectories). As it is now the static content that really should constitute the landing page is stored a couple of levels down. It and the resume page are linked semi-conspicuously at the top of the WordPress page so it’ll keep for now.

I will, however, pirate some of the layout ideas from the OctoPress framework, though I have no plans to use that framework. The front content is meant to be static, after all, and the blog content is the blog content. They are different. In the meantime the article layout of the “front” pages ends up being flexible and responsive without incorporating Bootstrap or something similar. The new stuff will make an appearance over the next couple of days and I’ll work out a more permanent solution after that.

Posted in Software | Tagged CSS, HTML, web design | Leave a comment

WebGL: Incorporating Device Orientation

Posted on February 9, 2017 by R.P. Churchill

At last night’s DCJS Meetup (specifically Sean’s talk referencing this) I learned that a means of reading the 3D orientation of a device has been readily available for some time. Descriptions were not hard to find.

Setting up the listener is easy enough. The window.DeviceOrientationEvent test will actually pass on a lot of devices, including my laptop, even if they don’t actually fire off the update events, therefore I initialize the angles to null and use them as a test for updating the camera orientation.

      //VR controls viewing direction
      var lookAngleX;
      var lookAngleY;
      var lookAngleZ;
      
      if (!window.DeviceOrientationEvent) {
        alert("no gyro");
      }
      lookAngleX = null;
      lookAngleY = null;
      lookAngleZ = null;
      
      function handleOrientation(event) {
        lookAngleX = event.beta;
        lookAngleY = event.gamma;
        lookAngleZ = event.alpha;
      }
      
      window.addEventListener("deviceorientation", handleOrientation);

//VR controls viewing direction

var lookAngleX;

var lookAngleY;

var lookAngleZ;

if (!window.DeviceOrientationEvent) {

alert("no gyro");

}

lookAngleX = null;

lookAngleY = null;

lookAngleZ = null;

function handleOrientation(event) {

lookAngleX = event.beta;

lookAngleY = event.gamma;

lookAngleZ = event.alpha;

}

window.addEventListener("deviceorientation", handleOrientation);

If the orientation events don’t fire then I let the camera move and continue to look at the origin of the scene as before but if the events to fire I stop the camera from moving and update its orientation in space instead. The 90 degree adjustment for rotation around the X-axis was something I added to make the view make sense. That may be an artifact of the coordinate system I set up. An additional adjustment may be necessary on Firefox on some devices.

        //update location of viewport camera
        camera.position.set(x,y,z);
        if (lookAngleX == null) {
          camera.lookAt(global3DLookTarget);
        } else {
          camera.rotation.x = (lookAngleX - 90.0) * Math.PI / 180.0;
          camera.rotation.y = lookAngleY * Math.PI / 180.0;
          camera.rotation.z = lookAngleZ * Math.PI / 180.0;
          cInc = 0.0;
        }
      }

//update location of viewport camera

camera.position.set(x,y,z);

if (lookAngleX == null) {

camera.lookAt(global3DLookTarget);

} else {

camera.rotation.x = (lookAngleX - 90.0) * Math.PI / 180.0;

camera.rotation.y = lookAngleY * Math.PI / 180.0;

camera.rotation.z = lookAngleZ * Math.PI / 180.0;

cInc = 0.0;

}

Here’s a direct link to test on your mobile device. Let me know if it works for you. Here‘s a different way to see if your device even supports this functionality.

This setup looks like it works on my iPhone for small rotations but it really doesn’t behave the way I’d want it to. There’s clearly a lot more going on. I’m going to dig into that a bit later but in the meantime I found an even more direct — and easier — way to accomplish this. Addendum, February 22, 2017: No, that’s not what was going on, this is what was going on. The rotations I did accounted for the directional vector but not the rotation around that vector. This is the extra factor addressed in DeviceOrientationControls.js.

Three.js already includes a way to incorporate a device’s orientation, and that is by including the capabilities in DeviceOrientationControls.js. An example is here. I pulled all of the previous code out and replaced it with all of three new lines identified below, and also set the orbit increment to zero.

    <script src="js/three.js"></script>
    <script src="js/Detector.js"></script>
    <script src="js/DeviceOrientationControls.js"></script>  //new

    ...

        aspectRatio = window.innerWidth/window.innerHeight;
        camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

        renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        
        canvas = renderer.domElement;
        document.body.appendChild(canvas);  //can also be appended to a DIV
        
        controls = new THREE.DeviceOrientationControls( camera );  //new

        scene = new THREE.Scene();
        renderer.setClearColor("#000000",1);

    ...

      function render() {
        //each cube rotates around a different axis
        cube1.rotation.x += 0.01;
        cube2.rotation.y += 0.01;
        cube3.rotation.z += 0.01;

        cylRotations();

        controls.update();  //new

        renderer.render(scene, camera);

        requestAnimationFrame(render);
      }

...

aspectRatio = window.innerWidth/window.innerHeight;

camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

renderer.setSize(window.innerWidth, window.innerHeight);

canvas = renderer.domElement;

document.body.appendChild(canvas); //can also be appended to a DIV

controls = new THREE.DeviceOrientationControls( camera ); //new

scene = new THREE.Scene();

renderer.setClearColor("#000000",1);

...

function render() {

//each cube rotates around a different axis

cube1.rotation.x += 0.01;

cube2.rotation.y += 0.01;

cube3.rotation.z += 0.01;

cylRotations();

controls.update(); //new

renderer.render(scene, camera);

requestAnimationFrame(render);

}

It could not be easier.

My quick hack for checking this out on your device directly is here. It won’t do anything on a device that doesn’t support sensing of orientation but it looks and works great on my phone.

The next thing I’d have to do is figure out how to determine whether the device supports this new addition and revert to the previous orbit-and-look-at-the-origin behavior.

Posted in Software | Tagged device orientation, JavaScript, Three.js, WebGL | Leave a comment

WebGL Is Supported By Most Browsers — Most of the Time

Posted on February 8, 2017 by R.P. Churchill

Working through yesterday’s post I found it necessary to test the code in multiple browsers and, when it failed, to use the debuggers to figure out where. The different examples I’ve put together for this site and for last week’s presentation all run and ran fine on Firefox, which is where I do most of my work. Everything worked in IE and Edge as well. Nothing worked in Chrome or Opera, even though everything worked in both last week.

That’s right — now you see it, now you don’t.

Exactly why things do or do not work is dependent on two major things: details of the latest browser version (particularly in how it leverages any GPU in the system for hardware acceleration) and the version of the WebGL and Three.js libraries themselves. As of today the failures always occur when trying to create the renderer object.

        aspectRatio = window.innerWidth/window.innerHeight;
        camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

        renderer = new THREE.WebGLRenderer();  //fails here
        renderer.setSize(window.innerWidth, window.innerHeight);
        
        canvas = renderer.domElement;
        document.body.appendChild(canvas);  //can also be appended to a DIV

        scene = new THREE.Scene();

aspectRatio = window.innerWidth/window.innerHeight;

camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

renderer = new THREE.WebGLRenderer(); //fails here

renderer.setSize(window.innerWidth, window.innerHeight);

canvas = renderer.domElement;

document.body.appendChild(canvas); //can also be appended to a DIV

scene = new THREE.Scene();

Within the Three.js code the code for creating the renderer object is here, and the variable _gl ends up with a value of null and throws an exception.

		// initialize  //this is line 19672 in Three.js unminified

		var _gl;

		try {

			var attributes = {
				alpha: _alpha,
				depth: _depth,
				stencil: _stencil,
				antialias: _antialias,
				premultipliedAlpha: _premultipliedAlpha,
				preserveDrawingBuffer: _preserveDrawingBuffer
			};

			_gl = _context || _canvas.getContext( 'webgl', attributes ) || _canvas.getContext( 'experimental-webgl', attributes );

			if ( _gl === null ) {

				if ( _canvas.getContext( 'webgl' ) !== null ) {

					throw 'Error creating WebGL context with your selected attributes.';

				} else {

					throw 'Error creating WebGL context.';

				}

			}

			// Some experimental-webgl implementations do not have getShaderPrecisionFormat

			if ( _gl.getShaderPrecisionFormat === undefined ) {

				_gl.getShaderPrecisionFormat = function () {

					return { 'rangeMin': 1, 'rangeMax': 1, 'precision': 1 };

				};

			}

			_canvas.addEventListener( 'webglcontextlost', onContextLost, false );

		} catch ( error ) {

			console.error( 'THREE.WebGLRenderer: ' + error );

		}

// initialize //this is line 19672 in Three.js unminified

var _gl;

try {

var attributes = {

alpha: _alpha,

depth: _depth,

stencil: _stencil,

antialias: _antialias,

premultipliedAlpha: _premultipliedAlpha,

preserveDrawingBuffer: _preserveDrawingBuffer

};

_gl = _context || _canvas.getContext( 'webgl', attributes ) || _canvas.getContext( 'experimental-webgl', attributes );

if ( _gl === null ) {

if ( _canvas.getContext( 'webgl' ) !== null ) {

throw 'Error creating WebGL context with your selected attributes.';

} else {

throw 'Error creating WebGL context.';

}

// Some experimental-webgl implementations do not have getShaderPrecisionFormat

if ( _gl.getShaderPrecisionFormat === undefined ) {

_gl.getShaderPrecisionFormat = function () {

return { 'rangeMin': 1, 'rangeMax': 1, 'precision': 1 };

};

}

_canvas.addEventListener( 'webglcontextlost', onContextLost, false );

} catch ( error ) {

console.error( 'THREE.WebGLRenderer: ' + error );

}

This happens regardless of which (current) version of Three.js I use, with some possibilities shown below:

		<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script-->
		<!--script src="js/three.min.js"></script-->
		<script src="js/three.js"></script>

What’s really mystifying is that this worked in Chrome sometimes and not other times. It never works in Opera, but did last week when I was giving the presentation.

There are a couple of ways to test to see whether your browser supports WebGL. On is to go to this site:

https://get.webgl.org

It tries to initialize a simple animation of a rotating cube. If you don’t see the cube then WebGL isn’t working on your browser on your system. The page gives you a link you can use to get more information about your browser but it only leads to a dead end when you do this in Opera.

There’s also a page that tells you how to include an upfront test in your own code that allows you to provide a message that WebGL has failed. I actually used the Detector.js version I found here, but any of the tests should work.

If you run into problems one of the other important things you can do is check the status of your display drivers. When I examined my graphics drivers on Windows 10 64-bit I found an error and went ahead an deleted and re-installed the driver. Surprise of surprises, WebGL and Three.js now work in all browsers on Windows. I know it has also worked reliably on iOS.

Interestingly, however, and I remember this from testing on my 3rd gen iPad a while back, the default background color is actually white in 3D scenes, unless you explicitly set it to something else, like in this example:

      renderer.setClearColor("#000000",1);

1	renderer.setClearColor("#000000",1);

Obviously this has to happen after the 3D renderer is successfully initialized.

Here’s the test code I’ve been using, which is a slight rearrangement of one of the examples I included in my presentation:

<html>
  <head>
    <title>Handle Resize</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body onload="init()">
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script-->
    <!--script src="js/three.min.js"></script-->
    <script src="js/three.js"></script>
    <script src="js/Detector.js"></script>
    <script>
      var success = true;
      if (!Detector.webgl) {
        var warning = Detector.getWebGLErrorMessage();
        document.body.appendChild(warning);
        success = false;
      }

      //basic initialization
      var aspectRatio;
      var camera;
      var renderer;
      var canvas;
      var scene;

      function init() {
        if (success) {
          init3D();
          grid();
          addCubes();
          render();
        }
      }
      
      //set up 3D
      function init3D() {
        aspectRatio = window.innerWidth/window.innerHeight;
        camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

        renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        
        canvas = renderer.domElement;
        document.body.appendChild(canvas);  //can also be appended to a DIV

        scene = new THREE.Scene();
        renderer.setClearColor("#000000",1);
      }
      
      var global3DBaseX = 0;
      var global3DBaseY = 0;
      var global3DBaseZ = 0;
      var global3DLookTarget = new THREE.Vector3(global3DBaseX, global3DBaseY, global3DBaseZ);

      //define a line in 3D
      function define3DLine(x1,y1,z1,x2,y2,z2,lineColor) {
        var material = new THREE.LineBasicMaterial({ color: lineColor });
        var geometry = new THREE.Geometry();
        geometry.vertices.push(
          new THREE.Vector3(x1, y1, z1),
          new THREE.Vector3(x2, y2, z2)
        );
        var line = new THREE.Line(geometry, material);
        scene.add(line);
        return line;
      }

      function grid() {
        //build a grid      
        var xMin = -3;
        var xMax = 3;
        var xInc = 0.5;
        var zMin = -3;
        var zMax = 3;
        var zInc = 0.5;
        var gridLineColor;

        for (var z=zMin; z<=zMax; z+=zInc) {
          if (z != 0) {
            gridLineColor = "#0000FF";
          } else {
            gridLineColor = "#FF0000";
          }
          define3DLine(xMin,0,z,xMax,0,z,gridLineColor);
        }

        for (var x=xMin; x<=xMax; x+=xInc) {
          if (x != 0) {
            gridLineColor = "#0000FF";
          } else {
            gridLineColor = "#FF0000";
          }
          define3DLine(x,0,zMin,x,0,zMax,gridLineColor);
        }
      }
      
      var cube1;
      var cube2;
      var cube3;
      
      function addCubes() {
        //add a green cube at 0, 0, 0      
        var geometry = new THREE.BoxGeometry(1, 1, 1);

        var material1 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });

        cube1 = new THREE.Mesh( geometry, material1 );

        scene.add(cube1);

        //add a yellow cube at 2, 0, -2      
        var material2 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffff00 });

        cube2 = new THREE.Mesh( geometry, material2 );

        cube2.position.set(2, 0, -2);

        scene.add(cube2);

        //add a cyan cube at -2, 2, 2      
        var material3 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ffff });

        cube3 = new THREE.Mesh( geometry, material3 );

        cube3.position.set(-2, 2, 2);

        scene.add(cube3);
      }

      //initialization for actions
      var twoPi = Math.PI * 2.0;
      var halfPi = Math.PI * 0.5;
      var cRadius = 5; //5;
      var cHeight = 4;
      var cInc = 0.005;
      var cAngle = (1.5 * Math.PI) - cInc;

      //do this for every update
      function cylRotations() {
        cAngle += cInc;
        if (cAngle > twoPi) {
          cAngle -= twoPi;
        } else if (cAngle < 0.0) {
          cAngle += twoPi;
        }
        
        var x = cRadius * Math.cos(cAngle);
        var z = -cRadius * Math.sin(cAngle);
        var y = cHeight;

        //update location of viewport camera
        camera.position.set(x,y,z);
        camera.lookAt(global3DLookTarget);
      }

      var cYIncrement = 0.1;
      var cYMax = 10;
      var cYMin = -2;
      var cRIncrement = 0.1;
      var cRMax = 20;
      var cRMin = 2;

      function moveUp() {
        cHeight += cYIncrement;
        if (cHeight > cYMax) {
          cHeight = cYMax;
        }
      }

      function moveDown() {
        cHeight -= cYIncrement;
        if (cHeight < cYMin) {
          cHeight = cYMin;
        }
      }

      function moveIn() {
        cRadius -= cRIncrement;
        if (cRadius < cRMin) {
          cRadius = cRMin;
        }
      }

      function moveOut() {
        cRadius += cRIncrement;
        if (cRadius > cRMax) {
          cRadius = cRMax;
        }
      }

      function restoreDefaults() {
        cHeight = 4;
        cRadius = 5;
      }

      document.onkeydown = checkKey;

      function checkKey(e) {
        e = e || window.event;  //up 38 down 40
        if (e.keyCode == '37') { //left arrow
        } else if (e.keyCode == '39') { //right arrow
        } else if (e.keyCode == '38') { //up arrow
          moveUp();
        } else if (e.keyCode == '40') { //down arrow
          moveDown();
        } else if (e.keyCode == '66') { //b key
          moveOut();
        } else if (e.keyCode == '70') { //f key
          moveIn();
        } else if (e.keyCode == '36') { //home key
          restoreDefaults();
        }
      }

      //from: http://stackoverflow.com/questions/641857/javascript-window-resize-event
      /*
          function: addEvent

          @param: obj         (Object)(Required)
            - The object which you wish to attach your event to.

          @param: type        (String)(Required)
            - The type of event you wish to establish.

          @param: callback    (Function)(Required)
            - The method you wish to be called by your event listener.

          @param: eventReturn (Boolean)(Optional)
            - Whether you want the event object returned to your callback method.
      */
      var addEvent = function(obj, type, callback, eventReturn) {
        if(obj == null || typeof obj === 'undefined')
          return;

        if(obj.addEventListener)
          obj.addEventListener(type, callback, eventReturn ? true : false);
        else if(obj.attachEvent)
          obj.attachEvent("on" + type, callback);
        else
          obj["on" + type] = callback;
      };

      //An example call to the new addEvent function:

      var watch = function(evt) {
        //Older browser versions may return evt.srcElement
        //Newer browser versions should return evt.currentTarget
        var dimensions = {
          height: (evt.srcElement || evt.currentTarget).innerHeight,
          width: (evt.srcElement || evt.currentTarget).innerWidth
        };
        //https://threejs.org/docs/api/cameras/PerspectiveCamera.html
        renderer.setSize(dimensions.width, dimensions.height);
        camera.aspect = dimensions.width / dimensions.height;
        //var newFov = calcFovAngle(dimensions.height);
        //camera.fov = newFov;
        camera.updateProjectionMatrix();
      };

      addEvent(window, 'resize', watch, true);

      //animation loop      
      function render() {
        //each cube rotates around a different axis
        cube1.rotation.x += 0.01;
        cube2.rotation.y += 0.01;
        cube3.rotation.z += 0.01;
        
        cylRotations();
        
        renderer.render(scene, camera);
                
        requestAnimationFrame(render);
      }

    </script>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

<html>

<head>

<title>Handle Resize</title>

<style>

body { margin: 0; }

canvas { width: 100%; height: 100% }

</style>

</head>

var success = true;

if (!Detector.webgl) {

var warning = Detector.getWebGLErrorMessage();

document.body.appendChild(warning);

success = false;

}

//basic initialization

var aspectRatio;

var camera;

var renderer;

var canvas;

var scene;

function init() {

if (success) {

init3D();

grid();

addCubes();

render();

}

//set up 3D

function init3D() {

aspectRatio = window.innerWidth/window.innerHeight;

camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

renderer.setSize(window.innerWidth, window.innerHeight);

canvas = renderer.domElement;

document.body.appendChild(canvas); //can also be appended to a DIV

scene = new THREE.Scene();

renderer.setClearColor("#000000",1);

}

var global3DBaseX = 0;

var global3DBaseY = 0;

var global3DBaseZ = 0;

var global3DLookTarget = new THREE.Vector3(global3DBaseX, global3DBaseY, global3DBaseZ);

//define a line in 3D

function define3DLine(x1,y1,z1,x2,y2,z2,lineColor) {

var material = new THREE.LineBasicMaterial({ color: lineColor });

var geometry = new THREE.Geometry();

geometry.vertices.push(

new THREE.Vector3(x1, y1, z1),

new THREE.Vector3(x2, y2, z2)

);

var line = new THREE.Line(geometry, material);

scene.add(line);

return line;

}

function grid() {

//build a grid

var xMin = -3;

var xMax = 3;

var xInc = 0.5;

var zMin = -3;

var zMax = 3;

var zInc = 0.5;

var gridLineColor;

for (var z=zMin; z<=zMax; z+=zInc) {

if (z != 0) {

gridLineColor = "#0000FF";

} else {

gridLineColor = "#FF0000";

}

define3DLine(xMin,0,z,xMax,0,z,gridLineColor);

}

for (var x=xMin; x<=xMax; x+=xInc) {

if (x != 0) {

gridLineColor = "#0000FF";

} else {

gridLineColor = "#FF0000";

}

define3DLine(x,0,zMin,x,0,zMax,gridLineColor);

}

var cube1;

var cube2;

var cube3;

function addCubes() {

//add a green cube at 0, 0, 0

var geometry = new THREE.BoxGeometry(1, 1, 1);

var material1 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });

cube1 = new THREE.Mesh( geometry, material1 );

scene.add(cube1);

//add a yellow cube at 2, 0, -2

var material2 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffff00 });

cube2 = new THREE.Mesh( geometry, material2 );

cube2.position.set(2, 0, -2);

scene.add(cube2);

//add a cyan cube at -2, 2, 2

var material3 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ffff });

cube3 = new THREE.Mesh( geometry, material3 );

cube3.position.set(-2, 2, 2);

scene.add(cube3);

}

//initialization for actions

var twoPi = Math.PI * 2.0;

var halfPi = Math.PI * 0.5;

var cRadius = 5; //5;

var cHeight = 4;

var cInc = 0.005;

var cAngle = (1.5 * Math.PI) - cInc;

//do this for every update

function cylRotations() {

cAngle += cInc;

if (cAngle > twoPi) {

cAngle -= twoPi;

} else if (cAngle < 0.0) {

cAngle += twoPi;

}

var x = cRadius * Math.cos(cAngle);

var z = -cRadius * Math.sin(cAngle);

var y = cHeight;

//update location of viewport camera

camera.position.set(x,y,z);

camera.lookAt(global3DLookTarget);

}

var cYIncrement = 0.1;

var cYMax = 10;

var cYMin = -2;

var cRIncrement = 0.1;

var cRMax = 20;

var cRMin = 2;

function moveUp() {

cHeight += cYIncrement;

if (cHeight > cYMax) {

cHeight = cYMax;

}

function moveDown() {

cHeight -= cYIncrement;

if (cHeight < cYMin) {

cHeight = cYMin;

}

function moveIn() {

cRadius -= cRIncrement;

if (cRadius < cRMin) {

cRadius = cRMin;

}

function moveOut() {

cRadius += cRIncrement;

if (cRadius > cRMax) {

cRadius = cRMax;

}

function restoreDefaults() {

cHeight = 4;

cRadius = 5;

}

document.onkeydown = checkKey;

function checkKey(e) {

e = e || window.event; //up 38 down 40

if (e.keyCode == '37') { //left arrow

} else if (e.keyCode == '39') { //right arrow

} else if (e.keyCode == '38') { //up arrow

moveUp();

} else if (e.keyCode == '40') { //down arrow

moveDown();

} else if (e.keyCode == '66') { //b key

moveOut();

} else if (e.keyCode == '70') { //f key

moveIn();

} else if (e.keyCode == '36') { //home key

restoreDefaults();

}

//from: http://stackoverflow.com/questions/641857/javascript-window-resize-event

function: addEvent

@param: obj (Object)(Required)

- The object which you wish to attach your event to.

@param: type (String)(Required)

- The type of event you wish to establish.

@param: callback (Function)(Required)

- The method you wish to be called by your event listener.

@param: eventReturn (Boolean)(Optional)

- Whether you want the event object returned to your callback method.

var addEvent = function(obj, type, callback, eventReturn) {

if(obj == null || typeof obj === 'undefined')

return;

if(obj.addEventListener)

obj.addEventListener(type, callback, eventReturn ? true : false);

else if(obj.attachEvent)

obj.attachEvent("on" + type, callback);

else

obj["on" + type] = callback;

};

//An example call to the new addEvent function:

var watch = function(evt) {

//Older browser versions may return evt.srcElement

//Newer browser versions should return evt.currentTarget

var dimensions = {

height: (evt.srcElement || evt.currentTarget).innerHeight,

width: (evt.srcElement || evt.currentTarget).innerWidth

};

//https://threejs.org/docs/api/cameras/PerspectiveCamera.html

renderer.setSize(dimensions.width, dimensions.height);

camera.aspect = dimensions.width / dimensions.height;

//var newFov = calcFovAngle(dimensions.height);

//camera.fov = newFov;

camera.updateProjectionMatrix();

};

addEvent(window, 'resize', watch, true);

//animation loop

function render() {

//each cube rotates around a different axis

cube1.rotation.x += 0.01;

cube2.rotation.y += 0.01;

cube3.rotation.z += 0.01;

cylRotations();

renderer.render(scene, camera);

requestAnimationFrame(render);

}

</script>

</body>

</html>

A direct link to this is here. Don’t forget to grab a copy of Detector.js if you want to test this on your own system.

Bottom line: don’t be afraid to dig into any of this stuff. This technology is proven and should be fairly stable. If it doesn’t work it’s very likely that something in your system is out of whack.

Posted in Software | Tagged Three.js, WebGL | Leave a comment

A Simple Discrete-Event Simulation: Part 82

Posted on February 7, 2017 by R.P. Churchill

Today I added the ability to use the mouse to drag the 2D display around within its canvas. I had to update the various pan functions to allow specification of an arbitrary distance increment, though there are a number of ways I could have done that. I may change things up going forward. In the meantime, the code sets up events for mousedown, mousemove, and mouseup events and, when the dragFlag is set to true, goes ahead and moves the 2D display by the requested increments in both the x and y directions.

I was a little bit stunned when it worked perfectly the first time I tried it, and it also works smoothly when the simulation is running full blast. Fun!

Here’s the new code for handling the mouse events:

    ///////////////////mouse drag events
    var dragFlag = false;
    var startDragX;
    var startDragY;
    var dragBaseX;
    var dragBaseY;
    var dragLastX;
    var dragLastY;
    
    //start drag
    canvas.addEventListener("mousedown", function(event) {
      startDrag(event);
    });
    
    function startDrag(e) {
      startDragX = globalBaseX;
      startDragY = globalBaseY;
      dragBaseX = e.clientX;
      dragBaseY = e.clientY;
      dragLastX = dragBaseX;
      dragLastY = dragBaseY;
      dragFlag = true;
    }

    //end drag
    canvas.addEventListener("mouseup", function(event) {
      endDrag(event);
    });
    
    function endDrag(e) {
      dragFlag = false;
    }
    
    //move while dragging
    canvas.addEventListener("mousemove", function(event) {
      doDrag(event);
    });
    
    function doDrag(e) {
      if (dragFlag) {
        var currentX = e.clientX;
        var currentY = e.clientY;
        var incrementX = currentX - dragLastX;
        if (incrementX > 0) {
          panLeft(incrementX)
        } else if (incrementX < 0) {
          panRight(-incrementX)
        }
        var incrementY = currentY - dragLastY;
        if (incrementY > 0) {
          panUp(incrementY);
        } else if (incrementY < 0) {
          panDown(-incrementY);
        }
        dragLastX = currentX;
        dragLastY = currentY;
        //eat the event
        if (e.stopPropagation) {
          e.stopPropagation()
        } else {
          e.cancelBubble = true;
        }
      }    
    }
    
    //mouse leaves canvas
    canvas.addEventListener("mouseleave", function(event) {
      leaveDrag(event);
    });
    
    function leaveDrag(e) {
      if (dragFlag) {
        globalBaseX = startDragX;
        globalBaseY = startDragY;
        if (!running) {
          drawModel();
        }
        dragFlag = false;
      }
    }

///////////////////mouse drag events

var dragFlag = false;

var startDragX;

var startDragY;

var dragBaseX;

var dragBaseY;

var dragLastX;

var dragLastY;

//start drag

canvas.addEventListener("mousedown", function(event) {

startDrag(event);

});

function startDrag(e) {

startDragX = globalBaseX;

startDragY = globalBaseY;

dragBaseX = e.clientX;

dragBaseY = e.clientY;

dragLastX = dragBaseX;

dragLastY = dragBaseY;

dragFlag = true;

}

//end drag

canvas.addEventListener("mouseup", function(event) {

endDrag(event);

});

function endDrag(e) {

dragFlag = false;

}

//move while dragging

canvas.addEventListener("mousemove", function(event) {

doDrag(event);

});

function doDrag(e) {

if (dragFlag) {

var currentX = e.clientX;

var currentY = e.clientY;

var incrementX = currentX - dragLastX;

if (incrementX > 0) {

panLeft(incrementX)

} else if (incrementX < 0) {

panRight(-incrementX)

}

var incrementY = currentY - dragLastY;

if (incrementY > 0) {

panUp(incrementY);

} else if (incrementY < 0) {

panDown(-incrementY);

}

dragLastX = currentX;

dragLastY = currentY;

//eat the event

if (e.stopPropagation) {

e.stopPropagation()

} else {

e.cancelBubble = true;

}

//mouse leaves canvas

canvas.addEventListener("mouseleave", function(event) {

leaveDrag(event);

});

function leaveDrag(e) {

if (dragFlag) {

globalBaseX = startDragX;

globalBaseY = startDragY;

if (!running) {

drawModel();

}

dragFlag = false;

}

And here’s the updated code for the pan functions. I left the limits unchanged for now.

    var xPanMin = -200;  //globalBaseX
    var xPanMax = 200;
    var xPanInc = 2;
    var yPanMin = -200;  //globalBaseY
    var yPanMax = 200;
    var yPanInc = 2;
    
    function panDown(increment) {
      if (typeof increment === "unknown") {increment = yPanInc;}
      globalBaseY += increment;
      if (globalBaseY > yPanMax) {
        globalBaseY = yPanMax;
      }
      if (!running) {
        drawModel();
      } 
    }

    function panUp(increment) {
      if (typeof increment === "unknown") {increment = yPanInc;}
      globalBaseY -= increment;
      if (globalBaseY < yPanMin) {
        globalBaseY = yPanMin;
      }
      if (!running) {
        drawModel();
      } 
    }

    function panRight(increment) {
      if (typeof increment === "unknown") {increment = xPanInc;}
      globalBaseX += increment;
      if (globalBaseX > xPanMax) {
        globalBaseX = xPanMax;
      }
      if (!running) {
        drawModel();
      } 
    }

    function panLeft(increment) {
      if (typeof increment === "unknown") {increment = xPanInc;}
      globalBaseX -= increment;
      if (globalBaseX < xPanMin) {
        globalBaseX = xPanMin;
      }
      if (!running) {
        drawModel();
      } 
    }
    
    function resetPan() {
      globalBaseX = 0;
      globalBaseY = 0;
      if (!running) {
        drawModel();
      }
    }

    document.onkeydown = checkKey;

    function checkKey(e) {
      e = e || window.event;  //up 38 down 40
      if (e.keyCode == '37') { //left arrow
        panLeft();
      } else if (e.keyCode == '39') { //right arrow
        panRight();
      } else if (e.keyCode == '38') { //up arrow
        panUp();
      } else if (e.keyCode == '40') { //down arrow
        panDown();
      } else if (e.keyCode == '66') { //b key
      } else if (e.keyCode == '70') { //f key
      } else if (e.keyCode == '36') { //home key
        resetPan();
      }
      //eat the event
      if (e.stopPropagation) {
        e.stopPropagation()
      } else {
        e.cancelBubble = true;
      }
    }

var xPanMin = -200; //globalBaseX

var xPanMax = 200;

var xPanInc = 2;

var yPanMin = -200; //globalBaseY

var yPanMax = 200;

var yPanInc = 2;

function panDown(increment) {

if (typeof increment === "unknown") {increment = yPanInc;}

globalBaseY += increment;

if (globalBaseY > yPanMax) {

globalBaseY = yPanMax;

}

if (!running) {

drawModel();

}

function panUp(increment) {

if (typeof increment === "unknown") {increment = yPanInc;}

globalBaseY -= increment;

if (globalBaseY < yPanMin) {

globalBaseY = yPanMin;

}

if (!running) {

drawModel();

}

function panRight(increment) {

if (typeof increment === "unknown") {increment = xPanInc;}

globalBaseX += increment;

if (globalBaseX > xPanMax) {

globalBaseX = xPanMax;

}

if (!running) {

drawModel();

}

function panLeft(increment) {

if (typeof increment === "unknown") {increment = xPanInc;}

globalBaseX -= increment;

if (globalBaseX < xPanMin) {

globalBaseX = xPanMin;

}

if (!running) {

drawModel();

}

function resetPan() {

globalBaseX = 0;

globalBaseY = 0;

if (!running) {

drawModel();

}

document.onkeydown = checkKey;

function checkKey(e) {

e = e || window.event; //up 38 down 40

if (e.keyCode == '37') { //left arrow

panLeft();

} else if (e.keyCode == '39') { //right arrow

panRight();

} else if (e.keyCode == '38') { //up arrow

panUp();

} else if (e.keyCode == '40') { //down arrow

panDown();

} else if (e.keyCode == '66') { //b key

} else if (e.keyCode == '70') { //f key

} else if (e.keyCode == '36') { //home key

resetPan();

}

//eat the event

if (e.stopPropagation) {

e.stopPropagation()

} else {

e.cancelBubble = true;

}

I found it necessary to handle the mouseleave event because it was possible to mouse out of the canvas, release the mouse, return to the canvas, and still be dragging the 2D display. In order to get out of that the user would have to do a new mousedown and mouseup to properly clear the state. Perhaps it would be better to only snap back to the drag origin when the user releases the mouse when outside the canvas, when a drag sequence is in progress.

The drag mouse event code to eat that event, or prevent it from bubbling up through further elements, does run when expected, but I can’t be sure it’s doing anything. It runs when using the keystrokes as well, but the entire window will still scroll up or down when the 2D display reaches its upper or lower limits. It’s bad enough when running this page standalone but when its embedded on a WordPress page with ten other posts it wants to scroll the whole window down rather than ever scrolling the 2D display back up. This means either that the event that scrolls the larger window up and down is being processed at a lower level that the canvas and is being allowed to bubble up to the canvas, or that it isn’t actually being stopped from propagating.

I need to get a much, much better feel for how the whole event mechanism works in JavaScript, HTML, and the DOM. It’s amazing how far you can get without going into depth in some really important areas. The explanations I’ve read seem simple enough, and of course I’ve been using event-driven frameworks forever, but my work didn’t usually require me to dig into the details. I suspect this is going to keep me hopping.

In the longer run there’s a lot more to add here. For example, the canvas should only allow the user to drag when the entire image is not in view, and even then perhaps in certain modes, which themselves must be controllable. Anyway, one piece at a time, especially when I’m busy with other things.

Last but not least I ended up learning a lot more about how WebGL runs — or fails to run — on different browsers at different times. I’ll relate that saga tomorrow.

Posted in Software | Tagged discrete-event sim project, JavaScript, keypress events, mouse events, panning and zooming | Leave a comment

Search for:
Recent Posts
Recent Comments
Categories
Meta
October 2026

M T W T F S S

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30 31

« Sep

Recent Posts

Recent Comments

Categories

Meta