Skip to content

Instantly share code, notes, and snippets.

@FZambia
Created May 13, 2020 21:45
Show Gist options
  • Save FZambia/a2bea0832d956090e699e62e267f8d01 to your computer and use it in GitHub Desktop.
Save FZambia/a2bea0832d956090e699e62e267f8d01 to your computer and use it in GitHub Desktop.
Logo javascript canvas
(function() {
'use strict';
window.addEventListener('load', function() {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return false;
}
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// canvas
var ctx = canvas.getContext('2d');
var X = canvas.width = window.innerWidth;
var Y = canvas.height = window.innerHeight;
var centerX = X / 2;
var centerY = Y / 2;
var color = '#F37748';
var segmentColor = 'rgb(4, 162, 219)';
var linesNum = 5;
var lines = [];
var segments = [];
var radius = 80;
var diff = radius / 100;
var lw = 5;
var blur = 10;
var rectNum = 4;
var rects = [];
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(cb) {
setTimeout(cb, 17);
};
/********************
Text
********************/
var text = 'CENTRIFUGO';
var textSize = lw*12;
function drawText() {
ctx.save();
ctx.fillStyle = segmentColor;
ctx.font = textSize + 'px' + " Geneva"
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.shadowBlur = blur;
ctx.fillText(text, X / 2, Y / 2 - radius*2.65 - textSize);
ctx.restore();
}
/********************
Line
********************/
function Line(ctx, x, y) {
this.ctx = ctx;
this.init(x, y);
}
Line.prototype.init = function(x, y) {
this.x = x;
this.y = y;
this.c = 'rgb(61, 61, 61)';
this.l = rand(10, 50);
this.lw = 1;
this.v = {
x: rand(-5, 5) * Math.random(),
y: rand(-5, 5) * Math.random()
};
};
Line.prototype.draw = function() {
var ctx = this.ctx;
ctx.save();
ctx.lineWidth = this.lw;
ctx.strokeStyle = this.c;
ctx.beginPath();
ctx.moveTo(0, this.y);
ctx.lineTo(X, this.y);
ctx.stroke();
ctx.lineWidth = this.lw;
ctx.beginPath();
ctx.moveTo(this.x, 0);
ctx.lineTo(this.x, Y);
ctx.stroke();
ctx.restore();
};
Line.prototype.updatePosition = function() {
this.x += this.v.x;
this.y += this.v.y;
};
Line.prototype.wrapPosition = function() {
if (this.x < 0) this.x = X;
if (this.x > X) this.x = 0;
if (this.y < 0) this.y = Y;
if (this.y > Y) this.y = 0;
};
Line.prototype.updateParams = function() {
this.l -= 0.05;
if (this.l < 0) {
this.v.x = rand(-5, 5) * Math.random();
this.v.y = rand(-5, 5) * Math.random();
this.l = rand(10, 50);
}
};
Line.prototype.render = function() {
this.updatePosition();
this.wrapPosition();
this.updateParams();
this.draw();
};
for (var i = 0; i < linesNum; i++) {
var line = new Line(ctx, rand(0, X), rand(0, Y));
lines.push(line);
}
/********************
Segment
********************/
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var x = centerX + (radius * Math.cos(angleInRadians));
var y = centerY + (radius * Math.sin(angleInRadians));
return [x, y];
}
function cartesianToPolar(centerX, centerY, radius, X, Y) {
var radians = Math.atan2(Y-centerY, X-centerX);
return radians * 180 / Math.PI;
}
function Segment(ctx, x, y, r, w, rotate, speed, angleDiff) {
this.ctx = ctx;
this.init(x, y, r, w, rotate, speed, angleDiff);
}
Segment.prototype.init = function(x, y, r, w, rotate, speed, angleDiff) {
this.x = x;
this.y = y;
this.r = r;
this.w = w;
this.c = segmentColor;
this.rotate = rotate;
this.speed = speed;
this.angleDiff = angleDiff;
this.a = 0;
};
Segment.prototype.drawSegment = function(fromAngle, toAngle, rotateAngle) {
ctx.translate(this.x, this.y);
ctx.rotate(rotateAngle * Math.PI / 180 );
ctx.translate(-this.x, -this.y);
ctx.beginPath();
var res = polarToCartesian(this.x, this.y, this.r, fromAngle);
var startX = res[0];
var startY = res[1];
var res = polarToCartesian(this.x, this.y, this.r, toAngle);
var endX = res[0];
var endY = res[1];
var innerAngleStart;
var innerAngleEnd;
var anotherX = startX - this.w;
var anotherY = endY - this.w;
innerAngleStart = cartesianToPolar(this.x, this.y, this.r, anotherX, startY);
innerAngleEnd = cartesianToPolar(this.x, this.y, this.r, endX, anotherY);
var toAngleRad = toAngle * Math.PI / 180;
var fromAngleRad = fromAngle * Math.PI / 180;
ctx.arc(this.x, this.y, this.r, toAngleRad, fromAngleRad, true);
var innerAngleStartRad = innerAngleStart * Math.PI / 180;
var innerAngleEndRad = innerAngleEnd * Math.PI / 180;
ctx.arc(this.x, this.y, this.r-this.w, innerAngleStartRad, innerAngleEndRad, false);
ctx.closePath();
ctx.fillStyle = segmentColor;
ctx.fill();
ctx.stroke();
}
Segment.prototype.draw = function() {
var ctx = this.ctx;
ctx.save();
ctx.lineWidth = 3;
ctx.strokeStyle = segmentColor;
ctx.shadowColor = segmentColor;
ctx.shadowBlur = blur;
console.log(this.angleDiff);
this.drawSegment(4 + this.angleDiff, 86 - this.angleDiff, this.rotate + this.a);
ctx.restore();
};
Segment.prototype.resize = function() {
this.x = X / 2;
this.y = Y / 2;
};
Segment.prototype.updateParams = function() {
this.a += this.speed * radius/this.r;
};
Segment.prototype.render = function() {
this.updateParams();
this.draw();
};
segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 0, -1.5, 0));
segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 90, -1.5, 0));
segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 180, -1.5, 0));
segments.push(new Segment(ctx, centerX, centerY, radius * 2.65, lw * 9, 270, -1.5, 0));
segments.push(new Segment(ctx, centerX, centerY, radius * 1.45, lw * 8, 45, 1.5, 2));
segments.push(new Segment(ctx, centerX, centerY, radius * 1.45, lw * 8, 135, 1.5, 2));
segments.push(new Segment(ctx, centerX, centerY, radius * 1.45, lw * 8, 225, 1.5, 2));
/********************
Rect
********************/
function Rect(ctx, x, y, lw, r, flg) {
this.ctx = ctx;
this.init(x, y, lw, r, flg);
}
Rect.prototype.init = function(x, y, lw, r, flg) {
this.flg = flg;
this.flg === true ? this.s = -Math.random(): this.s = Math.random();
this.flg === true ? this.scale = 1.45 : this.scale = 1.3;
this.x = x;
this.y = y;
this.lw = lw;
this.c = color;
this.a = rand(60, 360);
this.rad = this.a * Math.PI / 180;
this.r = r;
};
Rect.prototype.draw = function(){
var ctx = this.ctx;
ctx.save();
ctx.strokeStyle = this.c;
ctx.shadowColor = color;
ctx.shadowBlur = blur/2;
ctx.lineWidth = this.lw;
ctx.beginPath();
ctx.moveTo(this.x + Math.cos(this.rad) * this.r, this.y + Math.sin(this.rad) * this.r);
ctx.lineTo(this.x + Math.cos(this.rad) * this.r * this.scale, this.y + Math.sin(this.rad) * this.r * this.scale);
ctx.stroke();
ctx.restore();
};
Rect.prototype.resize = function() {
this.x = X / 2;
this.y = Y / 2;
};
Rect.prototype.upSpeed = function() {
this.flg === true ? this.s = -30: this.s = 30;
};
Rect.prototype.resetSpeed = function() {
this.flg === true ? this.s = -Math.random(): this.s = Math.random();
};
Rect.prototype.updateParams = function() {
this.a -= this.s;
this.rad = this.a * Math.PI / 180;
};
Rect.prototype.render = function() {
this.updateParams();
this.draw();
};
for (var i = 0; i < 9; i++) {
var rect = new Rect(ctx, centerX, centerY, lw * 5, radius * 1.55, false);
rects.push(rect);
}
function render(){
ctx.clearRect(0, 0, X, Y);
for (var i = 0; i < lines.length; i++) {
lines[i].render();
}
for (var i = 0; i < rects.length; i++) {
rects[i].render();
}
for (var i = 0; i < segments.length; i++) {
segments[i].render();
}
drawText();
requestAnimationFrame(render);
}
render();
function onResize() {
X = canvas.width = window.innerWidth;
Y = canvas.height = window.innerHeight;
textWidth = X / 5 + 1;
for (var i = 0; i < segments.length; i++) {
segments[i].resize();
}
for (var i = 0; i < rects.length; i++) {
rects[i].resize();
}
}
window.addEventListener('resize', function() {
onResize();
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment