demolishedtexture
Version:
Procedual texture generator for Demolished or what ever you want.Renders base64 strings and/or binary.
160 lines (147 loc) • 5.12 kB
HTML
<html lang="en">
<head>
<title>demolishedTexture examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="styleheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<a href="https://github.com/MagnusThor/demolishedTexture">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"
alt="Fork me on GitHub">
</a>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="hero">
<h1 class="page-header">demolishedTexture - Example</h1>
<p>
Below you find two texture generated by demolishedTexture.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>Kaliset</h2>
<p>
kaliset texture
</p>
<pre>
<code>
(pixel, x, y, w, h) => {
var t = this,m = Math;
var kaliset = function(p){
var e=0, l=e;
for(var i = 0;i < 13;i++) {
var pl = l;
l = t.length(p);
var dot = t.dot(p,p);
p[0] = m.abs(p[0]) / dot -.5;
p[1] = m.abs(p[1]) / dot -.5;
p[2] = m.abs(p[2]) / dot -.5;
e += m.exp(-1/ m.abs(l-pl));
}
return e;
}
var k = kaliset([t.toScale(x),t.toScale(y),0]) *.18;
return [Math.abs((k*1.1)*255),Math.abs((k*k*1.3)*255),Math.abs((k*k*k)*255)];
}
</code>
</pre>
<div class="thumbnail text-center">
<img id="kaliset" class="img-fluid img-thumbnail" >
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>
Perlin noise texture
</h2>
<p>
Using built in Perlin noise generation
</p>
<pre>
<code>
(pixel, x, y, w, h) => {
x /= w; y /= h;
s = 10; n = this.noise(s * x, s * y, .8);
r = g = b = Math.round(255 * n);
return [r, g, b]; // always return array of r,g,b
}
</code>
</pre>
<div class="thumbnail text-center">
<img id="noise" class="img-fluid img-thumbnail">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>
Grass noise texture
</h2>
<p>
Some kind of green thing, not much of grass..
</p>
<pre>
<code>
(pixel, x, y, w, h) => {
x/=w;y/=h;sx=3;sy=44;
n=this.noise(sx*x,sy*y,.1);
x=(.2+Math.sin(3.14*x))/2;
y=(1+Math.sin(n*4*y))/2;
b=n*y*x*255; r = y*b;
g=y*255;
}
</code>
</pre>
<div class="thumbnail text-center">
<img id="grass" class="img-fluid img-thumbnail"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>Text elements using canvas-api</h2>
<p>
Use canvas javascript api's to render texture & images.
</p>
<pre>
<code>
(ctx, w, h) => {
ctx.save();
ctx.fillStyle = "#fff";
let dx = w / 2;
let dy = h / 2;
ctx.strokeStyle = "#fff";
ctx.lineWidth = 10;
var sx = Math.random() * 2;
var sy = Math.random() * 2;
ctx.translate(sx, sy);
ctx.strokeRect(20, 20, 512 - 40, 512 - 40);
ctx.stroke();
ctx.font = "120px 'Arial'";
ctx.fillText("SUPER", 40, 220, w);
ctx.font = "bold 154px 'Arial'";
ctx.fillText("SARA", 35, 370, w);
ctx.restore();
return ctx;
}
</code>
</pre>
<div class="thumbnail text-center">
<img id="textel" class="img-fluid img-thumbnail">
</div>
</div>
</div>
</div>
<!-- just for demo page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="/dist/example-bundle.js"></script>
</body>
</html>