Color circles

Developer
Pimskie
Size
3,544 Kb
Views
46,552
  1. Color circles Previews
  2. Color circles HTML Codes
  3. Color circles CSS Codes
  4. Color circles JS Codes

How do I make an color circles?

A remake of one of my first Flash experiments back in the days http://doc-d.deviantart.com/art/Colored-circles-on-mouse-38161452. What is a color circles? How do you make a color circles? This script and codes were developed by Pimskie on 13 June 2022, Monday.

Color circles Previews
IQ Test

Color circles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color circles</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> <script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
<canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Color circles - Script Codes CSS Codes

html,
body { margin: 0; padding: 0;
}
body { overflow: hidden; background: #111;
}
canvas { cursor: none;
}

Color circles - Script Codes JS Codes

// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
// PLAY WITH THESE VARS
var numCircles = 50, maxDelay = 80, colorFrom = [0, 100, 100, .5], // rgba colorTo = [250, 250, 250, 0]; // rgba
var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), circles = [], destX = 0, destY = 0, automate = true, automateRadius, automatePosition = 0, winW, winH, circleMaxWidth, circleMaxHeight;
// fire it all up
function init() { reset(); initEvents(); loop();
}
// reset stage
function reset() { setupStage(); createCircles();
}
// setup & clear canvas
function setupStage() { winW = window.innerWidth; winH = window.innerHeight; automateRadius = winH * .25; circleMaxWidth = Math.min(250, winW * .25); circleMaxHeight = circleMaxWidth * .25; canvas.width = winW; canvas.height = winH; ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// bind events
function initEvents() { canvas.addEventListener('mousemove', mouseMoveHandler); canvas.addEventListener('mouseenter', mouseEnterHandler); canvas.addEventListener('mouseleave', mouseLeaveHandler); window.addEventListener('resize', reset);
}
// track mouse position
function mouseMoveHandler(e) { destX = e.pageX; destY = e.pageY;
}
// disable automatic movement
function mouseEnterHandler(e) { automate = false;
}
// enable automatic movement
function mouseLeaveHandler(e) { automate = true;
}
// create the circles
function createCircles() { // global var circles circles = []; var midX = winW >> 1, midY = winH >> 1, i = numCircles, step = 1 / numCircles, delay, scale, width, height, color, c; while (i--) { // properties for the circle scale = step * i + step; delay = maxDelay * scale; width = circleMaxWidth * scale; height = circleMaxHeight * scale; color = getColor(i); c = new Circle(midX, midY, width, height, delay, color); circles.push(c); }
}
function Circle(x, y, width, height, delay, color) { this.x = x; this.y = y; this.destX = x; this.destY = y; this.width = width; this.height = height; this.delay = delay; this.color = color;
}
// update position
// todo: implement Penner's easing functions
Circle.prototype.update = function(destX, destY) { this.destX = destX; this.destY = destY; this.x += (this.destX - this.x) / this.delay; this.y += (this.destY - this.y) / this.delay;
}
// draw a circle on the canvas
Circle.prototype.draw = function() { ctx.lineWidth = 3; ctx.strokeStyle = 'rgba(' + this.color.join(',') + ')'; // http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas ctx.save(); ctx.beginPath(); ctx.translate(this.x - this.width, this.y - this.height); ctx.scale(this.width, this.height); ctx.arc(1, 1, 1, 0, 2 * Math.PI, false); ctx.restore(); ctx.stroke();
}
// get a color for a circle based on it's index (0 - numCircles)
function getColor(index) { var stepR = (colorTo[0] - colorFrom[0]) / (numCircles - 1), red = Math.round(colorFrom[0] + (stepR * index)); var stepG = (colorTo[1] - colorFrom[1]) / (numCircles - 1), green = Math.round(colorFrom[1] + (stepG * index)); var stepB = (colorTo[2] - colorFrom[2]) / (numCircles - 1), blue = Math.round(colorFrom[2] + (stepB * index)); var stepA = (colorTo[3] - colorFrom[3]) / (numCircles - 1), alpha = colorFrom[3] + (stepA * index); return [red, green, blue, alpha];
}
// paint it
function loop() { requestAnimationFrame(loop); ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(1, 1, 1, .8)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighter"; var i = circles.length, c; if (automate === true) { destX = winW >> 1; destY = (winH >> 1) + (Math.sin(automatePosition) * automateRadius); automatePosition += .02; } while (i--) { c = circles[i]; c.update(destX, destY); c.draw(); }
}
init();
Color circles - Script Codes
Color circles - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded June 13, 2022
Rating 4
Size 3,544 Kb
Views 46,552
Do you need developer help for Color circles?

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
SVG animation test
Circular canvas loader
Tree mirror
Glitching image - USA style
Flowing transforming circle
Apollonian gasket
Duplicate geometry
Predictabe Flower
Particles Clifford attractor
Aizawa Attractor
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!