PCBGG/original.html

283 lines
9 KiB
HTML
Raw Normal View History

2023-09-19 13:14:34 +00:00
<!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>