Flowing transforming circle

Developer
Pimskie
Size
3,841 Kb
Views
42,504
  1. Flowing transforming circle Previews
  2. Flowing transforming circle HTML Codes
  3. Flowing transforming circle CSS Codes
  4. Flowing transforming circle JS Codes

How do I make an flowing transforming circle?

A transforming circle moving by perlin noise. Inspired by a blogpost from Rectangle World . What is a flowing transforming circle? How do you make a flowing transforming circle? This script and codes were developed by Pimskie on 13 June 2022, Monday.

Flowing transforming circle Previews
IQ Test

Flowing transforming circle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flowing transforming circle</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas class="canvas"></canvas> <script src='http://rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js'></script>
<script src='http://rawgit.com/josephg/noisejs/master/perlin.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flowing transforming circle - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.ac { opacity: 0.5;
}
.ac:hover { opacity: 1;
}

Flowing transforming circle - Script Codes JS Codes

/** * inspired by: * Rectangle World * http://rectangleworld.com/blog/archives/462 */
// http://stackoverflow.com/a/5624139/5930258
const hexToRgb = (hex) => {	let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;	hex = hex.replace(shorthandRegex, (m, r, g, b) => {	return r + r + g + g + b + b;	});	let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);	return result ? [	parseInt(result[1], 16),	parseInt(result[2], 16),	parseInt(result[3], 16)	] : null;
}
const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
let winWidth;
let winHeight;
let midX;
let midY;
let tick;
let rafId;
class Circle {	constructor(options) {	this.assign(options);	return this;	}	create() {	this.points = [];	this.radius = (this.grow) ? 0 : this.radius;	let angle = 0;	let step = (Math.PI * 2) / this.segments;	for (let i = 0; i < this.segments; i++) {	let x = this.x + (Math.cos(angle) * this.radius);	let y = this.y + (Math.sin(angle) * this.radius);	this.points.push({ x, y, angle });	angle += step;	}	return this;	}	update(x, y, endX) {	this.x = x;	this.y = y;	if (this.grow) {	this.radius = Math.max(0, this.maxRadius * (x / endX));	}	}	updatePoint(p, tick, baseX, baseY) {	p.x = Math.cos(p.angle);	p.y = Math.sin(p.angle);	let smoothness = 1;	let nx = p.x * smoothness;	let ny = p.y * smoothness;	let radius = this.radius + this.getNoise(tick + nx, tick + ny);	p.x *= radius;	p.y *= radius;	p.x += baseX;	p.y += baseY;	}	getNoise(a, b) {	const max = this.radius * 1.5;	const n = noise.perlin2(a, b);	// map between -1, 1	return (n + 1) * (max + max) / 2 - max;	}	assign(options) {	Object.assign(this, options);	this.maxRadius = this.radius;	this.reset();	}	reset() {	this.create();	}	// when setting a rgb value ([r, g, b]) directly in dat.ui, it sometimes returns a hex	// so, input a hex by default and convert it manually to rgb	set color1(c1) {	let rgb = hexToRgb(c1).join(', ');	this._color1 = c1;	this.rgb1 = `rgba(${rgb}, ${this.alpha})`;	}	set color2(c2) {	let rgb = hexToRgb(c2).join(', ');	this._color2 = c2;	this.rgb2 = `rgba(${rgb}, ${this.alpha})`;	}	get color1() { return this._color1; }	get color2() { return this._color2; }	get rgba1() { return this.rgb1; }	get rgba2() { return this.rgb2;	}
}
const assignColors = () => {	circle.color1 = options.color1;	circle.color2 = options.color2;	circle.alpha = options.alpha;
}
const setupStage = () => {	winWidth = window.innerWidth;	winHeight = window.innerHeight;	midX = winWidth >> 1;	midY = winHeight >> 1;	tick = performance.now();	ctx.clearRect(0, 0, winWidth, winHeight);	ctx.canvas.width = winWidth;	ctx.canvas.height = winHeight;
}
const redraw = () => {	setupStage();	circle.assign(options);
}
const loop = () => {	tick += options.randomness;	circle.update(circle.x + 1.5, midY + ((midY / 2) * noise.perlin2(tick * 0.75, tick)), winWidth);	let currX = circle.x;	let currY = circle.y;	let grad = ctx.createLinearGradient(-circle.radius, currY, circle.radius, currY);	grad.addColorStop(0, circle.rgba1);	grad.addColorStop(1, circle.rgba2);	ctx.strokeStyle = grad;	ctx.lineWidth = options.lineWidth;	ctx.save();	ctx.translate(currX, currY);	circle.points.forEach((point, index) => {	ctx.beginPath();	ctx.moveTo(point.x - currX, point.y - currY);	circle.updatePoint(point, tick, currX, currY);	ctx.lineTo(point.x - currX, point.y - currY);	ctx.stroke();	ctx.closePath();	});	ctx.restore();	rafId = requestAnimationFrame(loop);
}
window.addEventListener('resize', redraw);
setupStage();
let options = {	segments: 1000,	radius: 150,	x: -100,	y: midY,	grow: false,	radius: 130,	color1: '#d2205e',	color2: '#29cafc',	alpha: 0.1,	randomness: 0.005,	lineWidth: 1.01
};
let circle = new Circle(options);
noise.seed(Math.random());
redraw();
loop();
let gui = new dat.GUI();
let folderColor = gui.addFolder('Appearance');
let folderSettings = gui.addFolder('Circle settings');
folderColor.addColor(options, 'color1').onChange(assignColors);
folderColor.addColor(options, 'color2').onChange(assignColors);
folderColor.add(options, 'alpha').step(0.001).min(0.01).max(1).onChange(assignColors);
folderColor.add(options, 'lineWidth').step(0.01).min(1.01).max(5);
folderSettings.add(options, 'segments', 100, 1500).step(1).onFinishChange(redraw);
folderSettings.add(options, 'grow').onFinishChange(redraw);
gui.add({ redraw }, 'redraw');
folderColor.open();
gui.close();
Flowing transforming circle - Script Codes
Flowing transforming circle - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded June 13, 2022
Rating 4.5
Size 3,841 Kb
Views 42,504
Do you need developer help for Flowing transforming circle?

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!

Pimskie (pimskie) Script Codes
Name
Rainbow particles
A Pen by pimskie
Color circles
Apollonian gasket
Exploding hamburger - and more
Dragon curve
Wave
CSS Push menu
SVG animation test
Circles pattern
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!