Animate the PI = 4 experiment

Page 3 of 4 Previous  1, 2, 3, 4  Next

Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Sun Sep 29, 2019 2:07 pm

.
This really looks impressive, Airman.

Will you consider making such animation accessible at some website, open for general public? It would make an excellent accessory when discussing Pi(k) with people having different opinion about what's going on inside the curve when motion is involved.
Airman. Thanks Vexman, I agree, a simulation of the PI=4 Experiment would be an a priori necessary accessory in trying to understand curved motion. With regard to my effort, you’re being kind. I’m still a relative beginner. My code is poxied with beginner’s mistakes and lack any sophistication whatsoever. I have no means of making the code more accessible than by posting my updates as I have already done. I’m not anywhere near experienced enough to create a cloud GIT (software development) PI=4 Experiment software repository that people could download or build upon.

My ulterior motive has always been to get Nevyn to post the final PI=4 experiment at his site *. Obviously he can do the job perfectly well on his own. As a civil engineer I’ve worked on many base level projects, large or small, as lead or member. I’ll point out that a final product created through a team approach to review and development can greatly improve the product’s quality. I present myself as a hard ass editor or semi-skilled enthusiastic free labor Nevyn may direct as he chooses.


Nevyn, in addition to the tubular track changes, I created the last animation of the curved ball’s z-axis rotation and so the animation has reached its initial/final draft. Sorry, that last animation doesn’t look right and will require your attention. I also added an orbital camera which causes errors if I move my mouse wheel **.  I’ll put my animate function on the shelf for the time being and begin following your 24 Sep directions by creating an alternative animateDynamic function that can replace it.

* https://www.nevyns-lab.com/

** OrbitControls.js:765 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Mon Sep 30, 2019 6:45 pm

I can't tell what version of ThreeJS you are using, and I suspect that you need a newer version, along with its version of OrbitControls.js, to fix this bug. I also can't execute the code without knowing the ThreeJS version.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Mon Sep 30, 2019 8:48 pm

.
The code began as one of the examples included in the three.js r87 download.

\threejs\three.js-r87\examples\webgl - geometry - cube

I used the orbital camera source from that same group of js source files.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Mon Sep 30, 2019 11:26 pm

That's a really old version, and browsers have moved on. The latest I used, which was a few months ago now, was r104. There are probably a few more versions out now, I haven't looked recently. I saw a comment in the wild a week ago that there is a WebGL 2.0 coming out, or is out, or is being tested, not sure. That will mean a lot of changes in ThreeJS coming up.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Tue Oct 01, 2019 12:35 am

.
Animate the PI = 4 experiment - Page 3 Crosse10
I downloaded the latest three.js. version 109 as a zip file. I then moved the zip file to my threejs folder and extracted it. No joy, I cannot run any of the new three.js files, I'm receiving the following console errors.

webgl_geometry_cube.html:1 Access to script at 'file:///C:/Users/Robert/Downloads/three.js-master/build/three.module.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

three.module.js:1 Failed to load resource: net::ERR_FAILED

Any clues as to how I might correct this? Am I lacking the proper permissions?
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Tue Oct 01, 2019 6:13 pm

You're using a full file path. Make it relative to the location of the HTML file and it will work.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Tue Oct 01, 2019 6:58 pm

.
Sorry, I am not understanding. How am I using the whole path? I extracted the files, and go to the examples folder using windows explorer. I usually launch a three.js file by right finger clicking, then ‘use/chrome’, or I might select Run/Launch while coding in notepad++. The URLs are what appear in chrome’s file line. Are you saying I can change that? The examples are all installed relative to the build, I just don’t see where I can change the source relative to the example. Unless I selected a poor location to store the three.js-master?

