molotovbliss/index.html

## index.html
<html>

<body>

	<head></head>
	<h1 style="color:#00ff69">molotov.bliss</h1>
	<hr>
	<h1>BACKGROUND</h1>
	<hr>

	<img src="https://www.dropbox.com/s/jwvdexm63prx1oh/mb-newlogo.png?dl=1" style="width: 500px; padding-bottom: 100px;" />

	<div id="blob">
		<svg viewBox="0 0 200 200" style="z-index: -2">
			<defs>
				<linearGradient id="gradient" gradientTransform="rotate(90)">
					<stop id="gradientStop1" offset="0%" stop-color="var(--startColor)" />
					<stop id="gradientStop2 " offset="100%" stop-color="var(--stopColor)" />
				</linearGradient>
			</defs>
			<path d="" fill="url('#gradient')"></path>
		</svg>
	</div>

	<h1>
		B00MER, [boomer the bass pig (early alias)], Bliss Productions, 2TryP2 (2T2)
		Kosmic Free Music Foundation (KFMF) AKA Kosmic Loader Foundation (KLF) 1994-2000, Relic, Integrity (INT), Paramount (PMT)

		Background (Circa January 1991-1992)

		Before the Internet boom, dialing into local BBS’s at 2400-9600 baud & even running a small local board with Oblivion/2 BBS. Eventually moving onto the internet via a SLIP/PPP shell account shared by a friend when the internet was still in its infancy. (Web was nothing more than plain text with Gopher/Lynx/IRCII/etc.) Becoming friends with other like minded individuals on IRC especially #trax on EFNet that were also into trackers and the demo scene.

		After learning to create ANSI Art with theDraw, and digital artworks with Deluxe Paint 2e. Eventually moving to Audio Production after seeing a Demo for Tetra Compositor by Bram Graveland Ultraforce in 1992 that was included with a Creative Labs Sound Blaster 8bit mono card. Eventually finding other Tracker Software such as Fast Tracker 2 by Triton, Scream Tracker from Future Crew, Farandole by Daniel Potter (local friend via BBS LAN Parties) & eventually Impulse Tracker by Jeffrey Liam.

		Previously a part of one of the very first net-labels: Kosmic Free Music Foundation or KFMF, (1994-2000). Still producing today. Releasing most tracks for free via Soundcloud and other channels independently. My current choice of Digital Audio Workstations/Tracker is <u>ReNoise</u>.

	</h1>

	<a href="http://molotovbliss.com/">http://molotovbliss.com</a>
	https://soundcloud.com/molotovbliss
	https://www.pouet.net/user.php?who=99211
	http://amp.dascene.net/detail.php?detail=modules&view=754
	https://hornet.org/cgi-bin/scene-search.cgi?search=B00mer
	https://hornet.org/cgi-bin/scene-search.cgi?search=Boomer

</body>

</html>

## mb-bg-slabtext-big.markdown

      
    Raw
  

              mb-bg-slabtext-big.markdown
            
          
    Mb BG (SlabText Big )

SlabText Big & Bold Responsive Headline for jQuery. In an effort to not have a jQuery or Vanilla, etc. dependency attempting to re-implement in just plain JS.
A Pen by molotov.bliss on CodePen.
License.

  
## script.babel
import { spline } from "https://cdn.skypack.dev/@georgedoescode/spline@1.0.1";
import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0";

// our <path> element
const path = document.querySelector("path");
// used to set our custom property values
const root = document.documentElement;

let hueNoiseOffset = 0;
let noiseStep = 0.005;

const simplex = new SimplexNoise();

const points = createPoints();

(function animate() {
	path.setAttribute("d", spline(points, 1, true));

	// for every point...
	for (let i = 0; i < points.length; i++) {
		const point = points[i];

		// return a pseudo random value between -1 / 1 based on this point's current x, y positions in "time"
		const nX = noise(point.noiseOffsetX, point.noiseOffsetX);
		const nY = noise(point.noiseOffsetY, point.noiseOffsetY);
		// map this noise value to a new value, somewhere between it's original location -20 and it's original location + 20
		const x = map(nX, -1, 1, point.originX - 20, point.originX + 20);
		const y = map(nY, -1, 1, point.originY - 20, point.originY + 20);

		// update the point's current coordinates
		point.x = x;
		point.y = y;

		// progress the point's x, y values through "time"
		point.noiseOffsetX += noiseStep;
		point.noiseOffsetY += noiseStep;
	}

	const hueNoise = noise(hueNoiseOffset, hueNoiseOffset);
	const hue = map(hueNoise, -1, 1, 0, 360);

	root.style.setProperty("--startColor", `hsl(${hue}, 100%, 75%)`);
	root.style.setProperty("--stopColor", `hsl(${hue + 60}, 100%, 75%)`);
	//document.body.style.background = `hsl(${hue + 60}, 75%, 5%)`;

	hueNoiseOffset += noiseStep / 6;

	requestAnimationFrame(animate);
})();

