var ctxtuchs, cvstuchs; var x2d_Base = 150; var y2d_Base = 500; var ViewPanelDistanceY = 300; var vLightVec, vViewVec; var vSvg3DLayerBox_Axises, vSvg3DLayerBox_1, vSvg3DLayerBox_2, vSvg3DLayerBox_3, vSvg3DLayerBox_4; var vAxisCenterPoint3D; var color1="#000000"; var color2="#FFFFFF"; var touchX,touchY; var tuchStartDate, tuchEndDate; var touchXStart,touchYStart,touchXEnd,touchYEnd; var touchRectLeft,touchRectTop; var radius = 0; var radiusMax = 50; var frameCount=0; class Point2D { constructor (x , y){ this.x = x; this.y = y; } } class Point3D { constructor (Vx , Vy, Vz){ this.x = Vx; this.y = Vy; this.z = Vz; this.v2D = new Point2D( 0, 0 ); } to2D() { //Simple isometric measurement... angle values calculated this.v2D.x = x2d_Base + this.x - this.y/2; this.v2D.y = y2d_Base + -this.z + this.y/2; return this.v2D; } } class Vector3D { constructor (Vx , Vy, Vz){ this.x = Vx; this.y = Vy; this.z = Vz; this.bZeroVec = true; } calcVecL1() { let LenVec; this.bZeroVec = false; // We get a vector of length 1 LenVec = Math.sqrt( Math.pow(this.x,2) + Math.pow(this.y,2) + Math.pow(this.z,2) ); if( LenVec > 0 ){ this.x = this.x / LenVec; this.y = this.y / LenVec; this.z = this.z / LenVec; } else this.bZeroVec = true; } calcAngleForVec( pVec2 ){ let Len1, Len2, fAngle; Len1 = Math.sqrt( Math.pow(this.x,2) + Math.pow(this.y,2) + Math.pow(this.z,2) ); Len2 = Math.sqrt( Math.pow(pVec2.x,2) + Math.pow(pVec2.y,2) + Math.pow(pVec2.z,2) ); if( (Len1*Len2) > 0 ){ fAngle = Math.acos( ( this.x*pVec2.x + this.y*pVec2.y + this.z*pVec2.z ) / ( Len1 * Len2 ) ); } else fAngle = 0; return fAngle; } calcDistFromVecToPoint( pOnLineVec, pDest ){ let vecP0P1, vecP0P1mulThis; vecP0P1 = { x: (pOnLineVec.x - pDest.x), y: (pOnLineVec.y - pDest.y), z: (pOnLineVec.z - pDest.z) }; let LenP0P1mulThis, LenThis, DistLen; vecP0P1mulThis = { x: (vecP0P1.y * this.z - vecP0P1.z * this.y), y: (vecP0P1.z * this.x - vecP0P1.x * this.z), z: (vecP0P1.x * this.y - vecP0P1.y * this.x) }; LenP0P1mulThis = Math.sqrt( Math.pow(vecP0P1mulThis.x,2) + Math.pow(vecP0P1mulThis.y,2) + Math.pow(vecP0P1mulThis.z,2) ); LenThis = Math.sqrt( Math.pow(this.x,2) + Math.pow(this.y,2) + Math.pow(this.z,2) ); if( LenThis > 0 ) DistLen = LenP0P1mulThis/LenThis; else DistLen = 0; return DistLen; } } class FillStyle { constructor ( color, opacity ){ this.color = color; this.opacity = opacity; } } class Object3D { constructor ( ){ this.vGId = null; this.vLightVec = null; this.vViewVec = null; this.vInvertView = false; this.aClippingCubes = []; } setGId( pGId ){ this.vGId = pGId; } setLightVec( vLightVec ){ this.vLightVec = vLightVec; } setViewVec ( vViewVec ){ this.vViewVec = vViewVec; } setInvertView (){ this.vInvertView = true; } addClippingCube( vClippingCube ){ this.aClippingCubes.push( vClippingCube ); } ckeckPointtInSameClippingCube( pChecked ){ let bCkeck = false; this.aClippingCubes.forEach( vClipCube => { if( !bCkeck ) bCkeck = vClipCube.ckeckPointtInCube( pChecked ); }); return bCkeck; } getRGBFromStringRGB( pRGBString ){ let bigint = parseInt(pRGBString.split('#')[1], 16); let r = (bigint >> 16) & 255; let g = (bigint >> 8) & 255; let b = bigint & 255; return {r:r, g:g, b:b}; } getCMYKfromRGB( vRGB ) { let c,m,y,k; if ( (vRGB.r === 0) && (vRGB.g === 0) && ( vRGB.b === 0) ) { c = 0; m = 0; y = 0; k =0; } else { let calcR = 1 - (vRGB.r / 255), calcG = 1 - (vRGB.g / 255), calcB = 1 - (vRGB.b / 255); k = Math.min(calcR, Math.min(calcG, calcB)), c = (calcR - k) / (1 - k), m = (calcG - k) / (1 - k), y = (calcB - k) / (1 - k); } return {c:c, m:m, y:y, k:k}; } getRGBfromCMYK( vCMYK ){ let c,m,y,r,g,b; c = vCMYK.c * (1.0 - vCMYK.k) + vCMYK.k; m = vCMYK.m * (1.0 - vCMYK.k) + vCMYK.k; y = vCMYK.y * (1.0 - vCMYK.k) + vCMYK.k; r = 255 * (1.0 - c); g = 255 * (1.0 - m); b = 255 * (1.0 - y); return {r:r, g:g, b:b}; } getStringRGBfromRGB( vRGB ) { return "#" + ( (1 << 24) + (vRGB.r << 16) + (vRGB.g << 8) + vRGB.b ).toString(16).slice(1,7); } buildSvgPath(){ return NULL; } } class TriangleSurface3D extends Object3D { constructor ( p1, p2, p3, tFillStyle, tBordStyle ){ super(); this.p1 = p1; this.p2 = p2; this.p3 = p3; this.tFillStyle = tFillStyle; this.tBordStyle = tBordStyle; this.vecPerUP = null; this.vecPerDW = null; this.bNo2Vec = true; this.calcPairPerpendicularVectors(); } calcPairPerpendicularVectors(){ let vecP1P2, vecP1P3, vecP2P3; vecP1P2 = { x: (this.p2.x - this.p1.x), y: (this.p2.y - this.p1.y), z: (this.p2.z - this.p1.z) }; vecP1P3 = { x: (this.p3.x - this.p1.x), y: (this.p3.y - this.p1.y), z: (this.p3.z - this.p1.z) }; vecP2P3 = { x: (this.p3.x - this.p2.x), y: (this.p3.y - this.p2.y), z: (this.p3.z - this.p2.z) }; let LenvecP1P2, LenvecP1P3, LenvecP2P3; this.bNo2Vec = false; // We get a vector P1P2 of length 1 LenvecP1P2 = Math.sqrt( Math.pow(vecP1P2.x,2) + Math.pow(vecP1P2.y,2) + Math.pow(vecP1P2.z,2) ); if( LenvecP1P2 > 0 ){ vecP1P2.x = vecP1P2.x / LenvecP1P2; vecP1P2.y = vecP1P2.y / LenvecP1P2; vecP1P2.z = vecP1P2.z / LenvecP1P2; } // We get a vector P1P3 of length 1 LenvecP1P3 = Math.sqrt( Math.pow(vecP1P3.x,2) + Math.pow(vecP1P3.y,2) + Math.pow(vecP1P3.z,2) ); if( LenvecP1P3 > 0 ){ vecP1P3.x = vecP1P3.x / LenvecP1P3; vecP1P3.y = vecP1P3.y / LenvecP1P3; vecP1P3.z = vecP1P3.z / LenvecP1P3; } // calc vector P2P3 length LenvecP2P3 = Math.sqrt( Math.pow(vecP2P3.x,2) + Math.pow(vecP2P3.y,2) + Math.pow(vecP2P3.z,2) ); if( (LenvecP1P2 > 0) && (LenvecP1P3 > 0) && (LenvecP2P3 > 0) ){ //Calculate Upper Perpendicular Vector as Vector P1P2*P1P3 this.vecPerUP = { x: (vecP1P2.y * vecP1P3.z - vecP1P2.z * vecP1P3.y), y: (vecP1P2.z * vecP1P3.x - vecP1P2.x * vecP1P3.z), z: (vecP1P2.x * vecP1P3.y - vecP1P2.y * vecP1P3.x) }; //Calculate Lower Perpendicular Vector as Vector P1P2*P1P3 this.vecPerDW = { x: (vecP1P3.y * vecP1P2.z - vecP1P3.z * vecP1P2.y), y: (vecP1P3.z * vecP1P2.x - vecP1P3.x * vecP1P2.z), z: (vecP1P3.x * vecP1P2.y - vecP1P3.y * vecP1P2.x) }; } else this.bNo2Vec = true; } buildSvgPath(){ let vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); let vD = ""; let vAxis2D; vAxis2D = this.p1.to2D(); vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; vAxis2D = this.p2.to2D(); vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; vAxis2D = this.p3.to2D(); vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " Z"; vPathTag.setAttribute( "d", vD ); if( (this.tBordStyle !== undefined) && (this.tBordStyle !== null) ){ vPathTag.style.stroke = this.tBordStyle.color; vPathTag.style.strokeOpacity = this.tBordStyle.opacity; vPathTag.style.strokeWidth = "1px"; } else { console.log(123); vPathTag.style.stroke = "none"; vPathTag.style.strokeWidth = "0"; } vPathTag.style.fill = this.tFillStyle.color; vPathTag.style.fillOpacity = this.tFillStyle.opacity; return vPathTag; } } class Line3D extends Object3D { constructor ( p1, p2, tStyle ){ super(); this.p1 = p1; this.p2 = p2; this.tStyle = tStyle; } buildSvgPath(){ let vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); let vD = ""; let vAxis2D; vAxis2D = this.p1.to2D(); vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; vAxis2D = this.p2.to2D(); vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2); vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = this.tStyle.color; vPathTag.style.strokeOpacity = this.tStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; return vPathTag; } } class ClippingCube3D { constructor ( p1, hX, hY, hZ){ this.p1 = p1; this.hX = hX; this.hY = hY; this.hZ = hZ; } ckeckPointtInCube( pChecked ){ let bCheck = false; if ( ( pChecked.x >= this.p1.x ) && ( pChecked.y >= this.p1.y ) && ( pChecked.z >= this.p1.z ) && ( pChecked.x <= this.p1.x + this.hX ) && ( pChecked.y <= this.p1.y + this.hY ) && ( pChecked.z <= this.p1.z + this.hZ ) ) bCheck = true; return bCheck; } } class PolyLine3D extends Object3D { constructor ( tStyle ){ super(); this.pA = []; this.tStyle = tStyle; } addPoint3D( p ){ this.pA.push( p ); } buildSvgPath(){ let vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); let vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); let vD = ""; let vAxis2D; let pi = 0; let pii = 0; let pCnt = this.pA.length; this.pA.forEach( pCur => { vAxis2D = pCur.to2D(); if( pi === 0 ){ vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; } else { vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2)+" "; } pi++; pii++; if( (pi>20) && (pii < pCnt - 1) ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = this.tStyle.color; vPathTag.style.strokeOpacity = this.tStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); vD = "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; pi = 1; } }); if( pi > 0 ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = this.tStyle.color; vPathTag.style.strokeOpacity = this.tStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); } return vGTag; } } class ArcSphere extends Object3D { constructor ( pC, rX, rY, rZ, cntArcsDim, tStyleX, tStyleY, tStyleZ ){ super(); this.pArcsX = []; this.pArcsY = []; this.pArcsZ = []; this.pC = pC; this.rX = rX; this.rY = rY; this.rZ = rZ; this.cntArcsDim = cntArcsDim; this.tStyleArcX = tStyleX; this.tStyleArcY = tStyleY; this.tStyleArcZ = tStyleZ; this.generateArcs(); } generateArcs() { let dFi,Fi; let pArcC = new Point3D( 0, 0, 0); let pRx,pRy,pRz,pz,py,px; dFi = (-Math.PI / ( this.cntArcsDim ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 2; i++ ){ pRx = Math.cos( Fi )*this.rX; pRy = Math.cos( Fi )*this.rY; pz = this.pC.z + Math.sin( Fi )*this.rZ; Fi += dFi; pArcC.x = this.pC.x; pArcC.y = this.pC.y; pArcC.z = pz; this.addArcX( pArcC, pRx, pRy ); } dFi = (-Math.PI / ( this.cntArcsDim ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 2; i++ ){ pRx = Math.cos( Fi )*this.rX; pRz = Math.cos( Fi )*this.rZ; py = this.pC.y + Math.sin( Fi )*this.rY; Fi += dFi; pArcC.x = this.pC.x; pArcC.y = py; pArcC.z = this.pC.z; this.addArcY( pArcC, pRx, pRz ); } dFi = (-Math.PI / ( this.cntArcsDim ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 2; i++ ){ pRy = Math.cos( Fi )*this.rY; pRz = Math.cos( Fi )*this.rZ; px = this.pC.x + Math.sin( Fi )*this.rX; Fi += dFi; pArcC.x = px; pArcC.y = this.pC.y; pArcC.z = this.pC.z; this.addArcZ( pArcC, pRy, pRz ); } } addArcX( pCArcX, trX, trY ){ let dFi,Fi,px,py; let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 4 ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 4; i++ ){ px = pCArcX.x + Math.cos( Fi )*trX; py = pCArcX.y + Math.sin( Fi )*trY; Fi += dFi; plArc.addPoint3D( new Point3D( px, py, pCArcX.z ) ); } plArc.addPoint3D( new Point3D( pCArcX.x + trX, pCArcX.y, pCArcX.z ) ); this.pArcsX.push( plArc ); } addArcY( pCArcY, trX, trZ ){ let dFi,Fi,px,pz; let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 4 ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 4; i++ ){ px = pCArcY.x + Math.cos( Fi )*trX; pz = pCArcY.z + Math.sin( Fi )*trZ; Fi += dFi; plArc.addPoint3D( new Point3D( px, pCArcY.y, pz ) ); } plArc.addPoint3D( new Point3D( pCArcY.x + trX, pCArcY.y, pCArcY.z ) ); this.pArcsY.push( plArc ); } addArcZ( pCArcZ, trY, trZ ){ let dFi,Fi,py,pz; let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 4 ) ); Fi = 0.0; for( let i = 0; i < this.cntArcsDim * 4; i++ ){ py = pCArcZ.y + Math.cos( Fi )*trY; pz = pCArcZ.z + Math.sin( Fi )*trZ; Fi += dFi; plArc.addPoint3D( new Point3D( pCArcZ.x, py, pz ) ); } plArc.addPoint3D( new Point3D( pCArcZ.x, pCArcZ.y + trY, pCArcZ.z ) ); this.pArcsZ.push( plArc ); } buildSvgPath(){ let vGGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); let vGTag; let fArcBuild = (pArc, vStyle) => { let vD, pi, pii, pCnt, vAxis2D, vPathTag; pi = 0; vD = ""; pii = 0; pCnt = pArc.pA.length; vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); pArc.pA.forEach( pCur => { vAxis2D = pCur.to2D(); if( pi === 0 ){ vD += "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; } else { vD += "L" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2)+" "; } pi++; pii++; if( (pi>20) && (pii < pCnt - 1) ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = vStyle.color; vPathTag.style.strokeOpacity = vStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); vPathTag = document.createElementNS("http://www.w3.org/2000/svg", 'path'); vD = "M" + vAxis2D.x.toFixed(2) + " " + vAxis2D.y.toFixed(2) + " "; pi = 1; } }); if( pi > 0 ){ vPathTag.setAttribute( "d", vD ); vPathTag.style.stroke = vStyle.color; vPathTag.style.strokeOpacity = vStyle.opacity; vPathTag.style.strokeWidth = "1px"; vPathTag.style.fill = "none"; vGTag.appendChild(vPathTag); } }; vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.pArcsX.forEach( pArcX => { fArcBuild( pArcX, this.tStyleArcX ) } ); vGGTag.appendChild(vGTag); vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.pArcsY.forEach( pArcY => { fArcBuild( pArcY, this.tStyleArcY ) } ); vGGTag.appendChild(vGTag); vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); this.pArcsZ.forEach( pArcZ => { fArcBuild( pArcZ, this.tStyleArcZ ) } ); vGGTag.appendChild(vGTag); return vGGTag; } } class VolumetricSphere extends Object3D { constructor ( pC, rX, rY, rZ, cntArcsDim, tFillStyleTriangle, bWaveColoring = false ){ super(); this.aTrianglesRibbons = []; this.pC = pC; this.rX = rX; this.rY = rY; this.rZ = rZ; this.cntArcsDim = cntArcsDim; this.tFillStyleTriangle = tFillStyleTriangle; this.tBordStyleTriangle = tFillStyleTriangle; this.bWaveColoring = bWaveColoring; this.generateTrianglesRibbons(); } generateTrianglesRibbons() { let dFi,Fi; let pArcCP = new Point3D( 0, 0, 0); let pArcC = new Point3D( 0, 0, 0); let pRx,pRy,pz,pRxP,pRyP,pzP; let mapZ = new Map(); dFi = (Math.PI / ( this.cntArcsDim ) ); Fi = -Math.PI/2; pRxP = Math.cos( Fi )*this.rX; pRyP = Math.cos( Fi )*this.rY; pzP = this.pC.z + Math.sin( Fi )*this.rZ; pArcCP.x = this.pC.x; pArcCP.y = this.pC.y; pArcCP.z = this.pC.z + Math.sin( Fi )*this.rZ; for( let i = 0; i < this.cntArcsDim; i++ ){ Fi += dFi; pRx = Math.cos( Fi )*this.rX; pRy = Math.cos( Fi )*this.rY; pz = this.pC.z + Math.sin( Fi )*this.rZ; pArcC.x = this.pC.x; pArcC.y = this.pC.y; pArcC.z = pz; mapZ.set( pz, this.generateTrianglesRibbon( pArcCP, pRxP, pRyP, pArcC, pRx, pRy, Fi ) ); pRxP = pRx; pRyP = pRy; pzP = pz; pArcCP.x = pArcC.x; pArcCP.y = pArcC.y; pArcCP.z = pArcC.z; } let mapZSort = new Map([...mapZ.entries()].sort( (a, b) => { return parseFloat(a) - parseFloat(b); } )); for (var [keyZ, vTrianglesRibbon] of mapZSort.entries()) { this.aTrianglesRibbons.push( vTrianglesRibbon ); } } generateTrianglesRibbon( pCArcXP, trXP, trYP, pCArcX, trX, trY, ZFi ){ let vTrianglesRibbon = []; let dFi,Fi,px,py; let plArcP = new PolyLine3D( null ); let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 2 ) ); Fi = 0.0; for( let i = 0; i <= this.cntArcsDim * 2; i++ ){ px = pCArcXP.x + Math.cos( Fi )*trXP; py = pCArcXP.y + Math.sin( Fi )*trYP; plArcP.addPoint3D( new Point3D( px, py, pCArcXP.z ) ); px = pCArcX.x + Math.cos( Fi )*trX; py = pCArcX.y + Math.sin( Fi )*trY; plArc.addPoint3D( new Point3D( px, py, pCArcX.z ) ); Fi += dFi; } plArcP.addPoint3D( new Point3D( pCArcXP.x, pCArcXP.y, pCArcXP.z ) ); plArc.addPoint3D( new Point3D( pCArcX.x, pCArcX.y, pCArcX.z ) ); let p11, p12, p21, p22; for( let i = 1; i <= this.cntArcsDim * 2; i++ ){ p11 = plArcP.pA[ i - 1 ]; p12 = plArcP.pA[ i ]; p21 = plArc.pA[ i - 1]; p22 = plArc.pA[ i ]; let tr1, tr2; let vFillStyle = this.tFillStyleTriangle; if( this.bWaveColoring ){ vFillStyle = new FillStyle( this.getStringRGBfromRGB( { r : 3 + Math.floor( ( Math.cos( (Fi - ZFi)*8 ) * 2 ) ), g : 3 + Math.floor( ( Math.sin( (Fi - ZFi)*4 ) * 2 ) ), b : 3 + Math.floor( ( Math.sin( (Fi - ZFi)*8 ) * 2 ) ), } ), vFillStyle.opacity ); }; tr1 = new TriangleSurface3D( new Point3D( p11.x, p11.y, p11.z ), new Point3D( p12.x, p12.y, p12.z ), new Point3D( p22.x, p22.y, p22.z ), vFillStyle, this.tBordStyleTriangle ); tr2 = new TriangleSurface3D( new Point3D( p21.x, p21.y, p21.z ), new Point3D( p11.x, p11.y, p11.z ), new Point3D( p22.x, p22.y, p22.z ), vFillStyle, this.tBordStyleTriangle ); if( !tr1.bNo2Vec )vTrianglesRibbon.push( tr1 ); if( !tr2.bNo2Vec )vTrianglesRibbon.push( tr2 ); } return vTrianglesRibbon; } buildSvgPath( UpDwPerVecLen, UpPerVecStyle, DwPerVecStyle ){ let vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); if( this.vGId !== null ){ vGTag.setAttribute( "id", this.vGId ); } this.aTrianglesRibbons.forEach( vTrianglesRibbon => { vTrianglesRibbon.forEach( vTriangle => { let vFillStyle = new FillStyle( vTriangle.tFillStyle.color, vTriangle.tFillStyle.opacity); let bVisible = false; if( this.vViewVec !== null ){ let fAngleVecView; if( !this.vInvertView ){ fAngleVecView = this.vViewVec.calcAngleForVec( vTriangle.vecPerUP ); } else { fAngleVecView = this.vViewVec.calcAngleForVec( vTriangle.vecPerDW ); } if( fAngleVecView > Math.PI / 2 ){ bVisible = true; if( this.ckeckPointtInSameClippingCube( vTriangle.p1 ) || this.ckeckPointtInSameClippingCube( vTriangle.p2 ) || this.ckeckPointtInSameClippingCube( vTriangle.p3 ) ) bVisible = false; if( bVisible === true ){ if( this.vLightVec !== null ){ let fAngleVecLight; if( !this.vInvertView ){ fAngleVecLight = this.vLightVec.calcAngleForVec( vTriangle.vecPerUP ); } else { fAngleVecLight = this.vLightVec.calcAngleForVec( vTriangle.vecPerDW ); } let vRGB = this.getRGBFromStringRGB( vFillStyle.color ); let vCMYK = this.getCMYKfromRGB( vRGB ); let vColor; let dK = vCMYK.k / (Math.PI / 2); if( fAngleVecLight > Math.PI / 2 ){ vCMYK.k = dK * ( Math.PI - fAngleVecLight ); } else { vCMYK.k = 1; } vRGB = this.getRGBfromCMYK( vCMYK ); vColor = this.getStringRGBfromRGB( vRGB ); vFillStyle.color = vColor; } } } } if( bVisible === true ){ vTriangle.tFillStyle = vFillStyle; vTriangle.tBordStyle = vFillStyle; vGTag.appendChild( vTriangle.buildSvgPath() ); if(UpDwPerVecLen !== undefined){ let vecPDW = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerDW.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerDW.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerDW.z * UpDwPerVecLen), DwPerVecStyle ); let vecPUP = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerUP.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerUP.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerUP.z * UpDwPerVecLen), UpPerVecStyle ); vGTag.appendChild( vecPDW.buildSvgPath() ); vGTag.appendChild( vecPUP.buildSvgPath() ); } } } ); } ); return vGTag; } } class VolumetricBaggySphere extends Object3D { constructor ( pC, rX, rY, rZ, cntArcsDim, tFillStyleTriangle, bWaveColoring = false ){ super(); this.aTrianglesRibbons = []; this.pC = pC; this.rX = rX; this.rY = rY; this.rZ = rZ; this.cntArcsDim = cntArcsDim; this.tFillStyleTriangle = tFillStyleTriangle; this.tBordStyleTriangle = tFillStyleTriangle; this.bWaveColoring = bWaveColoring; this.generateTrianglesRibbons(); } generateTrianglesRibbons() { let dFi,Fi; let pArcCP = new Point3D( 0, 0, 0); let pArcC = new Point3D( 0, 0, 0); let pRx,pRy,pz,pRxP,pRyP,pzP; let mapZ = new Map(); dFi = (Math.PI / ( this.cntArcsDim ) ); Fi = -Math.PI/2; pRxP = Math.cos( Fi )*this.rX; pRyP = Math.cos( Fi )*this.rY; pzP = this.pC.z + Math.sin( Fi )*this.rZ; pArcCP.x = this.pC.x; pArcCP.y = this.pC.y; pArcCP.z = this.pC.z + Math.sin( Fi )*this.rZ; for( let i = 0; i < this.cntArcsDim; i++ ){ Fi += dFi; pRx = Math.cos( Fi )*this.rX + Math.sin( Fi*16 )*this.rX/16; pRy = Math.cos( Fi )*this.rY + Math.sin( Fi*8 )*this.rY/16; pz = this.pC.z + Math.sin( Fi )*this.rZ; pArcC.x = this.pC.x; pArcC.y = this.pC.y; pArcC.z = pz; mapZ.set( pz, this.generateTrianglesRibbon( pArcCP, pRxP, pRyP, pArcC, pRx, pRy, Fi ) ); pRxP = pRx; pRyP = pRy; pzP = pz; pArcCP.x = pArcC.x; pArcCP.y = pArcC.y; pArcCP.z = pArcC.z; } let mapZSort = new Map([...mapZ.entries()].sort( (a, b) => { return parseFloat(a) - parseFloat(b); } )); for (var [keyZ, vTrianglesRibbon] of mapZSort.entries()) { this.aTrianglesRibbons.push( vTrianglesRibbon ); } } generateTrianglesRibbon( pCArcXP, trXP, trYP, pCArcX, trX, trY, ZFi ){ let vTrianglesRibbon = []; let dFi,Fi,px,py; let plArcP = new PolyLine3D( null ); let plArc = new PolyLine3D( null ); dFi = (2.0 * Math.PI / ( this.cntArcsDim * 2 ) ); Fi = 0.0; for( let i = 0; i <= this.cntArcsDim * 2; i++ ){ px = pCArcXP.x + Math.cos( Fi )* (trXP - Math.cos( Fi*8 )*trXP/16); py = pCArcXP.y + Math.sin( Fi )* (trYP - Math.sin( Fi*16 )*trYP/16); plArcP.addPoint3D( new Point3D( px, py, pCArcXP.z ) ); px = pCArcX.x + Math.cos( Fi )* (trX - Math.cos( Fi*8 )*trX/16); py = pCArcX.y + Math.sin( Fi )* (trY - Math.sin( Fi*16 )*trY/16); plArc.addPoint3D( new Point3D( px, py, pCArcX.z ) ); Fi += dFi; } plArcP.addPoint3D( new Point3D( pCArcXP.x, pCArcXP.y, pCArcXP.z ) ); plArc.addPoint3D( new Point3D( pCArcX.x, pCArcX.y, pCArcX.z ) ); let p11, p12, p21, p22; Fi = 0.0; for( let i = 1; i <= this.cntArcsDim * 2; i++ ){ p11 = plArcP.pA[ i - 1 ]; p12 = plArcP.pA[ i ]; p21 = plArc.pA[ i - 1]; p22 = plArc.pA[ i ]; let tr1, tr2; let vFillStyle = this.tFillStyleTriangle; if( this.bWaveColoring ){ vFillStyle = new FillStyle( this.getStringRGBfromRGB( { r : 3 + Math.floor( ( Math.cos( (Fi - ZFi)*8 ) * 2 ) ), g : 3 + Math.floor( ( Math.sin( (Fi - ZFi)*4 ) * 2 ) ), b : 3 + Math.floor( ( Math.sin( (Fi - ZFi)*8 ) * 2 ) ), } ), vFillStyle.opacity ); } tr1 = new TriangleSurface3D( new Point3D( p11.x, p11.y, p11.z ), new Point3D( p12.x, p12.y, p12.z ), new Point3D( p22.x, p22.y, p22.z ), vFillStyle, this.tBordStyleTriangle ); tr2 = new TriangleSurface3D( new Point3D( p21.x, p21.y, p21.z ), new Point3D( p11.x, p11.y, p11.z ), new Point3D( p22.x, p22.y, p22.z ), vFillStyle, this.tBordStyleTriangle ); if( !tr1.bNo2Vec )vTrianglesRibbon.push( tr1 ); if( !tr2.bNo2Vec )vTrianglesRibbon.push( tr2 ); Fi += dFi; } return vTrianglesRibbon; } buildSvgPath( UpDwPerVecLen, UpPerVecStyle, DwPerVecStyle ){ let vGTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); if( this.vGId !== null ){ vGTag.setAttribute( "id", this.vGId ); } this.aTrianglesRibbons.forEach( vTrianglesRibbon => { vTrianglesRibbon.forEach( vTriangle => { let vFillStyle = new FillStyle( vTriangle.tFillStyle.color, vTriangle.tFillStyle.opacity); let bVisible = false; if( this.vViewVec !== null ){ let fAngleVecView; if( !this.vInvertView ){ fAngleVecView = this.vViewVec.calcAngleForVec( vTriangle.vecPerUP ); } else { fAngleVecView = this.vViewVec.calcAngleForVec( vTriangle.vecPerDW ); } if( fAngleVecView > Math.PI / 2 ){ bVisible = true; if( this.ckeckPointtInSameClippingCube( vTriangle.p1 ) || this.ckeckPointtInSameClippingCube( vTriangle.p2 ) || this.ckeckPointtInSameClippingCube( vTriangle.p3 ) ) bVisible = false; if( bVisible === true ){ if( this.vLightVec !== null ){ let fAngleVecLight; if( !this.vInvertView ){ fAngleVecLight = this.vLightVec.calcAngleForVec( vTriangle.vecPerUP ); } else { fAngleVecLight = this.vLightVec.calcAngleForVec( vTriangle.vecPerDW ); } let vRGB = this.getRGBFromStringRGB( vFillStyle.color ); let vCMYK = this.getCMYKfromRGB( vRGB ); let vColor; let dK = vCMYK.k / (Math.PI / 2); if( fAngleVecLight > Math.PI / 2 ){ vCMYK.k = dK * ( Math.PI - fAngleVecLight ); } else { vCMYK.k = 1; } vRGB = this.getRGBfromCMYK( vCMYK ); vColor = this.getStringRGBfromRGB( vRGB ); vFillStyle.color = vColor; } } } } if( bVisible === true ){ vTriangle.tFillStyle = vFillStyle; vTriangle.tBordStyle = vFillStyle; vGTag.appendChild( vTriangle.buildSvgPath() ); if(UpDwPerVecLen !== undefined){ let vecPDW = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerDW.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerDW.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerDW.z * UpDwPerVecLen), DwPerVecStyle ); let vecPUP = new Line3D( vTriangle.p1, new Point3D( vTriangle.p1.x + vTriangle.vecPerUP.x * UpDwPerVecLen, vTriangle.p1.y + vTriangle.vecPerUP.y * UpDwPerVecLen, vTriangle.p1.z + vTriangle.vecPerUP.z * UpDwPerVecLen), UpPerVecStyle ); vGTag.appendChild( vecPDW.buildSvgPath() ); vGTag.appendChild( vecPUP.buildSvgPath() ); } } } ); } ); return vGTag; } } class ArrayObj3D { constructor () { this.Ao = []; } pushObject3D( pO ){ this.Ao.push( pO ); } buildSvgPath() { return NULL; } } onload = () => { cvstuchs = document.querySelector('#Layer_Tuchs'); ctxtuchs = cvstuchs.getContext('2d'); cvstuchs.width = innerWidth; cvstuchs.height = innerHeight; ctxtuchs.lineWidth = 1; ctxtuchs.lineCap = 'round'; cvstuchs.addEventListener('touchstart', sketchpad_touchStart, false); cvstuchs.addEventListener('touchmove', sketchpad_touchMove, false); cvstuchs.addEventListener('touchend', sketchpad_touchEnd, false); cvstuchs.addEventListener("mousedown", sketchpad_mouseDown, false); cvstuchs.addEventListener("mouseup", sketchpad_mouseUp, false) } function clearTuchCanvas() { ctxtuchs.clearRect( 0, 0, cvstuchs.width, cvstuchs.height); } function drawLine() { clearTuchCanvas() ctxtuchs.shadowBlur = 20; ctxtuchs.shadowColor = color1; ctxtuchs.strokeStyle = color1; ctxtuchs.beginPath(); ctxtuchs.arc( touchXStart ,touchYStart, radius,0,Math.PI*2); ctxtuchs.strokeStyle = color1; ctxtuchs.stroke(); ctxtuchs.arc( touchXStart ,touchYStart, radius + 2 ,0,Math.PI*2); ctxtuchs.strokeStyle = color2; ctxtuchs.stroke(); ctxtuchs.closePath(); if(stop==false){ frameCount++; radius+=10; if(radius>=radiusMax){ radius=radiusMax; } window. requestAnimationFrame(drawLine); } } function getMousePos(mouseEvent) { if (!mouseEvent){ var mouseEvent = event; } var rect = cvstuchs.getBoundingClientRect(); touchX = ( mouseEvent.clientX - rect.left ); touchY = ( mouseEvent.clientY - rect.top ); touchRectLeft = mouseEvent.pageX; touchRectTop = mouseEvent.pageY; } function sketchpad_mouseDown(e) { getMousePos(e); clearTuchCanvas(); stop = false; touchXStart = touchX; touchYStart = touchY; tuchStartDate = new Date(); drawLine(); event.preventDefault(); } function sketchpad_mouseUp(e) { getMousePos(e); stop = true; touchXEnd = touchX; touchYEnd = touchY; tuchEndDate = new Date(); let iLenTuchMove = Math.sqrt( Math.pow(touchXEnd - touchXStart,2) + Math.pow(touchYEnd - touchYStart,2) ); if( iLenTuchMove > radiusMax ){ //Moving the visible part of the scene scrollScene3DLayers( -Math.floor(touchXEnd - touchXStart), -Math.floor(touchYEnd - touchYStart) ) } else { let DeltaMilSec = (tuchEndDate.getTime() - tuchStartDate.getTime()); if( DeltaMilSec > 200 && DeltaMilSec < 10000 ){ //Change of light source var vAxisCenterPoint2D = vAxisCenterPoint3D.to2D(); var vScene3DScrollPos = getScene3DScrollPos(); var vTuch3DPos = { x : ( (touchXStart - vAxisCenterPoint2D.x) + vScene3DScrollPos.x ) - ViewPanelDistanceY/2, y : ViewPanelDistanceY, z : -( (touchYStart - vAxisCenterPoint2D.y) + vScene3DScrollPos.y ) + ViewPanelDistanceY/2, }; vLightVec = new Vector3D( -vTuch3DPos.x, -vTuch3DPos.y, -vTuch3DPos.z ); vLightVec.calcVecL1(); doGenerateCurvedSurface(); } else if( DeltaMilSec > 200 ) { //Clicking on an object if it is under the cursor } } setTimeout(clearTuchCanvas,100); radius = 0; event.preventDefault(); } function getTouchPos(tuchEvent) { if (!tuchEvent){ var tuchEvent = event; } if(tuchEvent.touches) { if (tuchEvent.touches.length >= 1) { var rect = cvstuchs.getBoundingClientRect(); var touch = tuchEvent.touches[0]; touchX = ( touch.clientX - rect.left ); touchY = ( touch.clientY - rect.top ); touchRectLeft = touch.pageX; touchRectTop = touch.pageY; } } } function sketchpad_touchMove(e) { getTouchPos(e); touchXEnd = touchX; touchYEnd = touchY; tuchEndDate = new Date(); event.preventDefault(); } function sketchpad_touchEnd(e) { getTouchPos(e); stop = true; let iLenTuchMove = Math.sqrt( Math.pow(touchXEnd - touchXStart,2) + Math.pow(touchYEnd - touchYStart,2) ); if( iLenTuchMove > radiusMax ){ //Moving the visible part of the scene scrollScene3DLayers( -Math.floor(touchXEnd - touchXStart), -Math.floor(touchYEnd - touchYStart) ) } else { let DeltaMilSec = (tuchEndDate.getTime() - tuchStartDate.getTime()); if( DeltaMilSec > 200 && DeltaMilSec < 10000 ){ //Change of light source var vAxisCenterPoint2D = vAxisCenterPoint3D.to2D(); var vScene3DScrollPos = getScene3DScrollPos(); var vTuch3DPos = { x : ( (touchXStart - vAxisCenterPoint2D.x) + vScene3DScrollPos.x ) - ViewPanelDistanceY/2, y : ViewPanelDistanceY, z : -( (touchYStart - vAxisCenterPoint2D.y) + vScene3DScrollPos.y ) + ViewPanelDistanceY/2, }; vLightVec = new Vector3D( -vTuch3DPos.x, -vTuch3DPos.y, -vTuch3DPos.z ); vLightVec.calcVecL1(); doGenerateCurvedSurface(); } else if( DeltaMilSec > 200 ) { //Clicking on an object if it is under the cursor } } setTimeout(clearTuchCanvas,100); radius = 0; event.preventDefault(); } function sketchpad_touchStart(e) { getTouchPos(e); clearTuchCanvas(); stop = false; touchXStart = touchX; touchYStart = touchY; touchXEnd = touchXStart; touchYEnd = touchYStart; tuchStartDate = new Date(); tuchEndDate = new Date(); drawLine(); event.preventDefault(); } function getPos(e) { if (!e){ var e = event; } touchX=e.pageX-e.target.offsetLeft; touchY=e.pageY-e.target.offsetTop; } function initScene3D(){ vSvg3DLayerBox_Axises = document.getElementById('LayerBox_Axises3D'); vAxisCenterPoint3D = new Point3D( 0, 0, 0); vSvg3DLayerBox_1 = document.getElementById('LayerBox_1'); vSvg3DLayerBox_2 = document.getElementById('LayerBox_2'); vSvg3DLayerBox_3 = document.getElementById('LayerBox_3'); vSvg3DLayerBox_4 = document.getElementById('LayerBox_4'); vLightVec = new Vector3D( -2, -1, -2 ); vViewVec = new Vector3D( -1, -2, -1 ); let axisX = new Line3D( new Point3D(-1000,0,0), new Point3D( 2000,0,0), new FillStyle( "#000000", 0.2 ) ); let axisY = new Line3D( new Point3D(0,-2000,0), new Point3D( 0,2000,0), new FillStyle( "#000000", 0.2 ) ); let axisZ = new Line3D( new Point3D(0,0,-2000), new Point3D( 0,0,1000), new FillStyle( "#000000", 0.2 ) ); vSvg3DLayerBox_Axises.children[0].appendChild( axisX.buildSvgPath() ); vSvg3DLayerBox_Axises.children[0].appendChild( axisY.buildSvgPath() ); vSvg3DLayerBox_Axises.children[0].appendChild( axisZ.buildSvgPath() ); vSvg3DLayerBox_Axises.setAttribute("visibility","true"); } function scrollScene3DLayers( xDelta, yDelta ){ vSvg3DLayerBox_Axises.scrollLeft += xDelta; vSvg3DLayerBox_Axises.scrollTop += yDelta; vSvg3DLayerBox_1.scrollLeft += xDelta; vSvg3DLayerBox_1.scrollTop += yDelta; vSvg3DLayerBox_2.scrollLeft += xDelta; vSvg3DLayerBox_2.scrollTop += yDelta; vSvg3DLayerBox_3.scrollLeft += xDelta; vSvg3DLayerBox_3.scrollTop += yDelta; vSvg3DLayerBox_4.scrollLeft += xDelta; vSvg3DLayerBox_4.scrollTop += yDelta; } function getScene3DScrollPos(){ return { x: Math.floor(vSvg3DLayerBox_Axises.scrollLeft), y: Math.floor(vSvg3DLayerBox_Axises.scrollTop) }; } async function doGenerateCurvedSurface(){ var CntArcs = 60; let vlmSph1 = new VolumetricSphere( new Point3D( 100, -200, -100), 150, 150, 250, CntArcs, new FillStyle( "#010101", 1 ) ); vlmSph1.setGId( "VolSphere1" ); vlmSph1.setLightVec( vLightVec ); vlmSph1.setViewVec( vViewVec ); let vlmBgySph2 = new VolumetricBaggySphere( new Point3D( 200, 300, -200), 150, 150, 250, CntArcs, new FillStyle( "#000100", 1 ), true ); vlmBgySph2.setGId( "VolBagSphere2" ); vlmBgySph2.setLightVec( vLightVec ); vlmBgySph2.setViewVec( vViewVec ); let vlmBgySph3 = new VolumetricBaggySphere( new Point3D( 600, -200, 100), 250, 150, 150, CntArcs, new FillStyle( "#000001", 1 ) ); vlmBgySph3.setGId( "VolBagSphere3" ); vlmBgySph3.setLightVec( vLightVec ); vlmBgySph3.setViewVec( vViewVec ); let vlmSph4 = new VolumetricSphere( new Point3D( 800, 400, -100), 150, 250, 150, CntArcs, new FillStyle( "#010000", 1 ), true ); vlmSph4.setGId( "VolSphere4" ); vlmSph4.setLightVec( vLightVec ); vlmSph4.setViewVec( vViewVec ); let elShpere; elShpere = document.getElementById('VolSphere1'); if(elShpere !== null)elShpere.remove(); elShpere = document.getElementById('VolBagSphere2'); if(elShpere !== null)elShpere.remove(); elShpere = document.getElementById('VolBagSphere3'); if(elShpere !== null)elShpere.remove(); elShpere = document.getElementById('VolSphere4'); if(elShpere !== null)elShpere.remove(); vSvg3DLayerBox_1.children[0].appendChild( vlmSph1.buildSvgPath() ); vSvg3DLayerBox_1.setAttribute("visibility","true"); vSvg3DLayerBox_2.children[0].appendChild( vlmBgySph2.buildSvgPath() ); vSvg3DLayerBox_2.setAttribute("visibility","true"); vSvg3DLayerBox_3.children[0].appendChild( vlmBgySph3.buildSvgPath() ); vSvg3DLayerBox_3.setAttribute("visibility","true"); vSvg3DLayerBox_4.children[0].appendChild( vlmSph4.buildSvgPath() ); vSvg3DLayerBox_4.setAttribute("visibility","true"); };

Played with SVG a bit 9 - Showing of pseudo 3D figures to a scene with controlled lighting