Here’s the latest html header for v109. The import line is something new.
Code:
<!DOCTYPE html>
<html lang="en">
 <head>
 <title>three.js webgl - geometry - cube</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <link type="text/css" rel="stylesheet" href="main.css">
 </head>
 <body>

 <script type="module">

 import * as THREE from '../build/three.module.js';

 var camera, scene, renderer;
 var mesh;

 init();
 animate();

 function init() {
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Tue Oct 01, 2019 8:57 pm

Don't use the import method, it has limitations including not being supported by some browsers. Use a script tag instead. In that script tag, use a relative URL rather than an absolute one.

So your above import should be changed to and move it to the section. That already uses a relative URL, too.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Tue Oct 01, 2019 11:37 pm

.
If I understand correctly, I may use the existing files if I replace the import method with the previous standard script source.

I attempted to do so by saving wedgl_geometry_cube as wedgl_geometry_pi4, then made several changes, replacing import with:
Code:

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>three.js webgl - geometry - pi4</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <script type="text/javascript" src="../build/three.js" style="margin: 0px; padding: 0px;">

 </head>
 <body>

 <script src="../build/three.js"></script>

 <script>
 
 var camera, scene, renderer;

Resulting in - ReferenceError. THREE is not defined.

There must be an easier way. I did a search and found a question that may help.
Three.js : Very first setup…?
https://stackoverflow.com/questions/43617077/three-js-very-first-setup

The question was been answered 2yrs 5 months ago and doesn’t seem very clear. Would you agree that answer- instructions for installing three.js is correct? If so I’ll try to follow them next.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Wed Oct 02, 2019 6:19 pm

My guess is that your problem is with src="../build/three.js". That may not be the path to the file. I recommend following some of those instructions, but not all because you have already gotten passed most of it.

The part I was going to recommend yesterday, but didn't want to confuse things too much, was to copy the three.js file (and any other required JS files from ThreeJS, such as orbit-controls.js) into your project directory (in a sub-directory called js, and use any sub-directories inside of that that you want).

So your project file system should look something like this:

project.html
js/three.js
js/controls/orbit-controls.js

Then you replace src="../build/three.js" with src="js/three.js".

The best thing about doing it this way is that it keeps the project self-contained. You recently downloaded a new version of ThreeJS and put it into the same place as the previous one. This means that all other projects that refer to it just got upgraded but their source code has not been changed to reflect that. So they may not work anymore.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Wed Oct 02, 2019 6:24 pm

.
Thanks Nevyn, I've read up about minified installs that doesn't seem to help. src="../build/three.js" seems relative and correct to me. I'll continue with your latest directions.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Wed Oct 02, 2019 6:32 pm

The version you are using has not been minified. There is another file called three-min.js that is the minified version of three.js. Programmatically, they are the same, but the contents are actually different. A minified version just takes out all of the stuff that isn't needed to execute the file. So any comments are removed, extraneous whitespace, variables are renamed to shorter names, etc. The idea is to create a version that works exactly the same, but is the smallest it can be.

Try this: after the three script tag, add the ending tag.

Code:

<script type="text/javascript" src="../build/three.js" style="margin: 0px; padding: 0px;"></script>

It shouldn't need the style attribute either. I don't see what that would do because the script tag is not visible.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Wed Oct 02, 2019 11:06 pm

.
We have Joy, PI=4 is working under v109 in its own project folder.

Animate the PI = 4 experiment - Page 3 Projec10
Project files.

Animate the PI = 4 experiment - Page 3 Pie4v110
PI=4.

The cube kept giving me grief with the same - blocked by CORS policy; turns out  the cube code requests a crate gif (not in the source list) from the v109 textures folder. Rather than bring the texture in I tried PI=4 and it worked, well almost, the only thing not yet working is the orbital camera. Lines 62 and 63 are commented out since they are causing errors:
62 // controls = new THREE.OrbitControls( camera ); // comes with errors
63 // controls.damping = 0.2;
1. controls is not defined.and
2. TypeError: THREE.OrbitControls is not a constructor

By the way, that stye error was something strange. I routinely copy/paste forum comments into a word document as a back-up historical file. Often I read the word document instead of the forum post itself. In your quote  

Nevyn So your above import should be changed to script type …

Airman. Your instructions just after that quote - before you changed it - your text between the script signs converted the into a block of styling information which seemed like a complicated instruction. When I quoted you after the ... it turned back into simple text.

I need to catch up with your last set of directions.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Thu Oct 03, 2019 1:31 am

You need a 2nd script tag to import the OrbitControls.js file. Put it after the three.js import (because it needs three itself). Then the controls will work.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Thu Oct 03, 2019 6:45 pm

.
Animate the PI = 4 experiment - Page 3 Differ10
Which way is up?

Plenty to do, thank you very much. Little things that will delay any dynamic animation function work for the moment.

Catching up with your instructions: I’ve replaced three.js with three.min.js. And, the Orbit controls tag is below the three.min.js tag:
Code:
<script src="js/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>

Zooming the mouse wheel works on the screen, although it causes the following console error; the number at the left - 80 in this case, increases as with mouse wheel changes.  
80[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
I’m trying to find out why – I have two intertoob orbit control documents open in separate tabs.

But first, I thought I’d like to try changing the perspective type camera for the orthographic. I’m in the middle of that. I’d like to make it perfectly clear that the two tubular tracks lie side by side on a flat plane, thus accounting for the rolling action. The orbit control allows me to really confuse myself, clearly the height and width don’t agree.

When I change the vector
//var cTrackCenter = new THREE.Vector3( 3*r, -r, 5*r );
from ( 0, 0, 0 ) to ( 3*r, -r, 5*r ), the objects comprising the two tracks aren’t all located at their proper locations. The track objects' positions need to be made relative to the c track as well as radius r.

Pardon me while I putz around a bit.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Fri Oct 04, 2019 6:59 pm

.
Animate the PI = 4 experiment - Page 3 Camera10
The current view of the PI=4 Experiment is again orthographic. I like it better than the perspective view.

All the new lines are ‘intended to make development easier’ and indeed they (perspective too) do. They make it clearer how the js camera operates. I went and included the new source in two new folders in the project files.
Code:

 <script src="js/three.min.js"></script>
 <script src="js/controls/OrbitControls.js"></script>
 <script src="src/helpers/CameraHelper.js"></script>

The white line begins at (0,0,0) and goes upward in a positive Z direction. The orbit controls in the current image also ‘rotates’ about that same up/down axis. The two tracks lie side by side on the plane marked by the red x.

I completed adding var cTrackCenter to all objects. Using it one may move the PI=4 Experiment anywhere in world space without effecting the animation. Above, cTrackCenter was used to move the tracks slightly away from (0,0,0) in order to more center the image's range of motion within the camera scene.

I had to go through my if statements again, made another == correction.

Not sure what’s next. I suppose I should go through all the coordinate point indices(?) to allow switching over to them instead of all the line segments that are currently used in the init function. There's also the zooming error and the height/width still don’t agree.

Feel free to add.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Fri Oct 04, 2019 8:24 pm

Airman wrote:I completed adding var cTrackCenter to all objects. Using it one may move the PI=4 Experiment anywhere in world space without effecting the animation.

That doesn't sound right. I'm sure it works, but what I mean is, it shouldn't be the way chosen to make it work. You're not using the scene hierarchy to your advantage. You should have all track parts in a group, then you just move the group where you want it. The current method is like moving a house brick by brick instead of as a house.

This happens when you do too much during initialization. It is easy to do that in this type of application (and many others), a lot of the ThreeJS examples do this, but it creates fragile code. You don't notice until you want some new feature and soon realise that you have to change lots of little bits instead of just one, or a few. You may also notice it when you try to copy code from one project to another to re-use it and you start to see how different the apps are.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Fri Oct 04, 2019 11:05 pm

.
Airman wrote:I completed adding var cTrackCenter to all objects. Using it one may move the PI=4 Experiment anywhere in world space without effecting the animation.

Nevyn wrote. That doesn't sound right. I'm sure it works, but what I mean is, it shouldn't be the way chosen to make it work. You're not using the scene hierarchy to your advantage. You should have all track parts in a group, then you just move the group where you want it. The current method is like moving a house brick by brick instead of as a house.

Airman. I thought cTrackCenter was a good addition, oh well, thanks for explaining why not, a lot of bricks. I couldn’t possibly enjoy starting my weekend without correcting it as soon as possible. I completely removed var cTrackCenter from the code. Instead, as you suggested, I added a new var grp = new THREE.Group(). All track objects are added to grp. If I wish to move the PI=4 Experiment elsewhere in world space, I can re-position grp before it is added to the scene.

Tested good.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Sun Oct 06, 2019 2:40 pm

.
Animate the PI = 4 experiment - Page 3 Pie4to10
Back in perspective view. The curved and straight track spheres have almost reached their starting points.

Beau coup changes. Imho, the passive animation has reached a fine draft final.
 
I couldn’t figure out how to get the whole table to rotate easily about the +z vertical axis. So I went and switched all the coordinates’ y and z values (including negating z). I changed the balls’ paths accordingly. Lo and behold, I see good rotations for the balls in either track. Do you agree?

Code:

<script>

 var camera, scene, renderer;
 var mesh, sphereC, sphereS;
 var r = 1; // Track radius
 var widt = window.innerWidth;
 var heit = window.innerHeight;
 var aspectRatio = widt/heit;
 var viewSize = 8*r;
 
 var q = r; // track separation
 var tRadius = 0.25*r;
 var tubeTot = 200;
 var tubeInc = 10*r/tubeTot;
 var w = tRadius; // r; // 0.75 * r; // track width
 var iRadius = r - w/2;
 var oRadius = r + w/2; // r + w/2;
 // Inverse velocity. The greater the number of increments the slower the ball's velocity along the track.
 var increments = 1000; // 5000; // Just over two minutes to complete the courses.
 var pathInc = 150;
 var forInc = 8/increments;
 var angInc = 2*Math.PI*r/increments;
 var kMult = 4/Math.PI;
 var bRadius = tRadius;
 var bCircum = 2 * Math.PI * bRadius;
 var ang2rot = 10*r/bCircum; // 8*r*kMult/bCircum; //the number of rolling rotations for the total
 var ang2Inc = 4 * ang2rot * kMult/ increments; // the straight ball is rolling
 
 var curTrackAngle = 0;
 var curBallAngle = 0;
 var inLoop = false;
 var overShot, fRatio;
 var cClicks = 0;
 var sClicks = 0;
 
 init();
 animatePassive();
 
 function init() {

 var grp = new THREE.Group();

 scene = new THREE.Scene();
 
 camera = new THREE.PerspectiveCamera( 70, aspectRatio, 0.1*r, 100*r );
 //camera = new THREE.OrthographicCamera( -aspectRatio*viewSize/2, aspectRatio*viewSize/2, viewSize/2, -viewSize/2);
 camera.position.set( 0, 0, 4*r );
 camera.lookAt(0, 0, -5*r);
 
 controls = new THREE.OrbitControls( camera, renderer ); // comes with errors
 controls.target.set( 0, 0, -5*r );
 camera.updateProjectionMatrix();

 //scene.background = new THREE.Color('FFFFFF'); // #009900 pool table green // #0000FF nice high contrast blue //
 var sphereMat = new THREE.MeshBasicMaterial( { wireframe: true, color: 'yellow' } ); // yellow
 var material = new THREE.LineBasicMaterial( { color: 'red', linewidth: 0.5*r } ); // markers
 var material2 = new THREE.LineBasicMaterial( { color: 'grey' } ); // Increment markers
 var MAT_LINE_CP = new THREE.LineBasicMaterial( { color: 0x00cc00, linewidth: 0.5 } ); // distances

 //cTrackCenter -4 curved paths
 for(th=1;th<=360;th+=1) {
 var radians1 = (Math.PI/180) * th;
 var radians2 = (Math.PI/180) * (th + 1);
 if (th === 359) { radians2 = (Math.PI/180) }
 for ( i = -1; i < 2; i=i+2 ) {
 configRadius = r + i*w;
 var XYPlaneLine = new THREE.Geometry();
 XYPlaneLine.vertices.push(  
 new THREE.Vector3( configRadius * Math.cos(radians1), 0, -configRadius*Math.sin(radians1) ),
 new THREE.Vector3( configRadius * Math.cos(radians2), 0, -configRadius*Math.sin(radians2) ) );
 var XYLine = new THREE.Line( XYPlaneLine, MAT_LINE_CP);
 grp.add(XYLine);

 configRadius = r + i*w;
 var XYPlaneLine = new THREE.Geometry();
 XYPlaneLine.vertices.push(  
 new THREE.Vector3( r * Math.cos(radians1), i*tRadius, -r*Math.sin(radians1) ),
 new THREE.Vector3( r * Math.cos(radians2), i*tRadius, -r*Math.sin(radians2) ));
 var XYLine = new THREE.Line( XYPlaneLine, MAT_LINE_CP);
 grp.add(XYLine);
 };
 };
 // S track markers
 for ( j = 0; j < 6; j++ ) {
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*j, 0, -(-r-q-2*w) ) );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*j, 0, -(-r-q ) ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line );
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*j, -tRadius, -(-r-q-w ) ) );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*j, tRadius, -(-r-q-w ) ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line );
 };
 // PI marker
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( 2*r*Math.PI, 0, -(-r-q-2*w ) ) );
 geometry.vertices.push(new THREE.Vector3( 2*r*Math.PI, 0, -(-r-q )) );
 var line = new THREE.Line( geometry, material );
 grp.add( line );
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( 2*r*Math.PI, -tRadius, -(-r-q-w ) ) );
 geometry.vertices.push(new THREE.Vector3( 2*r*Math.PI, tRadius, -(-r-q-w ) ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line );
 // C track straight section markers
 for ( m = 0; m < 2; m++ ) {
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*m, 0, -(-r+w ) ) );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*m, 0, -(-r-w ) ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line );
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*m, -tRadius, r ) );
 geometry.vertices.push(new THREE.Vector3( -2*r+2*r*m, tRadius, r ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line );
 };

 // parallel circles curved path's initial straight section
 for( ber=0; ber<tubeTot/5+1; ber++ ) {
 for(th=1;th<=360;th+=12) {
 var radians1 = (Math.PI/180) * th;
 var radians2 = (Math.PI/180) * (th + 12);
 if (th === 348) { radians2 = (Math.PI/180) }
 var yZPlaneCircle = new THREE.Geometry();
 yZPlaneCircle.vertices.push(   //viewing x and y.
 new THREE.Vector3( 0, tRadius*Math.sin(radians1), -tRadius * Math.cos(radians1) ),
 new THREE.Vector3( 0, tRadius*Math.sin(radians2), -tRadius * Math.cos(radians2) ) );
 var tCircle = new THREE.Line( yZPlaneCircle, material2);
 tCircle.position.set( -2*r+ber*tubeInc, 0, r );
 grp.add(tCircle);
 };
 };
 // parallel circles straight path
 for( num=0; num<tubeTot+1; num++ ) {
 for(th=1;th<=360;th+=18) {
 var radians1 = (Math.PI/180) * th;
 var radians2 = (Math.PI/180) * (th + 18);
 if (th === 342) { radians2 = (Math.PI/180) }
 var yZPlaneCircle = new THREE.Geometry();
 yZPlaneCircle.vertices.push(   //viewing x and y.
 new THREE.Vector3( 0, tRadius*Math.sin(radians1), -tRadius * Math.cos(radians1) ),
 new THREE.Vector3( 0, tRadius*Math.sin(radians2), -tRadius * Math.cos(radians2) ) );
 var tCircle = new THREE.Line( yZPlaneCircle, material2);
 tCircle.position.set( -2*r+num*tubeInc, 0, -(-r-q-w) );
 grp.add(tCircle);
 };
 };
 // parallel circles circular path
 var curAngl;
 var curAnglInc = 2*Math.PI*r/tubeTot;
 var yZPlaneCircle = new THREE.Geometry();
 for(th=1;th<=360;th+=18) {
 var radians1 = (Math.PI/180) * th;
 var radians2 = (Math.PI/180) * (th + 18);
 if (th === 342) { radians2 = (Math.PI/180) }
 yZPlaneCircle.vertices.push(  
 new THREE.Vector3( 0, tRadius*Math.sin(radians1), -tRadius * Math.cos(radians1) ),
 new THREE.Vector3( 0, tRadius*Math.sin(radians2), -tRadius * Math.cos(radians2) ) );
 };
 for( ber=0; ber < tubeTot; ber++ ) {
 var tCircle = new THREE.Line( yZPlaneCircle, material2);
 curAngl = ber*curAnglInc;
 tCircle.rotation.y = curAngl + Math.PI/2;
 tCircle.position.set( r * Math.cos(curAngl), 0, -r * Math.sin(curAngl) );
 grp.add(tCircle);
 };
 for ( k = -1; k < 2; k=k+2 ) {  
 // S track lengths: +/-z edges
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r, 0, -(-r-w-q+k*w ) ) );
 geometry.vertices.push(new THREE.Vector3( 8*r, 0, -(-r-w-q+k*w ) ) );
 var line = new THREE.Line( geometry, MAT_LINE_CP );
 grp.add( line );
 // S track lengths: +/-z edges
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r, k*tRadius, -(-r-w-q ) ) );
 geometry.vertices.push(new THREE.Vector3( 8*r, k*tRadius, -(-r-w-q ) ) );
 var line = new THREE.Line( geometry, MAT_LINE_CP );
 grp.add( line );
 // C track lengths: +/-z edges
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r, 0, -(-r+k*w ) ) );
 geometry.vertices.push(new THREE.Vector3( 0, 0, -(-r+k*w ) ) );
 var line = new THREE.Line( geometry, MAT_LINE_CP );
 grp.add( line );
 // C track lengths: +/-y edges
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -2*r, k*tRadius, r ) );
 geometry.vertices.push(new THREE.Vector3( 0, k*tRadius, r ) );
 var line = new THREE.Line( geometry, MAT_LINE_CP );
 grp.add( line );
 }
 // C track markers
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( r-w, 0, 0 ) );
 geometry.vertices.push(new THREE.Vector3( r+w, 0, 0 ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line ); // C track One Marker
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( r, -tRadius, 0 ) );
 geometry.vertices.push(new THREE.Vector3( r, tRadius, 0 ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line ); // C track One Marker
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( 0, 0, -r-w ) );
 geometry.vertices.push(new THREE.Vector3( 0, 0, -r+w ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line ); // C track Two Marker
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( 0, -tRadius, -r ) );
 geometry.vertices.push(new THREE.Vector3( 0, tRadius, -r ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line ); // C track Two Marker
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -r-w, 0, 0 ) );
 geometry.vertices.push(new THREE.Vector3( -r+w, 0, 0 ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line ); // C track Three Marker
 var geometry = new THREE.Geometry( 1, 1, 1 );
 geometry.vertices.push(new THREE.Vector3( -r, -tRadius, 0 ) );
 geometry.vertices.push(new THREE.Vector3( -r, tRadius, 0 ) );
 var line = new THREE.Line( geometry, material );
 grp.add( line ); // C track Three Marker

 // Balls
 var sphereGeom = new THREE.SphereGeometry( bRadius, 16, 16 );
 sphereC = new THREE.Mesh( sphereGeom, sphereMat );
 sphereC.position.set( -2*r, 0, r );
 sphereS = new THREE.Mesh( sphereGeom, sphereMat );
 sphereS.position.set( -2*r, 0, -(-r-q-w ) );
 var ballOne = new THREE.Object3D();
 ballOne.add(sphereC);
 var ballTwo = new THREE.Object3D();
 ballTwo.add(sphereS);
 grp.add( ballOne, ballTwo );
 grp.position.set( -2.5*r, 0, -6*r ); //repositions the world rotation point
 
 scene.add(grp);

 renderer = new THREE.WebGLRenderer();
 renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );

 window.addEventListener( 'resize', onWindowResize, true );
 
 }

 function onWindowResize() {

 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();

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

 };

 function animatePassive() {        

 requestAnimationFrame( animatePassive );

 cClicks += 1;
 sClicks += 1;
 if (( sphereC.position.x + forInc >= 0 ) && ( sphereC.position.z  == r ) && ( inLoop == false )) {
 overShot = sphereC.position.x + forInc - 0;
 fRatio = overShot/forInc;
 curTrackAngle = -angInc + fRatio*angInc;
 };
 sphereC.rotation.z -= ang2Inc;
 sphereC.position.x += forInc;

 if ((sphereC.position.x >= 0) && ( sphereC.position.z == r )){
 inLoop = true;
 };
 if ( inLoop ) {
 curTrackAngle += angInc;
 sphereC.rotation.y = curTrackAngle;
 sphereC.position.set( r*Math.sin(curTrackAngle), 0, r*Math.cos(curTrackAngle) )
 };
 if ( (sphereC.position.x >= 0) && ( cClicks > increments*1.25 )) {
 sphereC.position.set( -2*r, 0, r );
 curTrackAngle = 0;
 inLoop = false ;
 cClicks = 0 ;
 };
 sphereS.rotation.z -= ang2Inc;
 sphereS.position.x += forInc;

 if (( sphereS.position.x >= 8*r ) && ( sClicks > increments*1.25  )){
 sphereS.position.set( -2*r, 0, -(-r-q-w) );
 curBallAngle = 0;
 sClicks = 0;
 };

 renderer.render( scene, camera );

 };
 </script>