function map(n, start1, end1, start2, end2) {
	return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
}

function noise(x, y) {
	return simplex.noise2D(x, y);
}

function createPoints() {
	const points = [];
	// how many points do we need
	const numPoints = 6;
	// used to equally space each point around the circle
	const angleStep = (Math.PI * 2) / numPoints;
	// the radius of the circle
	const rad = 75;

	for (let i = 1; i <= numPoints; i++) {
		// x & y coordinates of the current point
		const theta = i * angleStep;

		const x = 100 + Math.cos(theta) * rad;
		const y = 100 + Math.sin(theta) * rad;

		// store the point's position
		points.push({
			x: x,
			y: y,
			// we need to keep a reference to the point's original point for when we modulate the values later
			originX: x,
			originY: y,
			// more on this in a moment!
			noiseOffsetX: Math.random() * 1000,
			noiseOffsetY: Math.random() * 1000
		});
	}

	return points;
}

document.querySelector("path").addEventListener("mouseover", () => {
	noiseStep = 0.01;
});

document.querySelector("path").addEventListener("mouseleave", () => {
	noiseStep = 0.005;
});

//the plugin is included as an external resource to this pen
// source: https://freqdec.github.io/slabText/js/jquery.slabtext.min.js

$("h1").slabText({
	viewportBreakpoint: 380
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slabText/2.3/jquery.slabtext.min.js"></script>

## style.css
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
body {
	background-color: #000;
	color: #444;
	font-family: "Oswald", sans-serif;
	padding: 30px;
	font-size: 100%;
	text-align: center;
}

h1 {
	text-transform: uppercase;
	font-size: 4em;
	line-height: 0.9;
}
.slabtexted .slabtext {
	display: -moz-inline-box;
	display: inline-block;
	white-space: nowrap;
}
.slabtextinactive .slabtext {
	display: inline;
	white-space: normal;
	font-size: 1em !important;
	letter-spacing: inherit !important;
	word-spacing: inherit !important;
	*letter-spacing: 0 !important;
	*word-spacing: 0 !important;
}
.slabtextdone .slabtext {
	display: block;
}

:root {
	--startColor: hsl(0, 100%, 75%);
	--stopColor: hsl(0, 100%, 75%);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	display: grid;
	place-items: center;
}

svg {
	width: 90vmin;
	height: 90vmin;
}

path {
	cursor: pointer;
}

p {
	position: absolute;
	font-size: 1.125rem;
	font-weight: 500;
	bottom: 1rem;
	right: 1rem;
	color: #fff;
	font-family: system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#blob {
	position: absolute;
	top: -10%;
	z-index: -1;
}
hr {
	width: 100%;
	color: white;
}
	<html>

	<body>

	<head></head>
	<h1 style="color:#00ff69">molotov.bliss</h1>
	<hr>
	<h1>BACKGROUND</h1>
	<hr>

	<img src="https://www.dropbox.com/s/jwvdexm63prx1oh/mb-newlogo.png?dl=1" style="width: 500px; padding-bottom: 100px;" />

	<div id="blob">
	<svg viewBox="0 0 200 200" style="z-index: -2">
	<defs>
	<linearGradient id="gradient" gradientTransform="rotate(90)">
	<stop id="gradientStop1" offset="0%" stop-color="var(--startColor)" />
	<stop id="gradientStop2 " offset="100%" stop-color="var(--stopColor)" />
	</linearGradient>
	</defs>
	<path d="" fill="url('#gradient')"></path>
	</svg>
	</div>

	<h1>
	B00MER, [boomer the bass pig (early alias)], Bliss Productions, 2TryP2 (2T2)
	Kosmic Free Music Foundation (KFMF) AKA Kosmic Loader Foundation (KLF) 1994-2000, Relic, Integrity (INT), Paramount (PMT)

	Background (Circa January 1991-1992)

	Before the Internet boom, dialing into local BBS’s at 2400-9600 baud & even running a small local board with Oblivion/2 BBS. Eventually moving onto the internet via a SLIP/PPP shell account shared by a friend when the internet was still in its infancy. (Web was nothing more than plain text with Gopher/Lynx/IRCII/etc.) Becoming friends with other like minded individuals on IRC especially #trax on EFNet that were also into trackers and the demo scene.

	After learning to create ANSI Art with theDraw, and digital artworks with Deluxe Paint 2e. Eventually moving to Audio Production after seeing a Demo for Tetra Compositor by Bram Graveland Ultraforce in 1992 that was included with a Creative Labs Sound Blaster 8bit mono card. Eventually finding other Tracker Software such as Fast Tracker 2 by Triton, Scream Tracker from Future Crew, Farandole by Daniel Potter (local friend via BBS LAN Parties) & eventually Impulse Tracker by Jeffrey Liam.

	Previously a part of one of the very first net-labels: Kosmic Free Music Foundation or KFMF, (1994-2000). Still producing today. Releasing most tracks for free via Soundcloud and other channels independently. My current choice of Digital Audio Workstations/Tracker is <u>ReNoise</u>.

	</h1>

	<a href="http://molotovbliss.com/">http://molotovbliss.com</a>
	https://soundcloud.com/molotovbliss
	https://www.pouet.net/user.php?who=99211
	http://amp.dascene.net/detail.php?detail=modules&view=754
	https://hornet.org/cgi-bin/scene-search.cgi?search=B00mer
	https://hornet.org/cgi-bin/scene-search.cgi?search=Boomer

	</body>

	</html>
	import { spline } from "https://cdn.skypack.dev/@georgedoescode/spline@1.0.1";
	import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0";

	// our <path> element
	const path = document.querySelector("path");
	// used to set our custom property values
	const root = document.documentElement;

	let hueNoiseOffset = 0;
	let noiseStep = 0.005;

	const simplex = new SimplexNoise();

	const points = createPoints();

	(function animate() {
	path.setAttribute("d", spline(points, 1, true));

	// for every point...
	for (let i = 0; i < points.length; i++) {
	const point = points[i];

	// return a pseudo random value between -1 / 1 based on this point's current x, y positions in "time"
	const nX = noise(point.noiseOffsetX, point.noiseOffsetX);
	const nY = noise(point.noiseOffsetY, point.noiseOffsetY);
	// map this noise value to a new value, somewhere between it's original location -20 and it's original location + 20
	const x = map(nX, -1, 1, point.originX - 20, point.originX + 20);
	const y = map(nY, -1, 1, point.originY - 20, point.originY + 20);

	// update the point's current coordinates
	point.x = x;
	point.y = y;

	// progress the point's x, y values through "time"
	point.noiseOffsetX += noiseStep;
	point.noiseOffsetY += noiseStep;
	}

	const hueNoise = noise(hueNoiseOffset, hueNoiseOffset);
	const hue = map(hueNoise, -1, 1, 0, 360);

	root.style.setProperty("--startColor", `hsl(${hue}, 100%, 75%)`);
	root.style.setProperty("--stopColor", `hsl(${hue + 60}, 100%, 75%)`);
	//document.body.style.background = `hsl(${hue + 60}, 75%, 5%)`;

	hueNoiseOffset += noiseStep / 6;

	requestAnimationFrame(animate);
	})();

	function map(n, start1, end1, start2, end2) {
	return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
	}

	function noise(x, y) {
	return simplex.noise2D(x, y);
	}

	function createPoints() {
	const points = [];
	// how many points do we need
	const numPoints = 6;
	// used to equally space each point around the circle
	const angleStep = (Math.PI * 2) / numPoints;
	// the radius of the circle
	const rad = 75;

	for (let i = 1; i <= numPoints; i++) {
	// x & y coordinates of the current point
	const theta = i * angleStep;

	const x = 100 + Math.cos(theta) * rad;
	const y = 100 + Math.sin(theta) * rad;

	// store the point's position
	points.push({
	x: x,
	y: y,
	// we need to keep a reference to the point's original point for when we modulate the values later
	originX: x,
	originY: y,
	// more on this in a moment!
	noiseOffsetX: Math.random() * 1000,
	noiseOffsetY: Math.random() * 1000
	});
	}

	return points;
	}

	document.querySelector("path").addEventListener("mouseover", () => {
	noiseStep = 0.01;
	});

	document.querySelector("path").addEventListener("mouseleave", () => {
	noiseStep = 0.005;
	});

	//the plugin is included as an external resource to this pen
	// source: https://freqdec.github.io/slabText/js/jquery.slabtext.min.js

	$("h1").slabText({
	viewportBreakpoint: 380
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/slabText/2.3/jquery.slabtext.min.js"></script>
	@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
	body {
	background-color: #000;
	color: #444;
	font-family: "Oswald", sans-serif;
	padding: 30px;
	font-size: 100%;
	text-align: center;
	}

	h1 {
	text-transform: uppercase;
	font-size: 4em;
	line-height: 0.9;
	}
	.slabtexted .slabtext {
	display: -moz-inline-box;
	display: inline-block;
	white-space: nowrap;
	}
	.slabtextinactive .slabtext {
	display: inline;
	white-space: normal;
	font-size: 1em !important;
	letter-spacing: inherit !important;
	word-spacing: inherit !important;
	*letter-spacing: 0 !important;
	*word-spacing: 0 !important;
	}
	.slabtextdone .slabtext {
	display: block;
	}

	:root {
	--startColor: hsl(0, 100%, 75%);
	--stopColor: hsl(0, 100%, 75%);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	height: 100vh;
	display: grid;
	place-items: center;
	}

	svg {
	width: 90vmin;
	height: 90vmin;
	}

	path {
	cursor: pointer;
	}

	p {
	position: absolute;
	font-size: 1.125rem;
	font-weight: 500;
	bottom: 1rem;
	right: 1rem;
	color: #fff;
	font-family: system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	#blob {
	position: absolute;
	top: -10%;
	z-index: -1;
	}
	hr {
	width: 100%;
	color: white;
	}