Hexagonical retro tiles

Developer
Matei Copot
Size
2,901 Kb
Views
24,288
  1. Hexagonical retro tiles Previews
  2. Hexagonical retro tiles HTML Codes
  3. Hexagonical retro tiles CSS Codes
  4. Hexagonical retro tiles JS Codes

How do I make an hexagonical retro tiles?

Yup, it's a modification to my neon hexagrid pen. check out this weekend's blog post: http://codepen.io/tmrDevelops/blog/a-blast-from-the-past. What is a hexagonical retro tiles? How do you make a hexagonical retro tiles? This script and codes were developed by Matei Copot on 12 June 2022, Sunday.

Hexagonical retro tiles Previews
IQ Test

Hexagonical retro tiles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hexagonical retro tiles</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>

Hexagonical retro tiles - Script Codes CSS Codes

canvas { position: absolute; top: 0; left: 0;
}

Hexagonical retro tiles - Script Codes JS Codes

var w = c.width = window.innerWidth, h = c.height = window.innerHeight, sum = w + h, ctx = c.getContext( '2d' ), opts = { side: 35, picksParTick: 2, baseTime: 40, addedTime: 10,	colors: [ 'rgba(0,0,0,alp)', 'rgba(180,30,30,alp)', 'rgba(255,255,255,alp)' ], addedAlpha: 20, strokeColor: 'rgb(80,80,80)', hueSpeed: .4, repaintAlpha: 1 }, difX = Math.sqrt( 3 ) * opts.side / 2, // height of a equilateral triangle difY = opts.side * 3 / 2, // side of a triangle ( because it goes down to a vertex ) then half a side of the triangle in the hex below: s + s/2 = s*3/2 rad = Math.PI / 6, // TAU / 6 = PI / 3 I thought, but apparently this way works better cos = Math.cos( rad ) * opts.side, sin = Math.sin( rad ) * opts.side, hexs = [], tick = 0;
function loop(){ window.requestAnimationFrame( loop ); tick += opts.hueSpeed; ctx.shadowBlur = 0; ctx.fillStyle = 'rgba(100,100,100,alp)'.replace( 'alp', opts.repaintAlpha ); ctx.fillRect( 0, 0, w, h ); for( var i = 0; i < opts.picksParTick; ++i ) hexs[ ( Math.random() * hexs.length ) |0 ].pick(); hexs.map( function( hex ){ hex.step(); } );
}
function Hex( x, y ){ this.x = x; this.y = y; this.sum = this.x + this.y; this.picked = false; this.time = 0; this.targetTime = 0; this.xs = [ this.x + cos, this.x, this.x - cos, this.x - cos, this.x, this.x + cos ]; this.ys = [ this.y - sin, this.y - opts.side, this.y - sin, this.y + sin, this.y + opts.side, this.y + sin ];
}
Hex.prototype.pick = function(){	this.color = opts.colors[ ( Math.random() * opts.colors.length ) |0 ]; this.picked = true; this.time = this.time || 0; this.targetTime = this.targetTime || ( opts.baseTime + opts.addedTime * Math.random() ) |0;
}
Hex.prototype.step = function(){ var prop = this.time / this.targetTime; ctx.beginPath(); ctx.moveTo( this.xs[0], this.ys[0] ); for( var i = 1; i < this.xs.length; ++i ) ctx.lineTo( this.xs[i], this.ys[i] ); ctx.lineTo( this.xs[0], this.ys[0] ); if( this.picked ){ ++this.time; if( this.time >= this.targetTime ){ this.time = 0; this.targetTime = 0; this.picked = false; } ctx.fillStyle = ctx.shadowColor = this.color.replace( 'alp', Math.sin( prop * Math.PI ) ); ctx.fill(); } else { ctx.strokeStyle = ctx.shadowColor = opts.strokeColor; ctx.stroke(); }
}
for( var x = 0; x < w; x += difX*2 ){ var i = 0; for( var y = 0; y < h; y += difY ){ ++i; hexs.push( new Hex( x + difX * ( i % 2 ), y ) ); }
}
loop();
window.addEventListener( 'resize', function(){ w = c.width = window.innerWidth; h = c.height = window.innerHeight; sum = w + h; hexs.length = 0; for( var x = 0; x < w; x += difX*2 ){ var i = 0; for( var y = 0; y < h; y += difY ){ ++i; hexs.push( new Hex( x + difX * ( i % 2 ), y ) ); } }
})
Hexagonical retro tiles - Script Codes
Hexagonical retro tiles - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded June 12, 2022
Rating 4
Size 2,901 Kb
Views 24,288
Do you need developer help for Hexagonical retro tiles?

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!

Matei Copot (towc) Script Codes
Name
Wavy 3d rainbow lattice
Rainbow galaxy
JS canvas 3d tree generator
Webgl fireworks
Experiment with basic 3d on 2d canvas
Pacman
Plasma background
Binary spiral
This is just a test. Tests need no love
Superimpositional garden
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!