demolishedtexture
Version:
Procedual texture generator for Demolished or what ever you want.Renders base64 strings and/or binary.
149 lines (114 loc) • 5.68 kB
HTML
<html>
<head>
<title>demolishedTexture editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://esironal.github.io/cmtouch/lib/codemirror.css">
<link rel="stylesheet" href="https://esironal.github.io/cmtouch/addon/hint/show-hint.css">
<script src="https://esironal.github.io/cmtouch/lib/codemirror.js"></script>
<script src="https://esironal.github.io/cmtouch/addon/hint/show-hint.js"></script>
<script src="https://esironal.github.io/cmtouch/addon/hint/xml-hint.js"></script>
<script src="https://esironal.github.io/cmtouch/addon/hint/html-hint.js"></script>
<script src="https://esironal.github.io/cmtouch/mode/xml/xml.js"></script>
<script src="https://esironal.github.io/cmtouch/mode/javascript/javascript.js"></script>
<script src="https://esironal.github.io/cmtouch/mode/css/css.js"></script>
<script src="https://esironal.github.io/cmtouch/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://esironal.github.io/cmtouch/addon/selection/active-line.js"></script>
<script src="https://esironal.github.io/cmtouch/addon/edit/matchbrackets.js"></script>
<link rel="stylesheet" href="https://esironal.github.io/cmtouch/theme/neonsyntax.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
</style>
</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 my-5">
<div class="row">
<div class="col-md-8">
<h1>
demolishedTexture edit 0.1</h1>
<p>
Your texture's rendered size is <span id="size" class="badge badge-secondary">0</span>.
source + generator (demolisedTexture.js) size i aprox
<span id="size-gen" class="badge badge-secondary">0</span>
</p>
</div>
<div class="col-md-4">
<div class="form-inline my-5">
<select id="sel-context" name="sel-context" class="form-control">
<option selected value="GeneratorPixel">Pixel rendering</option>
<option value="Generator2D">Canvas2D rendering</option>
</select>
<select id="texture-size" class="form-control">
<option value="256">256</option>
<option selected value="512">512</option>
<option value="1024">1024</option>
<option value="2048">2048</option>
<option value="4096">4096</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<label fo="texture-editor">Code</label>
<textarea id="texture-editor" name="texture-editor">
var t = this; var m = Math;
var a = function(a,b){
return m.abs((a * b) * 255);
}
var s = 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 = t.func(p, function (v) {
return m.abs(v) / dot - .5;
});
e += m.exp(-1 / m.abs(l - pl));
}
return e;
};
var k = s(v) * .18;
return [a(k , 1.1), a(k * k, 1.3), a(k * k * k,1.)];
</textarea>
<div class="alert alert-info my-5">
<strong>Pixel rendering</strong>
(pixel:Array,x:number,y:number,w:number,h:number,v:Array):Array =>
</div>
<div class="alert alert-info my-5">
<strong>Canvas2D rendering</strong>
(ctx:CanvasRenderingContext2D,w:number,h:number):Array =>
</div>
</div>
<div class="col-md-4">
<label fo="texture-editor">Result</label>
<div class="py-0">
<img src="https://placehold.it/512x512" class="result" width="512" height="512">
</div>
<div class="my-3">
<button id="btn-export" class="btn btn-primary btn-large">Save as image</button>
<a href="#" class="d-none btn btn-link" id="download" download="result.png">N/A</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="error">
<pre>
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.2/lib/codemirror.min.js">
</script>
<script src="../dist/editor-bundle.js"></script>
</body>
</html>