Javascript | React-Native Programmierer . Patrick Tresp

HTML Canvas – draw within context and getImageData // patchwork effect

26-06-2012

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….~~

Male sex forum semenax

beyondtellerrand #btplay 2012 summary

By: admin

08-05-2012

Allgemein, Javascript

Also this time, i want to write a very little summary of btplay in cologne, since i just got back from vacation, a lot is already out of mind.

Luca Sale
– keywords: phonegap, ripple, cloud9

Nico Zimmermann
– keywords: schau, passion project time ( save a month a year to just to passion projects )

Tim Ahrens
– keywords: fontfonter ( try fonts on any website )

Grant Skinner
– keywords: technitone, createjs

Thanks also to the great talks:

– Marcin Wichary
– Seb Lee
– Frank Reitberger
– Joshua Davis ( still cracking somethimes and thank you for this: „the work you make is the type of work you’ll get hired to do“ )
– Sebastian Golash

Semenax sperm volume pills

Internet Explorer 8 and all the fun stuff: e.stopPropagation, e.preventDefault, mousedown….

By: admin

16-02-2012

Allgemein, Javascript

When working with JQuery, it seems all work is taken over by the library.
Actually it does, unless a client tells you afterwards, Internet Explorer 8 is still his/her weapon of choice, next to the ipad of course.
A really funny combination of technical aspects, but client is king, lets make him feel that way.

A real pain is that IE8 is not able to use event.preventDefault() nor event.stopPropagation().

For this, its helpful to use a function that will end the event, no matter what browser:

Step 01. make sure to stop Events

function stopEvent(e) {
 
	if(!e) var e = window.event;
 
	//e.cancelBubble is supported by IE -
        // this will kill the bubbling process.
	e.cancelBubble = true;
	e.returnValue = false;
 
	//e.stopPropagation works only in Firefox.
	if ( e.stopPropagation ) e.stopPropagation();
	if ( e.preventDefault ) e.preventDefault();		
 
       return false;
}

Step 02: adding and removing the listeners.

Since IE (8) does not support addEventListener or removeEventListener etc. the element needs to be checked, whether it supports addEventListener or attachEvent ( IE )

function addListeners( el )
{// Allow function call without passing parameters
	var e = el;
	if( !e )  e = document.getElementById('myDiv');
	var el = e;
 
	if( el )
	{
		if( el.addEventListener )
		{	
			el.addEventListener('mouseup', onMouseUp, true);
			el.addEventListener('mousemove', onMouseMove, true);
			el.addEventListener('touchstart', onTouchStart, true);
			el.addEventListener('touchmove', onTouchMove, true);
			el.addEventListener('touchend', onTouchEnd, true);			
		}else if( el.attachEvent ) {
                        // make sure mouse events have the prefix <strong>on</strong>
			el.attachEvent('onmouseup',    onMouseUp);		
			el.attachEvent('onmousemove',    onMouseMove);
			el.attachEvent('touchstart',   onTouchStart);
			el.attachEvent('touchmove',    onTouchMove);
			el.attachEvent('touchend', onTouchEnd);				
		}   
	}
}
// also remove the Listeners correctly:
 
function removeListeners( el )
{	var e = el;
	if( !e )  e = document.getElementById('myDiv');
	var el = e;
	if( el )
	{
		if( el.removeEventListener )
		{	
			el.removeEventListener('mouseup', onMouseUp);
			el.removeEventListener('mousemove', onMouseMove);
			el.removeEventListener('touchstart', onTouchStart);
			el.removeEventListener('touchmove', onTouchMove);
			el.removeEventListener('touchend', onTouchEnd);
		}else if( el.detachEvent ) {
			el.detachEvent('onmouseup',    onMouseUp);
			el.detachEvent('onmousemove',    onMouseMove);
			el.detachEvent('touchstart',   onTouchStart);
			el.detachEvent('touchmove',    onTouchMove);
			el.detachEvent('touchend', onTouchEnd);				
		}  
	}
}

Now its just a Matter of Needs, what to do within the handlers:
an Example could be

 function onMouseUp(e) {
	log('-&gt; mouse up');
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	removeListeners();
	stopEvent(e);
}
 
function onMouseDown(e) {
	log('-&gt; mouse down');
	addListeners();
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	onTouchStart(e);
	stopEvent(e);
}
 
function onMouseMove(e) {
	log('-&gt; mouse move');
	e.touches = [{clientX: e.clientX, clientY: e.clientY}];
	onTouchMove(e);
	stopEvent(e);
}
 
function onTouchStart(e) {
	log('-&gt; touch start');
	//do something with e.touches[0].clientX or e.touches[0].clientY
   stopEvent(e);
}
 
function onTouchMove(e) {
	log('-&gt; touch move');
	//do something with e.touches[0].clientX or e.touches[0].clientY
	stopEvent(e);
}
 
function onTouchEnd(e) {
	log('-&gt; touch end');
	if( !is_touch_device() ) removeListeners();
}

And to not get any errors, add function log and function is_touch_device…

function log(str) {
	var c;
	c = document.getElementById('console');
	c.innerHTML = str + '
' + c.innerHTML;
}
 
function is_touch_device() {
  return !!('ontouchstart' in window) ? 1 : 0;
}

Finally, if it is an Touch device, you want to add the listeners onLoad of the document, on regular devices on MouseDown. Call this function on documen_ready or onLoad.

function init() {
 
	var el;
    el = document.getElementById('myDiv');
 
	if( el.addEventListener )
	{
		el.addEventListener('mousedown', onMouseDown, false);
	}else if( el.attachEvent ) {
		el.attachEvent('onmousedown',    onMouseDown);
	}
	if( is_touch_device() ) addListeners();
 
 
}

it works so far in IE8/9, FireFox 3.6.1+, Safari and mobile Safari ( ios )

Buy en language levitra

— React-Native Programmierer . Patrick Tresp

HTML Canvas – draw within context and getImageData // patchwork effect

beyondtellerrand #btplay 2012 summary

Internet Explorer 8 and all the fun stuff: e.stopPropagation, e.preventDefault, mousedown….

About Patrick Tresp

Neueste Beiträge

Blogroll

Kategorien

Seiten

HTML5

Freunde