Superimpositional garden

Developer
Matei Copot
Size
3,307 Kb
Views
30,360
  1. Superimpositional garden Previews
  2. Superimpositional garden HTML Codes
  3. Superimpositional garden CSS Codes
  4. Superimpositional garden JS Codes

How do I make an superimpositional garden?

What is a superimpositional garden? How do you make a superimpositional garden? This script and codes were developed by Matei Copot on 31 August 2022, Wednesday.

Superimpositional garden Previews
IQ Test

Superimpositional garden - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>superimpositional garden</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! */ body {	background-color: #222;
}
canvas {	position: absolute;	top: calc( 50% - 200px );	left: calc( 50% - 300px );
} </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>

Superimpositional garden - Script Codes CSS Codes

body {	background-color: #222;
}
canvas {	position: absolute;	top: calc( 50% - 200px );	left: calc( 50% - 300px );
}

Superimpositional garden - Script Codes JS Codes

var w = c.width = 600	, h = c.height = 400	, ctx = c.getContext( '2d' )	, opts = {	impositions: 5,	ampGeomConst: .4,	baseAmp: 70,	addedAmp: 30,	// w = angular velocity. It's directly proportional to frequency	wGeomConst: 1.5,	baseW: .3,	addedW: .1,	wTickMultiplier: .1,	scanSpeed: 3,	sparkChance: .1,	sparkBaseHeight: 50,	sparkAddedHeight: 30,	sparkBaseTime: 30,	sparkAddedTime: 10,	shardBaseCount: 8,	shardAddedCount: 5,	shardBaseVel: .3,	shardAddedVel: .3,	minTicksSinceLastSpark: 20,	acc: .03,	repaintColor: 'rgba(0,0,0,.02)',	waveColor: 'hsl(hue,80%,60%)',	waveWidth: 4,	sparkColor: 'hsl(hue,80%,light%)',	sparkWidth: 2,	shardColor: 'hsl(hue,40%,50%)',	shardWidth: 1	}	, waves = []	,	sparks = []	,	shards = []	, tick = 0	,	px = 0	,	py = h/2	, ticksSinceLastSpark = 0	, tau = Math.PI * 2;
var baseAmp = opts.baseAmp	,	addedAmp = opts.addedAmp	,	baseW = opts.baseW	,	addedW = opts.addedW;
for( var i = 0; i < opts.impositions; ++i ){	baseAmp *= opts.ampGeomConst;	addedAmp *= opts.ampGeomConst;	baseW *= opts.wGeomConst;	addedW *= opts.wGeomConst;	waves.push( {	amp: baseAmp + addedAmp * Math.random(),	w: baseW + addedW * Math.random()	} );
}
function tickToHue( tick ){	return tick * opts.scanSpeed / w * 360
}
function Spark( x, y, dy, iTick ){	this.iTick = iTick;	this.color = opts.sparkColor.replace( 'hue', tickToHue( iTick ) );	this.ix = this.x = x;	this.iy = this.y = y;	this.dir = Math.sign( dy );	this.height = opts.sparkBaseHeight + opts.sparkAddedHeight * Math.random();	this.tick = 0;	this.time = opts.sparkBaseTime + opts.sparkAddedTime * Math.random() |0;
}
Spark.prototype.step = function(){	++this.tick;	var linearProp = this.tick / this.time	,	armonic = -Math.cos( linearProp * tau / 4 ) + 1;	var y = this.iy + this.height * armonic * this.dir;	//ctx.strokeStyle = this.color.replace( 'light', 60 + armonic*armonic * 40 );	ctx.beginPath();	ctx.moveTo( this.x, this.y + this.dir );	this.y = y;	ctx.lineTo( this.x, this.y );	ctx.stroke();	if( linearProp >= 1 ){	this.dead = true;	var	shardCount = opts.shardBaseCount + opts.shardAddedCount * Math.random() |0	, deltaRad = tau / shardCount	,	baseRad = Math.random() * deltaRad	,	shardVel = opts.shardBaseVel + opts.shardAddedVel * Math.random()	,	colorOffset = tickToHue( this.iTick );	for( var i = 0; i < shardCount; ++i )	shards.push( new Shard( this.x, this.y, baseRad + deltaRad * i, this.dir, shardVel, colorOffset ) );	}
}
function Shard( x, y, rad, dir, vel, colorOffset ){	this.x = x;	this.y = y;	this.rad = rad;	this.dir = dir;	this.vx = Math.cos( this.rad ) * vel;	this.vy = Math.sin( this.rad ) * vel;	this.color = opts.shardColor.replace( 'hue', rad / tau * 360 + colorOffset );
}
Shard.prototype.step = function(){	//ctx.strokeStyle = this.color;	ctx.beginPath();	ctx.moveTo( this.x, this.y );	this.x += this.vx;	this.y += this.vy += opts.acc * this.dir;	ctx.lineTo( this.x, this.y );	ctx.stroke();	if( this.x < 0 || this.x > w || this.y < 0 || this.y > h )	this.dead = true;
}
function anim(){	window.requestAnimationFrame( anim );	++tick;	++ticksSinceLastSpark;	ctx.fillStyle = opts.repaintColor;	ctx.fillRect( 0, 0, w, h );	ctx.strokeStyle = ctx.fillStyle = opts.waveColor.replace( 'hue', tickToHue( tick ) );	ctx.lineWidth = opts.waveWidth;	ctx.beginPath();	ctx.moveTo( px, py );	// I know I can get rid of these variables, but this is clearer	var x = (( tick * opts.scanSpeed ) % w)	,	y = h / 2	,	W = tick * opts.wTickMultiplier;	for( var i = 0; i < waves.length; ++i )	y += Math.sin( waves[ i ].w * W ) * waves[ i ].amp;	ctx.lineTo( px < x ? x : x + w, y );	ctx.lineCap = 'round';	ctx.stroke();	ctx.lineCap = 'square';	var dy = y - py;	//ctx.fillRect( x + 2 * Math.random(), y + dy * ( 2 + Math.random() * 3 ), 1, 1 );	if( ticksSinceLastSpark > opts.minTicksSinceLastSpark && Math.random() < opts.sparkChance ){	ticksSinceLastSpark = 0;	sparks.push( new Spark( x, y, dy, tick ) );	}	ctx.lineWidth = opts.sparkWidth;	for( var i = 0; i < sparks.length; ++i ){	sparks[ i ].step();	if( sparks[ i ].dead ){	sparks.splice( i, 1 );	--i;	}	}	ctx.lineWidth = opts.shardWidth;	for( var i = 0; i < shards.length; ++i ){	shards[ i ].step();	if( shards[ i ].dead ){	shards.splice( i, 1 );	--i;	}	}	px = x;	py = y;
}
ctx.fillStyle = '#222';
ctx.fillRect( 0, 0, w, h );
anim();
Superimpositional garden - Script Codes
Superimpositional garden - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded August 31, 2022
Rating 4.5
Size 3,307 Kb
Views 30,360
Do you need developer help for Superimpositional garden?

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
Binary spiral
JS canvas 3d tree generator
Rainbow Firestorm recreation
Webgl fireworks
Rainbow rain
This is just a test. Tests need no love
Turret of Order
Organic lines of staring-atness
Rainbow galaxy
Invasion of creepy crawly rainbow fireflies
Create amazing captions 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!