Skip to content

Instantly share code, notes, and snippets.

@evitolins evitolins/app.js
Created Jan 21, 2015

Embed
What would you like to do?
(function(){
/////////////////////////////////
// Viewport
/////////////////////////////////
var vcvs = document.createElement("canvas");
var vctx = vcvs.getContext('2d');
vcvs.width=480;
vcvs.height=480;
document.body.appendChild(vcvs);
// Break
document.body.appendChild(document.createElement("br"));
/////////////////////////////////
// Pattern 1
/////////////////////////////////
var pcvs = document.createElement("canvas");
var pctx = pcvs.getContext('2d');
pcvs.width=20;
pcvs.height=20;
//document.body.appendChild(pcvs);
var renderPattern1 = function () {
pctx.strokeStyle = '#0cf';
pctx.moveTo(0, 0);
pctx.lineTo(20, 20);
pctx.moveTo(10, 0);
pctx.lineTo(20, 10);
pctx.moveTo(0, 10);
pctx.lineTo(10, 20);
pctx.stroke();
};
renderPattern1();
/////////////////////////////////
// Pattern 2
/////////////////////////////////
var p2cvs = document.createElement("canvas");
var p2ctx = p2cvs.getContext('2d');
p2cvs.width=40;
p2cvs.height=40;
//document.body.appendChild(p2cvs);
var renderPattern2 = function () {
p2ctx.strokeStyle = '#0cf';
p2ctx.lineWidth = 3;
p2ctx.globalAlpha = 1;
//p2ctx.moveTo(0, 10); p2ctx.lineTo(30, 40);
p2ctx.moveTo(-10, 10); p2ctx.lineTo(30, 50);
//p2ctx.moveTo(0, 30); p2ctx.lineTo(10, 40);
//p2ctx.moveTo(0, 0); p2ctx.lineTo(40, 40);
//p2ctx.moveTo(30, 0); p2ctx.lineTo(40, 10);
p2ctx.moveTo(10, -10); p2ctx.lineTo(50, 30);
//p2ctx.moveTo(10, 0); p2ctx.lineTo(40, 30);
p2ctx.stroke();
};
renderPattern2();
/////////////////////////////////
// Pattern 3
/////////////////////////////////
var p3cvs = document.createElement("canvas");
var p3ctx = p3cvs.getContext('2d');
p3cvs.width=80;
p3cvs.height=80;
//document.body.appendChild(p3cvs);
var renderPattern3 = function () {
var x, y, radius, startAngle, endAngle, counterClockwise;
p3ctx.strokeStyle = '#f40';
p3ctx.lineWidth = 6;
p3ctx.globalAlpha = 1;
//Arc 1
x = 0;
y = 80;
radius = 40;
startAngle = 1.5 * Math.PI;
endAngle = 0 * Math.PI;
counterClockwise = false;
p3ctx.beginPath();
p3ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
p3ctx.stroke();
//Arc 2
x = 80;
y = 0;
radius = 40;
startAngle = -1.5 * Math.PI;
endAngle = 0 * Math.PI;
counterClockwise = false;
p3ctx.beginPath();
p3ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
p3ctx.stroke();
};
renderPattern3();
/////////////////////////////////
// Pattern 4
/////////////////////////////////
var p4cvs = document.createElement("canvas");
var p4ctx = p4cvs.getContext('2d');
p4cvs.width=160;
p4cvs.height=160;
//document.body.appendChild(p4cvs);
var renderPattern4 = function () {
var x, y, radius, startAngle, endAngle, counterClockwise;
p4ctx.strokeStyle = '#ff4';
p4ctx.lineWidth = 6;
p4ctx.globalAlpha = 1;
// Arc 1
x = 0;
y = 160;
radius = 80;
startAngle = 1.5 * Math.PI;
endAngle = 0 * Math.PI;
counterClockwise = false;
p4ctx.beginPath();
p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
p4ctx.stroke();
//Arc 2
x = 160;
y = 0;
radius = 80;
startAngle = -1.5 * Math.PI;
endAngle = 0 * Math.PI;
counterClockwise = false;
p4ctx.beginPath();
p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
p4ctx.stroke();
//Dot
x = 130;
y = 30;
radius = 10;
startAngle = 2 * Math.PI;
endAngle = 0 * Math.PI;
counterClockwise = false;
p4ctx.beginPath();
p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
p4ctx.fillStyle = '#ff4';
p4ctx.fill();
p4ctx.stroke();
x = 30;
y = 130;
radius = 3;
startAngle = 2 * Math.PI;
endAngle = 0 * Math.PI;
counterClockwise = false;
p4ctx.beginPath();
p4ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
p4ctx.fillStyle = '#ff4';
p4ctx.fill();
p4ctx.stroke();
};
renderPattern4();
var getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
var clear = function () {
vctx.clearRect(0, 0, vcvs.width, vcvs.height);
};
var render = function (viewport, sources) {
var i,x,y,w,h,rotate;
sources = sources || [];
vw = viewport.width;
vh = viewport.height;
viewportctx = viewport.getContext('2d');
clear();
//Use each given canvas pattern
for (i=0; i<sources.length; i++) {
if (sources[i].tagName === "CANVAS"){
w = sources[i].width;
h = sources[i].height;
// Repeat Canvas on grid, rotating randomly
for (ii=0; ii<(vh/h); ii++) {
y = ii * h;
for (iii=0; iii<(vw/w); iii++) {
x = iii * w;
rotate = Math.PI / 2 * getRandomInt (0, 300);
viewportctx.save();
viewportctx.translate( x+(w/2), y+(h/2) );
viewportctx.rotate( rotate );
viewportctx.translate( -1 * (x+(w/2)), -1 * (y+(h/2)) );
viewportctx.drawImage( sources[i], x, y );
viewportctx.restore();
}
}
}
}
viewportctx.strokeStyle = '#ccc';
viewportctx.lineWidth = 0;
viewportctx.globalAlpha = 0.8;
viewportctx.beginPath();
viewportctx.arc(32, 452, 20, 2 * Math.PI, 0 * Math.PI, false);
viewportctx.fillStyle = '#ccc';
viewportctx.fill();
viewportctx.stroke();
viewportctx.globalAlpha = 1;
viewportctx.font = '20pt Helvetica';
viewportctx.fillStyle = '#fff';
viewportctx.fillText('ev', 18, 460);
};
var layers = [p3cvs, pcvs, p2cvs, p4cvs];
vcvs.addEventListener('click', function(){
render(vcvs, layers);
});
setInterval(function(){render(vcvs, layers);}, 100);
render(vcvs, layers);
var btn1 = document.getElementById('option1');
var btn2 = document.getElementById('option2');
var btn3 = document.getElementById('option3');
var btn4 = document.getElementById('option4');
btn1.addEventListener('click', function (){layers = [p3cvs, pcvs, p2cvs, p4cvs];});
btn2.addEventListener('click', function (){layers = [p2cvs, p4cvs];});
btn3.addEventListener('click', function (){layers = [pcvs, p3cvs];});
btn4.addEventListener('click', function (){layers = [p2cvs, pcvs];});
}());
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id='option1' type='button' value='option1'>
<input id='option2' type='button' value='option2'>
<input id='option3' type='button' value='option3'>
<input id='option4' type='button' value='option4'>
<br />
</body>
</html>
canvas {
border: 1px #ccc solid;
background: #445;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.