Plasma background

Developer
Matei Copot
Size
3,338 Kb
Views
68,816
  1. Plasma background Previews
  2. Plasma background HTML Codes
  3. Plasma background CSS Codes
  4. Plasma background JS Codes

How do I make an plasma background?

Here's a guide on how it works: http://codepen.io/towc/blog/a-guide-to-wavy-waved-radial-waves/fun fact: I could add at least 2 other waves in the title, and still make it correct. I love that sin! (pun intended, including the pun on the pun... this is getting out of hand). What is a plasma background? How do you make a plasma background? This script and codes were developed by Matei Copot on 12 June 2022, Sunday.

Plasma background Previews
IQ Test

Plasma background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>plasma background</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='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Plasma background - Script Codes CSS Codes

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

Plasma background - Script Codes JS Codes

// if you just don't want to read the code but still are interested in how it works, here's a guide for you: http://codepen.io/towc/blog/a-guide-to-wavy-waved-radial-waves/
var w = c.width = window.innerWidth,	h = c.height = window.innerHeight,	ctx = c.getContext('2d'),	opts = {	rays: 30,	maxRadius: Math.sqrt( w*w/4 + h*h/4 ),	circleRadiusIncrementAcceleration: 2,	radiantSpan: .4,	rayAngularVelSpan: .005,	rayAngularVelLineWidthMultiplier: 60,	rayAngularAccWaveInputBaseIncrementer: .03,	rayAngularAccWaveInputAddedIncrementer: .02,	rayAngularAccWaveMultiplier: .0003,	baseWaveInputIncrementer: .01,	addedWaveInputIncrementer: .01,	circleNumWaveIncrementerMultiplier: .1,	cx: w / 2,	cy: h / 2,	tickHueMultiplier: 1,	shadowBlur: 0,	repaintAlpha: .2,	apply: init	},	rays = [],	tick = 0,	tickHueMultiplied,	gui = new dat.GUI;
function init(){	rays.length = 0;	for( var i = 0; i < opts.rays; ++i )	rays.push( new Ray );	if( tick === 0 ){	for( opt in opts ){	if( isNaN( opts[ opt ] ) )	gui.add( opts, opt );	else	gui.add( opts, opt, 0, opts[ opt ] * 3 )	}	gui.close();	loop();	}
}
function loop(){	window.requestAnimationFrame( loop ); ++tick;	ctx.globalCompositeOperation = 'source-over';	ctx.shadowBlur = 0;	ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );	ctx.fillRect( 0, 0, w, h );	ctx.shadowBlur = opts.shadowBlur;	ctx.globalCompositeOperation = 'lighter';	tickHueMultiplied = opts.tickHueMultiplier * tick;	rays.map( function( ray ){ ray.step(); } );
}
function Ray(){	this.circles = [ new Circle( 0 ) ];	this.rot = Math.random() * Math.PI * 2;	this.angularVel = Math.random() * opts.rayAngularVelSpan * ( Math.random() < .5 ? 1 : -1 );	this.angularAccWaveInput = Math.random() * Math.PI * 2;	this.angularAccWaveInputIncrementer = opts.rayAngularAccWaveInputBaseIncrementer + opts.rayAngularAccWaveInputAddedIncrementer * Math.random();	var security = 100,	count = 0;	while( --security > 0 && this.circles[ count ].radius < opts.maxRadius )	this.circles.push( new Circle( ++count ) );
}
Ray.prototype.step = function(){	// this is just messy, but if you take your time to read it properly you'll understand it pretty easily	this.rot +=	this.angularVel += Math.sin(	this.angularAccWaveInput +=	this.angularAccWaveInputIncrementer ) * opts.rayAngularAccWaveMultiplier;	var rot = this.rot,	x = opts.cx,	y = opts.cy;	ctx.lineWidth = Math.min( .00001 / Math.abs( this.angularVel ), 10 / opts.rayAngularVelLineWidthMultiplier ) * opts.rayAngularVelLineWidthMultiplier;	ctx.beginPath();	ctx.moveTo( x, y );	for( var i = 0; i < this.circles.length; ++i ){	var circle = this.circles[ i ];	circle.step();	rot += circle.radiant;	var x2 = opts.cx + Math.sin( rot ) * circle.radius,	y2 = opts.cy + Math.cos( rot ) * circle.radius,	mx = ( x + x2 ) / 2,	my = ( y + y2 ) / 2;	ctx.quadraticCurveTo( x, y, mx, my );	x = x2;	y = y2;	}	ctx.strokeStyle = ctx.shadowColor = 'hsl(hue,80%,50%)'.replace( 'hue', ( ( ( rot + this.rot ) / 2 ) % ( Math.PI * 2 ) ) / Math.PI * 30 + tickHueMultiplied );	ctx.stroke();
}
function Circle( n ){	this.radius = opts.circleRadiusIncrementAcceleration * Math.pow( n, 2 );	this.waveInputIncrementer = ( opts.baseWaveInputIncrementer + opts.addedWaveInputIncrementer * Math.random() ) * ( Math.random() < .5 ? 1 : -1 ) * opts.circleNumWaveIncrementerMultiplier * n;	this.waveInput = Math.random() * Math.PI * 2;	this.radiant = Math.random() * opts.radiantSpan * ( Math.random() < .5 ? 1 : -1 );
}
Circle.prototype.step = function(){	this.waveInput += this.waveInputIncrementer;	this.radiant = Math.sin( this.waveInput ) * opts.radiantSpan;
}
init();
window.addEventListener( 'resize', function(){	w = c.width = window.innerWidth;	h = c.height = window.innerHeight;	opts.maxRadius = Math.sqrt( w*w/4 + h*h/4 );	opts.cx = w / 2;	opts.cy = h / 2;	init();
});
c.addEventListener( 'click', function(e){	opts.cx = e.clientX;	opts.cy = e.clientY;
})
Plasma background - Script Codes
Plasma background - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded June 12, 2022
Rating 4.5
Size 3,338 Kb
Views 68,816
Do you need developer help for Plasma background?

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
Neural Network visualization
Rainbow transfer
Mathematically armonic circular lines
Rotating tunnel of rainbowness
Rainbow Firestorm recreation
Invasion of creepy crawly rainbow fireflies
Experiment with basic 3d on 2d canvas
Random curve-pathed particles of rainbowness
Springing Particles
Rainbow rain
Create amazing web content 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!