Experiment with basic 3d on 2d canvas
How do I make an experiment with basic 3d on 2d canvas?
Also, I love every color equally as some of you may know, so this is also a #favColorParticleWeekend entry ;). What is a experiment with basic 3d on 2d canvas? How do you make a experiment with basic 3d on 2d canvas? This script and codes were developed by Matei Copot on 20 August 2022, Saturday.
Experiment with basic 3d on 2d canvas - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>experiment with basic 3d on 2d canvas</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ canvas { position: absolute; top: 0; left: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id=c></canvas> <script src="js/index.js"></script>
</body>
</html>
Experiment with basic 3d on 2d canvas - Script Codes CSS Codes
canvas { position: absolute; top: 0; left: 0;
}
Experiment with basic 3d on 2d canvas - Script Codes JS Codes
var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'), balls = [], tick = 0, fl = 260, // focal length bd = 300, // boundaries vp = { // vanis point x: w / 2, y: h / 2 }, pts = [ // bounding box wireframe dimensionize(-bd,-bd,0), dimensionize(-bd,bd,0), dimensionize(bd,bd,0), dimensionize(bd,-bd,0), dimensionize(bd,-bd,bd*2), dimensionize(bd,bd,bd*2), dimensionize(-bd,bd,bd*2), dimensionize(-bd,-bd,bd*2) ]
for (var i = 0; i < 50; ++i) balls.push({ x: Math.random() * bd*2 - bd, y: Math.random() * bd*2 - bd, z: Math.random() * bd*2, vx: 5 * ( Math.random() - .5 ), vy: 5 * ( Math.random() - .5 ), vz: 5 * ( Math.random() - .5 ), s: Math.random() * 2 + 20 });
function anim(){ window.requestAnimationFrame( anim ); ++tick; ctx.fillStyle = 'black'; ctx.fillRect( 0, 0, w, h ); ctx.strokeStyle = 'white'; for( var i = 0; i < 5; i+=4 ){ ctx.beginPath(); ctx.moveTo( pts[i].x, pts[i].y ); ctx.lineTo( pts[i+1].x, pts[i+1].y ); ctx.lineTo( pts[i+2].x, pts[i+2].y ); ctx.lineTo( pts[i+3].x, pts[i+3].y ); ctx.closePath(); ctx.stroke(); } for( var i = 0; i < 4; ++i ){ ctx.beginPath(); ctx.moveTo( pts[i].x, pts[i].y ); ctx.lineTo( pts[7-i].x, pts[7-i].y ); ctx.stroke(); } balls.map( function( ball ){ ball.x += ball.vx; ball.y += ball.vy; //+=.1; uncomment for gravity ;) ball.z += ball.vz; if( ball.x - ball.s < -bd ){ ball.vx *= -1; ball.x = -bd + ball.s; } else if( ball.x + ball.s > bd ){ ball.vx *= -1; ball.x = bd - ball.s; } if( ball.y - ball.s < -bd ){ ball.vy *= -1; ball.y = -bd + ball.s; } else if( ball.y + ball.s > bd ){ ball.vy *= -1; ball.y = bd - ball.s; } if( ball.z - ball.s < 0 ){ ball.vz *= -1; ball.z = ball.s; } else if( ball.z + ball.s > bd*2 ){ ball.vz *= -1; ball.z = bd*2 - ball.s; } }); balls.sort( function( a, b ){ return b.z - a.z } ); balls.map( function( ball ){ var p = dimensionize( ball.x, ball.y, ball.z ); p.s *= ball.s; ctx.fillStyle = 'hsl(hue,80%,50%)'.replace( 'hue', ( ball.x+ball.y+ball.z ) / 4 + tick ); ctx.beginPath(); ctx.arc( p.x, p.y, p.s, 0, Math.PI * 2 ); ctx.fill(); })
}
anim();
function dimensionize( x, y, z ){ var scale = fl / ( fl + z ); return { x: vp.x + x * scale, y: vp.y + y * scale, s: scale };
}
Developer | Matei Copot |
Username | towc |
Uploaded | August 20, 2022 |
Rating | 4 |
Size | 2,577 Kb |
Views | 24,288 |
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!
Name | Size |
This is just a test. Tests need no love | 1,921 Kb |
Swirly electric rainbow lines | 2,505 Kb |
Plasma background | 3,338 Kb |
Invasion of creepy crawly rainbow fireflies | 3,094 Kb |
Hexagonical retro tiles | 2,901 Kb |
Rainbow rain | 2,171 Kb |
Random curve-pathed particles of rainbowness | 2,576 Kb |
Webgl fireworks | 3,820 Kb |
Mathematically armonic circular lines | 2,476 Kb |
Neon hexagon-forming particles | 2,821 Kb |
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!
Name | Username | Size |
Console fun | Dviate | 1,500 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!