code/franz
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial work on Texture theory. This attempt looks at using source PNG files to overlay over a <canvas> element, since drawing complex shapes could get somewhat complex, and <canvas> is a pure drawing API. Seems to work well enough, disregarding my horrible 3AM example PNG. ;P

Browse source
This commit is contained in:
Veno Server 2009-08-31 02:24:35 -05:00
parent 18c87c2c16
commit c03bdafd3c
3 changed files with 62 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
img/test1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

31
js/texture.js Normal file
View file

@ -0,0 +1,31 @@
/* Franz.js - Client side color swatches (Texture library)
*
* @Author Ryan McGrath (http://twitter.com/ryanmcgrath)
* @Author Dominick Pham (http://twitter.com/enotionz)
*/
var texture = {
/* Temporary, might be consolidated into main library down the road */
ctx: {},
canvas: {},
/* texture.draw()
*
* @Param: drawingCanvas - id of the canvas to draw on
* @Param: baseImage - base image to use (generally a semi-transparent PNG)
* @Param: colorArray - array of colors to use in the texture (Right now, this only accepts two colors, primary and secondary)
*/
draw: function(drawingCanvas, baseImage, colorArray) {
texture.canvas = document.getElementById(drawingCanvas);
texture.ctx = texture.canvas.getContext('2d');
var img = new Image();
img.onload = function() {
texture.ctx.fillStyle = colorArray[0];
texture.ctx.fillRect(0, 0, 50, 50);
texture.ctx.drawImage(img, 0, 0, 50, 50);
}
img.src = baseImage;
}
}

31
texture.php Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Franz - client side color palettes from logos</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/example.css">
<script type="text/javascript" src="js/texture.js"></script>
</head>
<body>
<h1>Franz - client side color swatches (Texture testing)</h1>
<div id="container_top">
<canvas id="lol" width="50" height="50" style="-moz-border-radius: 0px;"></canvas>
<!-- Horrible 2AM testing below, shutup -->
<a href="#" title="Draw Texture" onclick="texture.draw('lol', 'img/test1.png', ['#333333', '#c9c9c9']); return false;" style="display: block; padding: 5px 5px 2px; position: absolute; top: 47%; right: 10%; background-color: #13905d; -moz-border-radius: 4px; color: #fff;">Draw Texture</a>
</div>
<p id="footer">
This experiment was brought to you in Technicolor (get it?) by <a href="http://twitter.com/ryanmcgrath" title="Ryan McGrath">Ryan McGrath</a> & <a href="http://twitter.com/enotionz" title="Dominick Pham">Dominick Pham</a>,
two of the most awesome people you'll ever hear about. If you're interested in helping out,
hit up Franz on <a href="http://github.com/ryanmcgrath/franz/tree/master" title="Franz on GitHub">GitHub</a>!
<br><br>
Brought to you (in part) by <a href="http://webs.com/" title="Webs.com - get a free website!">Webs.com</a>, the company that employs Ryan and Dominick, and graciously
lets them experiment like this at work.
</p>
</body>
</html>