Grid Interaction

Developer
Pedro Cacique
Size
3,469 Kb
Views
20,240
  1. Grid Interaction Previews
  2. Grid Interaction HTML Codes
  3. Grid Interaction CSS Codes
  4. Grid Interaction JS Codes

How do I make an grid interaction?

What is a grid interaction? How do you make a grid interaction? This script and codes were developed by Pedro Cacique on 20 November 2022, Sunday.

Grid Interaction Previews
IQ Test

Grid Interaction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid Interaction</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <nav> <section id="ctrl_content" class="open"> <span><input type="checkbox" id="showGrid"/> Show grid</span> <span>Mouse radius: <input type="number" id="mouseRadius"/></span> <span>Min circle radius: <input type="number" id="minRadius"/></span> <span>Max circle radius: <input type="number" id="maxRadius"/></span> <span>Min grid count: <input type="number" id="minGridCount"/></span> </section> </nav> <header id="top">Controls <div id="tri" class="tri_down"></div></header> <script src="js/index.js"></script>
</body>
</html>

Grid Interaction - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: monospace
}
nav { position: fixed; background-color: #212f3d; top: 0; right: 0; color: #fff; width: 230px;
}
header { background-color: #17202a; padding: 5px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; cursor: hand; z-index: 20; position: fixed; top:0; right:0; width: 220px; color: #fff;
}
nav section { padding: 10px; display: flex; align-items: flex-end; flex-flow: column wrap;
}
nav span { padding: 5px; display: block;
}
nav input[type="number"] { width: 40px; border: none; border-radius: 2px; padding: 2px
}
#tri{ transition: 1s all;
}
.tri_down { width: 0; height: 0; border-style: solid; border-width: 7px 3.5px 0 3.5px; border-color: #ffffff transparent transparent transparent;
}
.tri_up { width: 0; height: 0; border-style: solid; border-width: 0 3.5px 7px 3.5px; border-color: transparent transparent #ffffff transparent;
}
#ctrl_content{ position: fixed; background-color: #212f3d; width: 210px; transition: 1s all;
}
.open{ top:25px;
}
.closed{ top:-200px;
}

Grid Interaction - Script Codes JS Codes

const FPS = 1000 / 30;
var canvas, ctx, shapes, gSize;
var minCount = 20, minRadius = 1, maxRadius = 20, mouseRadius = 20, showGrid = true;
var bgColor = "#2C3E50", colors = ["#F1C40F", "#F39C12", "#E67E22", "#D35400"], mouseCircle;
var showControls = true;
window.onload = function () { init();
}
window.onresize = function(){ init();
}
function init() { canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style.backgroundColor = bgColor; ctx = canvas.getContext("2d"); document.getElementById("showGrid").checked = showGrid; document.getElementById("showGrid").onchange = function () { showGrid = !showGrid }; mouseCircle = new Circle(new Point(), mouseRadius, "rgba(0,0,0,0)"); shapes = []; gSize = Math.min(canvas.width, canvas.height) / (minCount - 1); for (var i = gSize; i < canvas.width; i += gSize) { for (var j = gSize; j < canvas.height; j += gSize) { shapes.push(new Circle(new Point(i, j), minRadius, colors[randomInt(0, colors.length - 1)])); } } setInterval(canvasLoop, FPS); canvas.addEventListener("mousemove", mousemove); document.getElementById("mouseRadius").value = mouseRadius; document.getElementById("minRadius").value = minRadius; document.getElementById("maxRadius").value = maxRadius; document.getElementById("minGridCount").value = minCount; document.getElementById("mouseRadius").onchange = function () { mouseCircle.radius = parseInt(document.getElementById("mouseRadius").value); } document.getElementById("minRadius").onchange = function () { minRadius = parseInt(document.getElementById("minRadius").value); for (var i = 0; i < shapes.length; i++) { shapes[i].radius = minRadius; } } document.getElementById("maxRadius").onchange = function () { maxRadius = parseInt(document.getElementById("maxRadius").value); } document.getElementById("minGridCount").onchange = function () { minCount = parseInt(document.getElementById("minGridCount").value); init(); } document.getElementById("top").onclick = function(){ showControls = !showControls; document.getElementById("ctrl_content").className = (showControls)?"open":"closed"; console.log(document.getElementById("ctrl_content").className); document.getElementById("top").style.zIndex = "20"; document.getElementById("ctrl_content").style.zIndex = "10"; document.getElementById("tri").className = (showControls)?"tri_down":"tri_up"; }
}
function mousemove() { mouseCircle.center.x = event.clientX - canvas.offsetLeft - mouseCircle.radius / 2; mouseCircle.center.y = event.clientY - canvas.offsetTop - mouseCircle.radius / 2;
}
function canvasLoop() { update(); draw();
}
function update() { for (var i = 0; i < shapes.length; i++) { if (mouseCircle.checkCollision(shapes[i])) { shapes[i].radius = maxRadius; } else if (shapes[i].radius > minRadius && shapes[i].radius - shapes[i].lowRadiusRate >= minRadius) { shapes[i].radius -= shapes[i].lowRadiusRate; } else { shapes[i].radius = minRadius; } }
}
function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < shapes.length; i++) { if (!(!showGrid && shapes[i].radius == minRadius)) shapes[i].draw(); } mouseCircle.draw();
}
//----- UTIL -----
function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomFloat(min, max) { return Math.random() * (max - min + 1) + min;
}
//----- PROTOTYPES -----
function Point(x, y) { this.x = (x != null) ? x : 0; this.y = (y != null) ? y : 0;
}
Point.prototype.distance = function (other) { return Math.sqrt(Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2));
}
function Circle(center, radius, color, lowRadiusRate) { this.center = (center != null) ? center : (new Point()); this.radius = (radius != null) ? radius : 10; this.color = (color != null) ? color : "#000"; this.lowRadiusRate = (lowRadiusRate != null) ? lowRadiusRate : randomFloat(0.3, 0.5);
}
Circle.prototype.draw = function () { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.center.x, this.center.y, this.radius, 0, Math.PI * 2); ctx.fill(); ctx.closePath();
}
Circle.prototype.checkCollision = function (other) { return (Math.sqrt(Math.pow(this.center.x - other.center.x, 2) + Math.pow(this.center.y - other.center.y, 2)) <= this.radius + other.radius);
}
Grid Interaction - Script Codes
Grid Interaction - Script Codes
Home Page Home
Developer Pedro Cacique
Username phcacique
Uploaded November 20, 2022
Rating 4
Size 3,469 Kb
Views 20,240
Do you need developer help for Grid Interaction?

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!

Pedro Cacique (phcacique) Script Codes
Name
Web Theremin
Page transition
Aside Hover Menu
Platform game mechanics
One page scrolling
Create amazing art & images 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!