A Pen by findoff

Thumbnail
This awesome code was written by findoff, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright findoff ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  findoff</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
  
    <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.1/dat.gui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.2/seedrandom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/findoff/a-pen-by-findoff-MGGpjd */
/* my editor width                                                           */
/*	if( you.read(code.bellow) && you.strenght != strong )
				you.eye.setStatus(bleeding);
		==== let's begin. ==== */
console.clear();

// classes
// end classes

(function(main){
	if( document.readyState === 'loading' )
		document.addEventListener('DOMContentLoaded', main, false);
	else
		main();
})(function(){ // main
	'use strict';
	var canvas, ctx, w, h, vmin, vr, opts={}, gui, stats; // template variables
	init(); // i make it for you...

	function init(){ // controls and template initialization
		initGui();
		initCanvas();
		resize();
		window.addEventListener('resize', resize, false);

		// aspect ratio warning
		if( w/h > 2.5){ let t; document.body.appendChild(t = document.createElement('div')); t.textContent = "Pen don't optimized for toooooo wide screens"; t.setAttribute('style', 'color: #fff; position: absolute; left: 0px; bottom: 0px; font-size: 10vh'); setTimeout(()=>t.style.display='none', 2000); }

		ctx.translate(0.5, 0.5); // make lines crisp

		opt('halt!', ()=> loop=()=>{} );
		opt('scale', 0.5, 0, 2).onChange(loop);
		opt('limit', 4, 1, 10).step(1).onChange(loop);
		opt('points', 12, 3, 16).step(1).onChange(loop);
		opt('edges', 3, 2, 16).step(1).onChange(loop);
		opt('seed', '4').listen().onChange(loop);
		opt('next', e=> (opts.seed=''+ ++opts.seed, loop()));
		opt('prev', e=> (opts.seed=''+ --opts.seed, loop()));
		//opt('clear', 1, 0,1).step(0.01);
		//opt('reset', start);
		//opt('test', 5, 0, 10).step(2).listen().onChange(console.log);

		start(); // init/reset pen content
		loop();
	}

	var frame, cam;
	function start(){ // objects generation and initialization
		cam = {pos: [0, 0],};
		frame = 0;
	}

	function xlerp(a, b, p, d){
		let x = b[0] - a[0];
		let y = b[1] - a[1];
		return [
			a[0] + x * p - d * y,
			a[1] + y * p + d * x,
			];
	}
	
	function fractal(limit, a, b, pattern){
		if(--fractal.insurance<=0) throw new Error('insurance end');
		if(--limit<=0){
			ctx.beginPath();
			ctx.moveTo(...a);
			ctx.lineTo(...b);
			ctx.stroke();
			return;
		}
		let c = pattern[0];
		for(let i=1; i<pattern.length; ++i){
			let d = pattern[i];
			fractal(
				limit,
				xlerp(a, b, ...c),
				xlerp(a, b, ...d),
				pattern,
				);
			c = d;
		}
	}
	
	function getPattern(n){
		let pattern = [];
		for(let i=0; i<=n; ++i){
			pattern.push([
				1/n*i,
				//Math.random(),
				(Math.random()-0.5) * 2 * opts.scale * Math.sin(Math.PI/n*i),
			]);
		}
		return pattern;
	}
	
	function loop(){
		stats.begin();
		ctx.fillStyle = `rgba(0,0,0, ${Math.pow(opts.clear, 2)})`;		
		ctx.fillRect(0,0, w,h);
		ctx.save();

		ctx.lineWidth = 0.5;
		
		Math.seedrandom(opts.seed)
		
		let pattern = getPattern(opts.points);
		
		for(let i=0; i<=opts.edges; ++i){
			ctx.strokeStyle = '#fff';
			fractal.insurance = 20000
			fractal(
				opts.limit,
				[
					w/2 + Math.cos(Math.PI*2/opts.edges*i) * vr,
					h/2 + Math.sin(Math.PI*2/opts.edges*i) * vr,
				],
				[
					w/2 + Math.cos(Math.PI*2/opts.edges*(i+1)) * vr,
					h/2 + Math.sin(Math.PI*2/opts.edges*(i+1)) * vr,
				],
				/*[
					//[0,0], [0.3,0.25], [0.6,-0.25],[1,0],
					//[0.3, 0],[0.6, 0],[0.6, 0.1],[0.8, 0.1],[0.8, 0],[1, 0],
				]*/
				pattern
			);
		}
		
		++frame;

		ctx.restore();
		//requestAnimationFrame(loop);
		stats.end();
	}

	function drawGrid(){
		if( !opts.grid )
			return;
		let gridSize = 1 << (opts.grid-1);
		ctx.beginPath();
		for(let i=((w/2|0)-cam.pos[0])%gridSize; i<w; i+=gridSize){
			ctx.moveTo(i, 0);
			ctx.lineTo(i, h);
		}
		for(let i=((h/2|0)-cam.pos[1])%gridSize; i<h; i+=gridSize){
			ctx.moveTo(0, i);
			ctx.lineTo(w, i);
		}
		ctx.strokeStyle = 'rgba(0,255,0,0.25)';
		ctx.stroke();
	}

	/* i love full screen */
	function resize(){
		w = canvas.width = window.innerWidth;
		h = canvas.height = window.innerHeight;
		vmin = Math.min(w,h);
		vr = vmin / 2;
	}

	function initGui(){
		stats = new Stats();
		stats.showPanel( 0 );
		stats.domElement.style.position = 'absolute';
		document.body.appendChild( stats.domElement );
		//let panel = stats.addPanel( new Stats.Panel( 'caption', '#ff8', '#221' ) );
		// panel.update(value, maxValue);
		/* i love bad short opts ^__^ like q or qwe */
		gui = new dat.GUI();
	}

	function opt(name, value, min, max){
		opts[name] = value;
		return gui.add(opts, name, min, max);
	}

	function initCanvas(){
		/* i love DOM */
		canvas = document.createElement('canvas');
		document.body.appendChild(canvas);
		document.body.style.padding = '0px';
		document.body.style.margin = '0px';
		document.body.style.overflow = 'hidden';
		ctx = canvas.getContext('2d');
	}

});

Comments