For the company website we are trying to entertain our visitors w/ some technical stuff, since we do not have any real content.
We are pragmatic, so we use standard wordpress and standard theme for our website. The header image looks like this:
For this, i really like the Photoshop Filter Patchwork, which does basically this:
Pretty neat, but hey, we are developers and here, we do not want to use standard Photoshop-Filters.
Also i really like the pixel idea but we have the diamond as element.
So next Step is somthing like this:
Looks litte like a sawblade, so the first row and column need to be treated extrawise.
Great. Adding the extra diamond Symbol, and we are done:
update:
to soften it up a bit, added
context.shadowOffsetX = -2; context.shadowOffsetY = -2; context.shadowBlur = 8; context.shadowColor = "rgb(91,91,91)"; |
For those, who want to try out by themselves, here is the code:
HTML:
<html> <head> <title>Canvas Drawing Image</title> <style> #imageCanvas { width: 1000px; height: 288px; } #sourceCanvas { display: none; width: 1000px; height: 288px; } </style> </head> <body onload="draw();"> <h1>Diamonds</h1> <div id="myDiv"> <div>lets see!<br/><br/></div> </div> <canvas id="imageCanvas" width="1000" height="288"><img src="shore.jpg" width="1000" height="288" alt="alternative image for non-canvas browsers" /></canvas> <canvas id="sourceCanvas" width="1000" height="288">This is the source image, should be hidden</canvas> <div id="console"></div> </body> </html> |
JavaScript
<script> /* * Created by Bayer und Preuss * User: patricktresp * Date: 26.06.12 */ var _diamondWidth = 10; var _diamondHeight = 15; var float_ts = 0; function draw() { float_ts = new Date().getTime(); var sourceCanvas = document.getElementById("sourceCanvas"); if (sourceCanvas.getContext) { var image = new Image(); image.src = "shore.jpg"; // caution : image.onload is lowercase not onLoad! image.onload = function() { var context = sourceCanvas.getContext('2d'); context.drawImage(image, 0, 0); drawDiamonds(); } } } function drawDiamonds() { var canvas = document.getElementById('imageCanvas'); // make sure context is available if (canvas.getContext) { var context = canvas.getContext('2d'); var columns = canvas.width / _diamondWidth; var rows = canvas.height / _diamondHeight; for (var j = 0; j <= rows; j++) { for (var i = 0; i <= columns; i++) { // draw topTriangles when in row 0 if (j == 0) drawTopTriangle(canvas, i, j); // draw sideTriangles when in column 0 if (i == 0) drawSideTriangle(canvas, i, j); // firstRow drawDiamond(canvas, i, j); // secondRow displaced drawDiamond(canvas, i + 0.5, j + 0.5); } } // add extra brand stuff drawBayerUndPreussDiamonds(canvas); } } function drawDiamond(canvas, i, j) { var context = canvas.getContext('2d'); var topX = _diamondWidth / 2 + i * _diamondWidth; var rightX = _diamondWidth + i * _diamondWidth; var bottomX = topX; var leftX = i * _diamondWidth; var topY = 0 + j * _diamondHeight; var rightY = topY + _diamondHeight / 2; var bottomY = topY + _diamondHeight; var leftY = rightY; var color = getBitmapColorForRect(canvas, i * _diamondWidth, j * _diamondHeight, _diamondWidth, _diamondHeight); context.fillStyle = color; context.shadowOffsetX = -2; context.shadowOffsetY = -2; context.shadowBlur = 8; context.shadowColor = "rgb(91,91,91)"; context.beginPath(); context.moveTo(topX, topY); context.lineTo(rightX, rightY); context.lineTo(bottomX, bottomY); context.lineTo(leftX, leftY); context.lineTo(topX, topY); context.fill(); } function drawTopTriangle(canvas, i, j) { var canvas = document.getElementById('imageCanvas'); var context = canvas.getContext('2d'); var leftX = i * _diamondWidth + _diamondWidth / 2; var rightX = leftX + _diamondWidth; var bottomX = leftX + _diamondWidth / 2; var leftY = j; var rightY = leftY; var bottomY = j + _diamondHeight / 2; var color = getBitmapColorForRect(canvas, i * _diamondWidth, (j + 1) * _diamondHeight, _diamondWidth / 2, _diamondHeight / 2); context.fillStyle = color; context.beginPath(); context.moveTo(leftX, leftY); context.lineTo(rightX, rightY); context.lineTo(bottomX, bottomY); context.lineTo(leftX, leftY); context.fill(); } function drawSideTriangle(canvas, i, j) { var context = canvas.getContext('2d'); var leftX = i; var rightX = leftX + _diamondWidth / 2; var bottomX = leftX; var leftY = j * _diamondHeight - _diamondHeight / 2; var rightY = leftY + _diamondHeight / 2; var bottomY = leftY + _diamondHeight; var color = getBitmapColorForRect(canvas, i * _diamondWidth, j * _diamondHeight, _diamondWidth / 2, _diamondHeight / 2); context.fillStyle = color; context.beginPath(); context.moveTo(leftX, leftY); context.lineTo(rightX, rightY); context.lineTo(bottomX, bottomY); context.lineTo(leftX, leftY); context.fill(); } function getBitmapColorForRect(canvas, x, y, width, height) { var sourceCanvas = document.getElementById("sourceCanvas"); if (sourceCanvas.getContext) { var context = sourceCanvas.getContext('2d'); if (context) { var imageData = context.getImageData(x, y, width, height); return 'rgb(' + imageData.data[0] + ', ' + imageData.data[1] + ', ' + imageData.data[2] + ')'; } } return 0; } function drawBayerUndPreussDiamonds(canvas) { var color = 'rgb(255,243,123)'; var w = _diamondWidth; var h = _diamondHeight; // single var startX = 92 * w - w / 2; var startY = 4 * h; drawFirstBayerUndPreussDiamond(canvas, startX, startY); drawThreeBayerUndPreussDiamonds(canvas, startX, startY); drawFiveBayerUndPreussDiamonds(canvas, startX, startY); } function drawFirstBayerUndPreussDiamond(canvas, startX, startY) { var color = 'rgb(255,243,123)'; var w = _diamondWidth * 2; var h = _diamondHeight * 2; if (canvas.getContext) { var context = canvas.getContext('2d'); context.fillStyle = color; context.beginPath(); context.moveTo(startX, startY); context.lineTo(startX + w / 2, startY + h / 2); context.lineTo(startX, startY + h); context.lineTo(startX - w / 2, startY + h / 2); context.lineTo(startX, startY); context.fill(); } } function drawThreeBayerUndPreussDiamonds(canvas, startX, startY) { var color = 'rgb(255,243,123)'; var w = _diamondWidth * 2; var h = _diamondHeight * 2; startX += 1.5 * _diamondWidth; startY -= 1.5 * _diamondHeight; if (canvas.getContext) { var context = canvas.getContext('2d'); context.fillStyle = color; context.beginPath(); context.moveTo(startX, startY); context.lineTo(startX + w * 1.25, startY + h * 1.25); context.lineTo(startX, startY + 2.5 * h); context.lineTo(startX - 0.5 * w, startY + 2 * h); context.lineTo(startX + 0.25 * w, startY + 1.25 * h); context.lineTo(startX - w / 2, startY + h / 2); context.lineTo(startX, startY); context.fill(); } } function drawFiveBayerUndPreussDiamonds(canvas, startX, startY) { var color = 'rgb(255,243,123)'; var w = _diamondWidth * 2; var h = _diamondHeight * 2; startX += 3 * _diamondWidth; startY -= 3 * _diamondHeight; if (canvas.getContext) { var context = canvas.getContext('2d'); context.fillStyle = color; context.beginPath(); context.moveTo(startX, startY); context.lineTo(startX + w * 2, startY + h * 2); context.lineTo(startX , startY + 4 * h); context.lineTo(startX - .5*w , startY + 3.5 * h); context.lineTo(startX + 1*w , startY + 2 * h); context.lineTo(startX - w / 2, startY + h / 2); context.lineTo(startX, startY); context.fill(); } } </script> |
Still need a solution for inner shadow on the shapes i am drawing, though….