Skip to content

Instantly share code, notes, and snippets.

@donomans

donomans/texture.html

Created September 14, 2012 20:48
Show Gist options
  • Save donomans/3724712 to your computer and use it in GitHub Desktop.
Save donomans/3724712 to your computer and use it in GitHub Desktop.
Download ZIP
Creates a textured solid color swatch with Dart
Raw
texture.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Texture creator</title>
<link type="text/css" rel="stylesheet" href="sunflower.css">
</head>
<body>
<div id="container">
<canvas id="canvas" width="150" height="150" class="center"></canvas>
<p id="info" class="center"></p>
<br/>
<form class="center">
<input id="rslider" type="range" max="255" value="126"/>
<input id="gslider" type="range" max="255" value="126"/>
<input id="bslider" type="range" max="255" value="126"/>
</form>
</div>
<script type="application/dart">
#import('dart:html');
#import('dart:math', prefix: 'Math');
main() {
CanvasElement canvas = query("#canvas");
var context = canvas.context2d;
InputElement rslider = query("#rslider");
InputElement gslider = query("#gslider");
InputElement bslider = query("#bslider");
var ran = new Math.Random();
var r = Math.parseInt(rslider.value);
var g = Math.parseInt(gslider.value);
var b = Math.parseInt(bslider.value);
query("#info").innerHTML = "random variation on rgb($r,$g,$b)";
canvas.on.click.add((Event e) {
var r = Math.parseInt(rslider.value);
var g = Math.parseInt(gslider.value);
var b = Math.parseInt(bslider.value);
query("#info").innerHTML = "random variation on rgb($r,$g,$b)";
drawFrame(context, ran, r,g,b);
}, true);
drawFrame(context, ran, r, g, b);
}
void drawFrame(CanvasRenderingContext2D context, Math.Random ran, int r, int g, int b) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
for(var i = 0; i < context.canvas.width; i++){
for(var j = 0; j < context.canvas.height; j++){
context.beginPath();
var c = ran.nextInt(15);
var cr = r + c;
var cg = g + c;
var cb = b + c;
context.strokeStyle = "rgb($cr,$cg,$cb)";
context.strokeRect(i, j, 1, 1, 1);
context.fill();
context.closePath();
context.stroke();
}
}
}
</script>
<script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment