The vortex

Developer
Findoff
Size
3,730 Kb
Views
30,360
  1. The vortex Previews
  2. The vortex HTML Codes
  3. The vortex JS Codes

How do I make an the vortex?

What is a the vortex? How do you make a the vortex? This script and codes were developed by Findoff on 03 October 2022, Monday.

The vortex Previews
IQ Test

The vortex - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>the vortex</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The vortex - Script Codes JS Codes

var settings = { grid: true, gridSections: 1, viewFactorX: 16, randColor: true, timeScale: 1, portal: false, gravity: 0.002, maxVelocity: 1, globalYGravForceScale: 0, globalYVortexForceScale: 0, globalYQVortexForceScale: 1, globalCGravForceScale: 0, intake: true, nThings: 80, starvation: 0.0003, starvationFactor: 100,
};
var gui;
(function(){ gui = new dat.GUI(); var view = gui.addFolder('view'); //view.open(); view.add(settings, 'grid'); view.add(settings, 'gridSections').min(1).max(5).step(1); view.add(settings, 'viewFactorX').min(4).max(128).onChange(resize); view.add(settings, 'randColor'); var physics = gui.addFolder('physics'); physics.open(); physics.add(settings, 'timeScale').min(0.1).max(4); physics.add(settings, 'portal'); physics.add(settings, 'gravity').min(-0.1).max(0.1); physics.add(settings, 'maxVelocity').min(0.1).max(4); var effectors = gui.addFolder('effectors'); //effectors.open(); effectors.add(settings, 'globalYGravForceScale').min(-2).max(2); effectors.add(settings, 'globalYVortexForceScale').min(-2).max(2); effectors.add(settings, 'globalYQVortexForceScale').min(-2).max(2); effectors.add(settings, 'globalCGravForceScale').min(-2).max(2); var things = gui.addFolder('things'); //things.open(); things.add(settings, 'intake'); things.add(settings, 'nThings').min(1).max(300).step(1); things.add(settings, 'starvation').min(0).max(0.01); things.add(settings, 'starvationFactor').min(0).max(100);
})();
var canvas;
document.body.appendChild( canvas = document.createElement('canvas') );
var ctx = canvas.getContext('2d');
// Yes, i love weird names
var w, h;
var cuber; // screen box(min at w,h) half width
var nearz; // value added to z for 3d(cr,cr,-cr) = screen-box(right-top)
var cr = 10; // CellRadius
function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; settings.viewFactor = settings.viewFactorX * settings.viewFactorX; cuber = Math.min(w,h)/2; nearz = (1 + cuber/settings.viewFactor)*cr*settings.viewFactor/cuber;
}
resize();
window.onresize = resize;
document.body.style.overflow = 'hidden';
document.body.style.padding = '0px';
document.body.style.margin = '0px';
document.body.style.backgroundColor = '#000';
function project(pos) { // my ortho bike! var x = pos[0]/cr*cuber*settings.viewFactor; var y = pos[1]/cr*cuber*settings.viewFactor; var z = (pos[2]+nearz)/cr*cuber; // greater = farther return [ x/z + w/2, -y/z + h/2, // upright (pos[2]/settings.viewFactor+cr+1)/cuber // for easy scaling ];
}
function arc(pos, r) { var pos2 = project(pos); ctx.arc(pos2[0], pos2[1], r<0 ? -r : r/pos2[2], 0,Math.PI*2,0);
}
function moveTo(pos) { var pos2 = project(pos); ctx.moveTo(pos2[0], pos2[1]);
}
function lineTo(pos) { var pos2 = project(pos); ctx.lineTo(pos2[0], pos2[1]);
}
// ------------
function move(t) { // easy, but not optimized... t.vel[1] -= settings.gravity; for(var i=0; i<3; ++i) { t.pos[i] += t.vel[i] * settings.timeScale; if(!settings.portal) { if( t.pos[i] > cr || t.pos[i] < -cr ) { t.r -= settings.starvation*settings.starvationFactor * settings.timeScale; t.pos[i] -= t.vel[i] * settings.timeScale; t.vel[i] = -t.vel[i]; } } else { if(t.pos[i] < -cr) t.pos[i] = cr*2 + (t.pos[i]+cr) % cr*2 -cr; else t.pos[i] = (t.pos[i]+cr)%(cr*2)-cr; } } var v = Math.sqrt( t.vel[0]*t.vel[0] + t.vel[1]*t.vel[1] + t.vel[2]*t.vel[2] ); if(v>settings.maxVelocity) { var vs = settings.maxVelocity/v; for(var i=0; i<3; ++i) t.vel[i] = t.vel[i] * vs; } return t;
}
var things = [];
var effectors = [];
effectors.push({ type: 'YGrav', pos: [0,0,0], force: 0.3,
});
effectors.push({ type: 'CGrav', pos: [0,0,0], force: 0.3,
});
effectors.push({ type: 'YVortex', pos: [0,0,0], force: 1,
});
effectors.push({ type: 'YQVortex', pos: [0,0,0], force: 1.5,
});
var effectorActions = {};
effectorActions['YGrav'] = function(e, t) { var x = t.pos[0] - e.pos[0]; var z = t.pos[2] - e.pos[2]; var r = Math.sqrt(x*x+z*z); if(r<0.5) return; t.vel[0] -= x/r*e.force*settings.globalYGravForceScale/r/r * settings.timeScale; t.vel[2] -= z/r*e.force*settings.globalYGravForceScale/r/r * settings.timeScale;
};
effectorActions['CGrav'] = function(e, t) { var x = t.pos[0] - e.pos[0]; var y = t.pos[1] - e.pos[1]; var z = t.pos[2] - e.pos[2]; var r = Math.sqrt(x*x+y*y+z*z); if(r<0.5) return; t.vel[0] -= x/r*e.force*settings.globalCGravForceScale/r/r * settings.timeScale; t.vel[1] -= y/r*e.force*settings.globalCGravForceScale/r/r * settings.timeScale; t.vel[2] -= z/r*e.force*settings.globalCGravForceScale/r/r * settings.timeScale;
};
effectorActions['YVortex'] = function(e, t) { var x = t.pos[0] - e.pos[0]; var z = t.pos[2] - e.pos[2]; var r = Math.sqrt(x*x+z*z); if(r<0.5) return; var xt = z; var zt = -x; t.vel[0] -= xt/r*e.force*settings.globalYVortexForceScale/r/r * settings.timeScale; t.vel[2] -= zt/r*e.force*settings.globalYVortexForceScale/r/r * settings.timeScale;
};
effectorActions['YQVortex'] = function(e, t) { var x = t.pos[0] - e.pos[0]; var z = t.pos[2] - e.pos[2]; var r = Math.sqrt(x*x+z*z); if(r<0.5) return; var xt = z; var zt = -x; for(var i=0; i<3; ++i) t.vel[i] = t.vel[i] * 0.95; t.vel[0] -= xt/r*e.force*settings.globalYQVortexForceScale/r/r * settings.timeScale; t.vel[2] -= zt/r*e.force*settings.globalYQVortexForceScale/r/r * settings.timeScale; t.vel[0] -= x/r*e.force*Math.abs(settings.globalYQVortexForceScale)/r/r * settings.timeScale; t.vel[2] -= z/r*e.force*Math.abs(settings.globalYQVortexForceScale)/r/r * settings.timeScale;
};
// *** MAIN LOOP ***
var frame = 0;
setInterval(function(){ ++frame; ctx.fillStyle = 'rgba(0,0,0, 0.2)'; ctx.fillRect(0,0, w,h); /*var r = cr/40; ctx.beginPath(); arc([0,0,0], r); // middle-center ctx.strokeStyle = '#0f0'; ctx.stroke(); ctx.beginPath(); arc([cr,0,-cr], r); // nearest-r ctx.strokeStyle = '#f00'; ctx.stroke(); ctx.beginPath(); arc([cr,cr,0], r); // middle-r-t ctx.strokeStyle = '#ff0'; ctx.stroke(); ctx.beginPath(); arc([0,cr,cr], r); // far-t ctx.strokeStyle = '#f0f'; ctx.stroke();*/ if(settings.grid) { ctx.strokeStyle = '#0f0'; var step = cr*2/settings.gridSections; for(var z=-cr; z<=cr; z+=step) for(var x=-cr; x<=cr; x+=step) { ctx.beginPath(); moveTo([x,-cr,z]); lineTo([x,cr,z]); ctx.stroke(); } for(var z=-cr; z<=cr; z+=step) for(var y=-cr; y<=cr; y+=step) { ctx.beginPath(); moveTo([-cr,y,z]); lineTo([cr,y,z]); ctx.stroke(); } for(var x=-cr; x<=cr; x+=step) for(var y=-cr; y<=cr; y+=step) { ctx.beginPath(); moveTo([x,y,-cr]); lineTo([x,y,cr]); ctx.stroke(); } } var v = 1.3; if(things.length < settings.nThings) things.push({ pos: settings.intake ? [-cr/2,cr,0] : [ Math.random()*cr*2-cr, Math.random()*cr*2-cr, Math.random()*cr*2-cr ], vel: [ Math.random()*v, Math.random()*v, Math.random()*v ], r: cr/30*Math.random()+cr/100, color: settings.randColor ? 'rgba('+((Math.random()*256)>>0)+','+((Math.random()*256)>>0)+','+((Math.random()*256)>>0)+',0.8)' : 'rgba(200,200,0, 0.5)', }); var tdo = things.sort(function(a,b){ /* fixme: i write it, but i want to sleep... */ return a.pos[2]>b.pos[2] ? -1 : 1; }); for(var i=0; i<tdo.length; ++i) { var t = tdo[i]; ctx.beginPath(); ctx.fillStyle = t.color; arc(t.pos, t.r); ctx.fill(); } for(var i=0; i<things.length; ++i) { var t = things[i]; t.r -= settings.starvation * settings.timeScale; if(t.r<0) { things.splice(i,1); --i; continue; } for(var j=0; j<effectors.length; ++j) effectorActions[ effectors[j].type ]( effectors[j], t ); move(t); } /* ctx.fillStyle = 'rgba(255,0,0, '+(1000/frame/frame).toFixed(3)+')'; var fsz = h/4; ctx.font = 'italic '+fsz+'px arial'; var text = 'incomplete'; ctx.fillText(text, w/2-ctx.measureText(text).width/2, h/2); */
}, 16);
The vortex - Script Codes
The vortex - Script Codes
Home Page Home
Developer Findoff
Username findoff
Uploaded October 03, 2022
Rating 4
Size 3,730 Kb
Views 30,360
Do you need developer help for The vortex?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Findoff (findoff) Script Codes
Name
Stick waves 2
Insect builder v0
Small orbitals
Elementary cellular automaton
Curved fractal
Flawed text
Ant
Linear-feedback shift register
Let it snow
Flamethrower
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!