283 lines
9 KiB
HTML
283 lines
9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script>
|
||
|
|
window.docalc = function () {
|
||
|
|
window.incHeight = parseInt(document.getElementById("incDist").value);
|
||
|
|
|
||
|
|
window.angle = Number(document.getElementById("angle").value) / 100;
|
||
|
|
window.incColor = parseInt(document.getElementById("incCol").value);
|
||
|
|
window.startColor = Number(document.getElementById("startCol").value);
|
||
|
|
window.loops = parseInt(document.getElementById("loops").value);
|
||
|
|
window.redMult = Number(document.getElementById("redMult").value);
|
||
|
|
window.greenMult = Number(document.getElementById("greenMult").value);
|
||
|
|
window.blueMult = Number(document.getElementById("blueMult").value);
|
||
|
|
|
||
|
|
window.redShift = Number(document.getElementById("redShift").value);
|
||
|
|
window.greenShift = Number(document.getElementById("greenShift").value);
|
||
|
|
window.blueShift = Number(document.getElementById("blueShift").value);
|
||
|
|
|
||
|
|
window.sinOn = Number(document.getElementById("sinOn").value);
|
||
|
|
window.redAmp = Number(document.getElementById("redAmp").value);
|
||
|
|
window.greenAmp = Number(document.getElementById("greenAmp").value);
|
||
|
|
window.blueAmp = Number(document.getElementById("blueAmp").value);
|
||
|
|
|
||
|
|
window.redFreq = Number(document.getElementById("redFreq").value);
|
||
|
|
window.greenFreq = Number(document.getElementById("greenFreq").value);
|
||
|
|
window.blueFreq = Number(document.getElementById("blueFreq").value);
|
||
|
|
|
||
|
|
createImage();
|
||
|
|
context.putImageData(imagedata, 0, 0);
|
||
|
|
};
|
||
|
|
|
||
|
|
// The function gets called when the window is fully loaded
|
||
|
|
window.onload = function () {
|
||
|
|
var canvas = document.getElementById("viewport");
|
||
|
|
window.context = canvas.getContext("2d");
|
||
|
|
|
||
|
|
var width = canvas.width;
|
||
|
|
var height = canvas.height;
|
||
|
|
|
||
|
|
window.imagedata = context.createImageData(width, height);
|
||
|
|
|
||
|
|
var shift = height;
|
||
|
|
|
||
|
|
window.createImage = function () {
|
||
|
|
// Loop over all of the pixels
|
||
|
|
|
||
|
|
var tempHeight = 0;
|
||
|
|
var mode = "up";
|
||
|
|
for (var x = 0; x < width; x++) {
|
||
|
|
for (var y = 0; y < height; y++) {
|
||
|
|
// Get the pixel index
|
||
|
|
var pixelindex = (y * width + x) * 4;
|
||
|
|
var blue = 0;
|
||
|
|
var red = 0;
|
||
|
|
var green = 0;
|
||
|
|
var tempColor = startColor;
|
||
|
|
|
||
|
|
var tempHeight = 0;
|
||
|
|
for (i = 0; i < loops; i++) {
|
||
|
|
if (redMult != 0) {
|
||
|
|
let temp1 = y;
|
||
|
|
|
||
|
|
temp1 = temp1 * angle;
|
||
|
|
if (sinOn) {
|
||
|
|
temp1 = temp1 + Math.sin(y / redFreq) * redAmp;
|
||
|
|
}
|
||
|
|
|
||
|
|
temp1 = temp1 + tempHeight;
|
||
|
|
temp1 = temp1 - shift;
|
||
|
|
temp1 = temp1 - redShift;
|
||
|
|
|
||
|
|
if (temp1 <= x) {
|
||
|
|
red = tempColor / redMult;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (greenMult != 0) {
|
||
|
|
let temp1 = y;
|
||
|
|
temp1 = temp1 * angle;
|
||
|
|
if (sinOn) {
|
||
|
|
temp1 = temp1 + Math.sin(y / greenFreq) * greenAmp;
|
||
|
|
}
|
||
|
|
|
||
|
|
temp1 = temp1 + tempHeight;
|
||
|
|
temp1 = temp1 - shift;
|
||
|
|
temp1 = temp1 - greenShift;
|
||
|
|
|
||
|
|
if (temp1 <= x) {
|
||
|
|
green = tempColor / greenMult;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (blueMult != 0) {
|
||
|
|
let temp1 = y;
|
||
|
|
temp1 = temp1 * angle;
|
||
|
|
if (sinOn) {
|
||
|
|
temp1 = temp1 + Math.sin(y / blueFreq) * blueAmp;
|
||
|
|
}
|
||
|
|
|
||
|
|
temp1 = temp1 + tempHeight;
|
||
|
|
temp1 = temp1 - shift;
|
||
|
|
temp1 = temp1 - blueShift;
|
||
|
|
|
||
|
|
if (temp1 <= x) {
|
||
|
|
blue = tempColor / blueMult;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// if (y+Math.sin(y/40)*50+tempHeight-shift-blueShift <= x){
|
||
|
|
//
|
||
|
|
// if (blueMult != 0){
|
||
|
|
// blue = tempColor/blueMult;
|
||
|
|
//
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// if (y+Math.sin(y/40)*50*angle+tempHeight-shift-redShift <= x){
|
||
|
|
// if (redMult != 0){
|
||
|
|
// red = tempColor/redMult;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// if (y+Math.sin(y/40)*50*angle+tempHeight-shift-greenShift <= x){
|
||
|
|
// if (greenMult != 0){
|
||
|
|
// green = tempColor/greenMult;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
tempHeight = tempHeight + incHeight;
|
||
|
|
tempColor = tempColor + incColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
imagedata.data[pixelindex + 2] = blue; // Blue
|
||
|
|
imagedata.data[pixelindex + 1] = green; // Green
|
||
|
|
imagedata.data[pixelindex] = red; // Red
|
||
|
|
imagedata.data[pixelindex + 3] = 255; // Alpha
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
p {
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #2c2f33;
|
||
|
|
color: #99aab5;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-size: 1em !important;
|
||
|
|
color: #ffffff !important;
|
||
|
|
font-family: Arial !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="text"],
|
||
|
|
select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px 20px;
|
||
|
|
margin: 8px 0;
|
||
|
|
display: inline-block;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
background-color: #23272a;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="number"],
|
||
|
|
select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px 20px;
|
||
|
|
margin: 3px 0;
|
||
|
|
display: inline-block;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
background-color: #23272a;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="number"]::-webkit-inner-spin-button {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="button"] {
|
||
|
|
width: 100%;
|
||
|
|
background-color: #4caf50;
|
||
|
|
color: white;
|
||
|
|
padding: 14px 20px;
|
||
|
|
margin: 8px 0;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="submit"]:hover {
|
||
|
|
background-color: #45a040;
|
||
|
|
}
|
||
|
|
|
||
|
|
.canvasDiv {
|
||
|
|
border: 4px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
width: 1000px;
|
||
|
|
height: 1000px;
|
||
|
|
float: left;
|
||
|
|
display: inline;
|
||
|
|
margin-right: 1%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inputDiv {
|
||
|
|
float: left;
|
||
|
|
background: #2d3034;
|
||
|
|
display: inline;
|
||
|
|
border: 4px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 10px 0.5% 10px 0.5%;
|
||
|
|
width: 20%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="canvasDiv">
|
||
|
|
<canvas id="viewport" width="1000" height="1000"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inputDiv">
|
||
|
|
<form action="" method="post" name="input1">
|
||
|
|
<br />
|
||
|
|
<h3>Distance Between Layers & Layer Angle</h3>
|
||
|
|
<input type="number" id="incDist" value="166" max="1000" min="1" />
|
||
|
|
|
||
|
|
<input type="number" id="angle" value="100" min="-100" max="100" />
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<h3>Layer Color Increment & Starting Color</h3>
|
||
|
|
<input type="number" id="incCol" value="8" max="255" min="-255" />
|
||
|
|
<input type="number" id="startCol" value="100" max="255" min="0" />
|
||
|
|
<br />
|
||
|
|
<h3>Loops</h3>
|
||
|
|
<input type="number" id="loops" value="20" max="1000" min="1" />
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<h3>Red, Green, & Blue Color Devisors & Shifts</h3>
|
||
|
|
<input type="number" id="redMult" value="0" />
|
||
|
|
<input type="number" id="greenMult" value="0" />
|
||
|
|
<input type="number" id="blueMult" value="1" />
|
||
|
|
<h3>Shifts</h3>
|
||
|
|
<input type="number" id="redShift" value="0" />
|
||
|
|
<input type="number" id="greenShift" value="0" />
|
||
|
|
<input type="number" id="blueShift" value="0" />
|
||
|
|
<input type="button" value="Generate" onclick="docalc();" autofocus />
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="inputDiv">
|
||
|
|
<form action="" method="post" name="input1">
|
||
|
|
<br />
|
||
|
|
<h3>Sine Enabled</h3>
|
||
|
|
<input type="number" id="sinOn" value="0" max="1" min="0" />
|
||
|
|
<br />
|
||
|
|
<h3>Sine Amplitude Multiplier</h3>
|
||
|
|
<input type="number" id="redAmp" value="50" max="1000" min="1" />
|
||
|
|
<input type="number" id="greenAmp" value="50" max="1000" min="1" />
|
||
|
|
<input type="number" id="blueAmp" value="50" max="1000" min="1" />
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<h3>Sine Frequency Multiplier</h3>
|
||
|
|
<input type="number" id="redFreq" value="40" min="1" max="1000" />
|
||
|
|
<input type="number" id="greenFreq" value="40" min="1" max="1000" />
|
||
|
|
<input type="number" id="blueFreq" value="40" min="1" max="1000" />
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|