The camera helper isn't included in the 'neat' version - my working file is a mess with comments mistakes etc.

Animate the PI = 4 experiment - Page 3 Pie4to11
I edited the code comments to better agree with the code, I always include errors somewhere, so added a nearby image.

After I get through smiling I’ll be ready to begin the dynamic animation.  
.


Last edited by LongtimeAirman on Sun Oct 06, 2019 5:23 pm; edited 2 times in total (Reason for editing : Corrected code comment errors and added a second)

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Tue Oct 08, 2019 5:52 pm

.
Progress, I believe, but the product is far from complete - the process continues, as evidenced below. Some code changes I’ve made since last time.  

1. var tubeTot. Corrected. You can change the total number of circles or hoops in both tracks by changing the tube total, tubeTot. Say you’d like 10 divisions for each track section, then the initial section plus sections 1 through 4 make 5 times 10, so let tubeTot =50. Note, an additional circle will be added to the end of the straight track – if the value of tubeTot selected is divisible by 5.
Line 156 is included as a reference. From
Code:
156         // parallel circles straight path
157          for( num=0; num<tubeTot+1; num++ ) {
to
Code:
157         for( num=0; num<tubeTot; num++ ) {
2. And related, from
Code:
172          var curAnglInc = 2*Math.PI*r/tubeTot;
to
Code:
172          var curAnglInc = 2*Math.PI*r/(4*tubeTot/5);
3.  Eliminated var pathInc
Code:
39          var pathInc = 75;
pathInc was an unused variable.

4. Updated the coordinate points list - something I'll try incorporating next - made necessary after having switched y and z and negating z.

5. Centerline x value coordinate arrays. Adding lines 55-57; straight and curved track centerline x value arrays just before the init function call. Slight simplification, i.e. it eliminated the need for a separate - now gone - straight track PI marker code section. The thought is that, given r, w, q and these two arrays, the two tracks can be generated a lot simpler than I have thus far. Maybe expand to an indexed coordinate array. In any case, these two track arrays are the basis for both the Passive and the Dynamic animate functions.  
Code:

55          // Centerpath x coordinates.
56          var sTrack = [ -2*r, 0, 2*r, 4*r, 6*r, 8*r, 2*Math.PI*r ];
57          var cTrack = [ -2*r, 0, r, 0, -r, 0 ];
58
59          init();

Hope all is well.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Tue Oct 08, 2019 5:55 pm

.
Progress, I believe, but the product is far from complete - the process continues, as evidenced below. Some code changes I’ve made since last time.  

1. var tubeTot. Corrected. You can change the total number of circles or hoops in both tracks by changing the tube total, tubeTot. Say you’d like 10 divisions for each track section, then the initial section plus sections 1 through 4 make 5 times 10, so let tubeTot =50. Note, an additional circle will be added to the end of the straight track – if the value of tubeTot selected is divisible by 5.
Line 156 is included as a reference. From
Code:
156         // parallel circles straight path
157          for( num=0; num<tubeTot+1; num++ ) {
to
Code:
156         // parallel circles straight path
157         for( num=0; num<tubeTot; num++ ) {
2. And related, from
Code:
172          var curAnglInc = 2*Math.PI*r/tubeTot;
to
Code:
172          var curAnglInc = 2*Math.PI*r/(4*tubeTot/5);
3.  Eliminated var pathInc
Code:
39          var pathInc = 75;
pathInc was an unused variable.

4. Updated the coordinate points list - something I'll try incorporating next - made necessary after having switched y and z and negating z.

5. Centerline x value coordinate arrays. Adding lines 55-57; straight and curved track centerline x value arrays just before the init function call. Slight simplification, i.e. it eliminated the need for a separate - now gone - straight track PI marker code section. The thought is that, given r, w, q and these two arrays, the two tracks can be generated a lot simpler than I have thus far. Maybe expand to an indexed coordinate array. In any case, these two track arrays are the basis for both the Passive and the Dynamic animate functions.  
Code:

55          // Centerpath x coordinates.
56          var sTrack = [ -2*r, 0, 2*r, 4*r, 6*r, 8*r, 2*Math.PI*r ];
57          var cTrack = [ -2*r, 0, r, 0, -r, 0 ];
58
59          init();

Hope all is well.
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Wed Oct 09, 2019 6:36 pm

.
How dynamic is dynamic? For one thing, spin seems arbitrary. Unlike the two tabletop tracks which must impart rolling spins on the two spheres, I imagine that the dynamic, non-rolling sphere can move linearly through the straight track, beginning to end, with no spin or change in orientation. As such, this simulation might resemble action in a vacuum. I imagine a non spinning sphere moving through a circular path must execute a single rotation. Or do we want a table surface in the dynamic model as well? Still thinking.

Animate the PI = 4 experiment - Page 3 Pie4co10
The control panel is present but not operational.

I keep procrastinating the dynamic animation, I’m trying to be productive here. How about controls? We’ll need them sooner or latter. We used them in the CPIM project. I looked at CPIM and dat.gui.
Code:
   <script src="js/three.min.js"></script>
      <script src="js/controls/OrbitControls.js"></script>
      <script src="js/libs/dat.gui.min.js"></script>
workshop.chromeexperiments.com
Simple instructions eh? The first of three,
The property must be public, i.e. defined by this.prop = value.
Trying to follow those instructions, many changes later, everything is still working - thank goodness. I created a new function; daControlValues (). All the variables defined within daControlValues are identified with the (this.) identifier. All the var values created in the init function now use this.values. For example, the radius will be identified as this.r instead of r. I placed daControlValues (); before init();.

Code:

 var mesh, sphereC, sphereS;
 
 var daControlValues = function() {
 // Some of these will hopefully be control panel variables
 this.r = 1; // Track radius
 this.q = this.r; // track separation
 this.bRadius = 0.25*this.r;
 this.tRadius = this.bRadius;
 this.tubeTot = 120; //  = 120;
 this.w = this.tRadius; // r; // 0.75 * r; // track width
 // Inverse velocity. The greater the number of increments the slower the ball's velocity along the track.
 this.increments = 500; // 5000; // Just over two minutes to complete the courses.
 this.widt = window.innerWidth;
 this.heit = window.innerHeight;
 this.aspectRatio = this.widt/this.heit;
 
 this.viewSize = 8*this.r;
 this.tubeInc = 10*this.r/tubeTot;
 this.forInc = 8/increments;
 this.angInc = 2*Math.PI*this.r/increments;
 this.kMult = 4/Math.PI;
 this.bRadius = this.tRadius;
 this.bCircum = 2 * Math.PI * this.bRadius;
 this.ang2rot = 10*this.r/this.bCircum; // 8*this.r*this.kMult/bCircum; //the number of rolling rotations for the total
 this.ang2Inc = 4 * this.ang2rot * this.kMult/ this.increments;
 this.curTrackAngle = 0;
 this.curBallAngle = 0;
 this.inLoop = false;
 this.overShot;
 this.fRatio;
 this.cClicks = 0;
 this.sClicks = 0;

 // Centerpath coordinate arrays.
 this.tracSep = this.r+this.q+this.w;
 this.sTrackX = [ -2*this.r, 0, 2*this.r, 4*this.r, 6*this.r, 8*this.r, 2*Math.PI*this.r ];
   this.cTrackX = [ -2*this.r, 0, this.r, 0, -this.r, 0 ];
 };

 daControlValues();
 init();
 animatePassive();


Here's the very rudimentary control panel at the end of the init() function - so far. Like I said, everything else is still running, no controls yet. I have no idea what's next, I'll keep trying to follow directions.
Code:

 renderer = new THREE.WebGLRenderer();
 renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );

      //$('body').append(renderer.domElement); // ?????
      // call the render function
      // var step = 0;
      var controls = new function () {
        this.r = 1;
        this.increments = 100;
        this.tubeTot = 15;
 
      };
  
      var gui = new dat.GUI();
      gui.add(controls, 'r',0.1,10);
      gui.add(controls, 'increments', 50, 500);
      gui.add(controls, 'tubeTot',0 ,200 );
    //  render();

 window.addEventListener( 'resize', onWindowResize, true );
 
 };
.


Last edited by LongtimeAirman on Wed Oct 09, 2019 6:53 pm; edited 1 time in total (Reason for editing : Included script source change)

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Wed Oct 09, 2019 6:58 pm

I wouldn't worry about the spin of the ball. You can keep that preset. It is possible to work out how far the ball has traveled since the last frame and calculate the required rotation, but maybe try that once you have the main motions working correctly.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by LongtimeAirman on Thu Oct 10, 2019 6:32 pm

.
function animateDynamic() {}

Pardon my thinking. We wish to simulate the comparative equal velocities/ distances traveled by two spheres along two different paths through space: linear and curved. The two particles do not interact in any way (i.e no collisions). As shown by the PI=4 Experiment – the two paths provide equal distances when the straight track is 4 times the length of the curved track’s diameter. * PI(kinematic)=4.

I’d say this is a simple two case particle kinematic problem.  

As a reference, allow me to suggest –not for the first time – Euclidean Space. Copyright (c) 1998-2017 Martin John Baker

https://www.euclideanspace.com/
http://www.euclideanspace.com/physics/kinematics/index.htm

Martin John Baker's site is quite extensive and comprehensive. I'm happy with it, but as is quickly clear, it's getting a bit old. Many links no longer work. If you have another source, please consider sharing it.

Below, summarizing and outlining the relevant material from the Kinematics page as I believe it pertains to the current PI=4 ‘Simulation’.

Physics – Kinematics.
…Kinematics can be studied without regard to mass or physical quantities that depend on mass.
Movement in one dimension
If an object is moving in a straight line, and if we measure its position along that line, then its position, velocity and acceleration can all be represented by scalar quantities. This makes the analysis much easier, so lets start there.

Summarizing, we would expect to have to work with position, velocity and acceleration vectors, generally along the lines of.
• v = v0 + a*t
• p = p0 + v0 t + ½ a t2
• v2 = v02 + 2 * a * p

Orientation and position mean six degrees of freedom. Little more than standard high school physics. Except where it isn’t. Miles has identified the correct orbital acceleration equation, changing a = v2/r to a = v2/2r. I believe it’s necessary to include it, although I’m not sure how, i.e to explain why the sphere exiting the circular path would be leaving at a reduced 'velocity'.  

Moving to Euclidean Space’s next page,  

Physics - Dynamics
In the previous kinematics page the mathematics of moving objects was discussed. If the objects are representing physical objects, with properties like mass and inertia, then we probably want to calculate the kinematics from the dynamics

Point being, that until such time as mass is necessary, we can stick to the Kinematics page.

* Remember, linear ‘lengths’ are ok, but until everyone understands the new kinematic PI=4, lengths calculated along curves using PI(geometric) are wrong. We can generally translate length (L), to distance (D) around a circular path by, D=L*4/PI(G).  
.

LongtimeAirman
Admin

Posts : 1387
Join date : 2014-08-10

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Nevyn on Thu Oct 10, 2019 9:45 pm

You shouldn't need anything more than v=d/t for the straight section. We don't have any accelerations as used in those equations. The curves will be more tricky. You need to calculate the next position that the ball will end up at after this frame. I'm not sure if this will use PI=4 or PI=3.14, but calculate the angle using the balls velocity by assuming it will travel that distance on the curves circumference.

C = circumference = 2*PI*r
d = vt

So we want to know how much of C is d:

P = d/C
= vt/C
= vt/(2PI*r)

Since C represents the complete circle, we now have a percentage (actually, it is %/100 as it's just the ratio) of that, so we can convert it into an angle like this:

A = P * 2PI

We can put all that together like this:

A = 2PI*v*t/(2*PI*r)
A = vt/r

However, we must be sure that those to PI's are actually the same value before we can reduce it like that. My guess is that they are actually different versions of PI, so we can't reduce it. You will need to implement this to test which PI is the right one. The PI used to calculate the angle would be 3.14, but my guess is that the PI used for the circumference should be 4, but I'm not sure of that (fairly confident that it is, though).

I suggest you implement it using the full A = 2PI*v*t/(2*PI*r) equation, but have 2 variables for the PI values (piK and piG, for example) so it would become:

A = 2PIg*v*t/(2*PIk*r)
= PIg*v*t/(PIk*r)

Then you can adjust the values of PIg and PIk to determine which one looks right when viewing the motion.

Something to be aware of is that applying the angle, as a rotation, will actually spin the ball a bit, which will conflict with the rolling rotation of the ball. You may need to subtract the motion angle from the rolling angle to get it to look right.

It might be better to not use a rotation, but just calculate the point that it would rotate to (apply the rotation to the current position of the ball, as a vector). Then move the ball to that location and apply the normal rolling rotation.

Remember that the rotation must be applied with respect to the center of the circle.

I have just realised that the equation I just derived is almost the same equation I derived in my Spin Velocity paper. The only difference is that I used Miles angular velocity equation in the paper which is replaced by v here.

Once you have this up and running, we might try using that full equation and see how it goes. If we find that we need it, then that is good confirmation of Miles angular velocity equation.
Nevyn
Nevyn
Admin

Posts : 1744
Join date : 2014-09-11

http://www.nevyns-lab.com

Back to top Go down

Animate the PI = 4 experiment - Page 3 Empty Re: Animate the PI = 4 experiment

Post by Sponsored content


Sponsored content


Back to top Go down

Page 3 of 4 Previous  1, 2, 3, 4  Next

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum