Skip to content

Instantly share code, notes, and snippets.

@sxywu

sxywu/.block

Last active July 17, 2016 23:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sxywu/b7c7d505a2248d1c05f9c19a93745290 to your computer and use it in GitHub Desktop.
Save sxywu/b7c7d505a2248d1c05f9c19a93745290 to your computer and use it in GitHub Desktop.
Download ZIP
Personal Logo Iteration 3
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js'></script>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
<style>
* {
font-family: "Libre Baskerville";
text-align: center;
color: rgb(73, 193, 244);
}
</style>
</head>
<body>
<canvas id='logo'></canvas>
<h1>
<div>Shirley Wu</div>
<!-- <div>Xueyang</div>
<div>Wu</div> -->
</h1>
<script>
var canvas = document.getElementById('logo');
canvas.width = 120;
canvas.height = 250;
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'overlay';
var padding = 40;
size = 100;
var radius = size / 2;
var cx = canvas.width / 2;
var cy1 = padding + radius;
var y = cy1 + radius * Math.sin(0.4 * Math.PI);
var cy2 = y - radius * Math.sin(-0.1 * Math.PI);
var start1 = 0.25;
var start2 = -0.75;
var end1 = 2;
var end2 = 1;
var yellow = [242, 242, 93];
var magenta = [240, 68, 114];
var cyan = [73, 193, 244];
// draw fractals
function drawFractals(times, startAngle, endAngle, cx, cy) {
_.times(times, function(i) {
var start = _.random(startAngle, endAngle);
var end = start + _.random(0.25, .85);
end = end > endAngle ? endAngle : end;
var color = i % 2 ? cyan : yellow;
var opacity = _.random(0.1, 0.35);
ctx.fillStyle = 'rgba(' + color.join(',') + ',' + opacity + ')';
ctx.beginPath();
ctx.arc(cx, cy, radius, start * Math.PI, end * Math.PI);
ctx.fill();
});
}
function drawLogo() {
ctx.clearRect(0, 0, 120, 250);
var duration = 1000;
var i = 0;
d3.timer(function(elapsed) {
i += 1;
if (i % 5 === 0) {
drawFractals(2, start1, end1, cx, cy1);
drawFractals(2, start2, end2, cx, cy2);
}
return elapsed >= duration;
});
}
drawLogo();
d3.select(canvas)
.style('cursor', 'pointer')
.on('mouseenter', drawLogo);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment