Wave

Developer
Pimskie
Size
3,651 Kb
Views
68,816
  1. Wave Previews
  2. Wave HTML Codes
  3. Wave CSS Codes
  4. Wave JS Codes

How do I make an wave?

A colleague showed me this GIF: https://33.media.tumblr.com/a5d2523e8a4fc92e1629ae9937d870f6/tumblr_nl4lm8O73g1u93xcqo1_500.gif (source unknown). . What is a wave? How do you make a wave? This script and codes were developed by Pimskie on 13 June 2022, Monday.

Wave Previews
IQ Test

Wave - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wave</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> <div class="container"> <h1>Wave</h1> <canvas class="canvas js-canvas"></canvas> <div class="form"> <div class="form__item"> <label class="form__label" for="circles">Show circles</label> <input class="form__field js-show-cirlces" type="checkbox" name="circles" id="circles" value="true" /> </div> <div class="form__item"> <label class="form__label" for="colors">Show debug colors</label> <input class="form__field js-show-colors" type="checkbox" name="colors" id="colors" value="true" /> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Wave - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html, body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; color: #fff; background: #000;
}
h1 { text-align: center;
}
.container { width: 500px; margin: 20px auto;
}
.form { text-align: center;
}
.form__item { display: inline-block; margin: 0 5px; padding: 0 10px; background: #272727; border-radius: 5px;
}
.form__label, .form__field { display: inline-block; text-align: center;
}
.form__label { padding: 10px 5px 10px 0; cursor: pointer;
}

Wave - Script Codes JS Codes

var PI2 = Math.PI * 2,	// canvas vars	canvasWidth = 500,	canvasHeight = 500,	canvas = document.querySelector('.js-canvas'),	ctx = canvas.getContext('2d'),	// vars for the circles	circles = [],	circleDiameter = 40,	circleRadius = circleDiameter * 0.5,	circleSpacing = 5,	rotateSpeed = 0.06,	showCircles = false,	showDebugColors = false,	// calculate rows & cols	numCols = Math.round(canvasWidth / (circleRadius + circleSpacing)),	numRows = Math.round(canvasHeight / (circleRadius + circleSpacing)),	// vars for test colors	count = numRows * 2,	colors = [];
// set canvas size
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
// set debug colors
while (count--) {	colors.push('#'+((1<<24)*Math.random()|0).toString(16));
}
// agile event binding...
document.querySelector('.js-show-cirlces').addEventListener('change', function(e) {	showCircles = e.target.checked;
});
document.querySelector('.js-show-colors').addEventListener('change', function(e) {	showDebugColors = e.target.checked;
});
function Circle(x, y, radius, angle, color) {	this.x = x;	this.y = y;	this.radius = radius;	this.angle = angle;	this.color = color;
}
Circle.prototype = {	update: function() {	// speed of the rotation	this.angle += rotateSpeed;	},	draw: function(ctx) {	// draw circle	if (showCircles) {	ctx.beginPath();	ctx.strokeStyle = showDebugColors ? this.color : '#acacac';	ctx.lineWidth = 1;	ctx.arc(this.x, this.y, this.radius, 0, PI2);	ctx.stroke();	ctx.closePath();	}	// draw dot	ctx.beginPath();	ctx.fillStyle = '#ffffff';	ctx.arc(this.x + Math.cos(this.angle) * this.radius, this.y + Math.sin(this.angle) * this.radius, 3, 0, PI2);	ctx.fill();	ctx.closePath();	}
};
createCircles();
run();
function createCircles() {	var x = 0,	y = 0,	angle = 0,	diagonal = 0,	totalCircles = numCols * numRows,	circle,	i, q;	// loop over rows	for (q = 0; q < numRows; q++) {	// add columns on each row	for (i = 0; i < numCols; i++) {	// get starting angle for the dot	angle = getAngle(diagonal);	circle = new Circle(x, y, circleRadius, angle, colors[diagonal]);	circle.draw(ctx);	circles.push(circle);	// update diagonal	diagonal = q + i;	x += circleRadius + circleSpacing;	}	x = 0;	y += circleRadius + circleSpacing;	}
}
function run() {	window.requestAnimationFrame(run);	var i = circles.length,	circle;	// clear	ctx.fillStyle = 'rgba(0, 0, 0, 1)';	ctx.fillRect(0, 0, canvasWidth, canvasHeight);	// loop over all circles and update and draw them	while (i--) {	circle = circles[i];	circle.update();	circle.draw(ctx);	}
}
function getAngle(diagonal) {	return PI2 * (diagonal / numRows);
}
Wave - Script Codes
Wave - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded June 13, 2022
Rating 4.5
Size 3,651 Kb
Views 68,816
Do you need developer help for Wave?

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
Neon spring trails
Phyllotaxis
Rainbow particles
Circles pattern
L-System
Dragon curve
Color circles
Tree mirror
Duplicate geometry
Planet attractors
Create amazing marketing copy 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!