Skip to content

Commit

Permalink
I am commited to commiting this commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
ZXMushroom63 committed Jun 11, 2023
1 parent 478b186 commit 9e85436
Show file tree
Hide file tree
Showing 28 changed files with 1,358 additions and 124 deletions.
121 changes: 111 additions & 10 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
:root {
color-scheme: light only;
touch-action: manipulation !important;
}

body, html {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -92,7 +97,7 @@ body, html {
background-color: grey;
}

.header {
.node .header {
user-select: none;
display: block;
border-radius: 0.5rem;
Expand All @@ -101,6 +106,7 @@ body, html {
right: 0;
text-align: center;
height: 2rem;
line-height: 2rem;
font-size: 1.5rem;
color: white;
cursor: grab;
Expand All @@ -110,6 +116,56 @@ body, html {
margin-bottom: 1rem;
}

#renderOutput {
position: fixed;
top: 0;
left: 0;
z-index: 102;
background-color: rgb(60, 60, 60);
border-radius: 0.5rem;
max-width: 16rem;
max-height: 16rem;
overflow: scroll;
box-shadow: 0rem 0rem 0.4rem rgba(255, 255, 255, 0.5);
}

#renderOutput .header button {
cursor: pointer;
outline: 0;
border: 0;
background-color: rgb(80, 80, 80);
border-radius: 0.2rem;
border: 2px solid black;
color: white;
text-align: center;
padding: 0.2rem 0.4rem;
margin: 0.1rem;
margin-left: 0.3rem;
}

#renderOutput .header {
padding: 0.2rem;
user-select: none;
display: block;
border-radius: 0.5rem;
top: 0;
left: 0;
right: 0;
text-align: center;
height: 2rem;
font-size: 1.5rem;
color: white;
cursor: grab;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
background-color: rgb(40, 40, 40);
}

#renderOutput[grabbing] .header {
cursor: grabbing;
}

.node[grabbing]>.header {
cursor: grabbing;
}
Expand All @@ -128,6 +184,7 @@ body, html {
background-color: lightgrey;
cursor: text;
font-size: 1.5rem;
white-space: nowrap;
}

.inputField {
Expand Down Expand Up @@ -251,15 +308,6 @@ body, html {
padding-left: 2rem;
}

#rentex {
position: fixed;
z-index: 10;
top: 0;
left: 0;
pointer-events: none;
opacity: 0.7;
}

#modeSelect {
border-radius: 0.2rem;
color: white;
Expand Down Expand Up @@ -299,3 +347,56 @@ body, html {
user-select: none;
cursor: pointer;
}

#trashbin {
position: fixed;
left: 0;
bottom: 0;
z-index: 5;
width: 3.5rem;
opacity: 0.5;
margin: 0.5rem;
transition: 0.3s;
}

#trashbin:hover {
width: 4rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
outline: 0 !important;
}

#suggestions {
position: fixed;
z-index: 300;
display: none;
background-color: lightgray;
border-radius: 0.5rem;
max-height: 10rem;
overflow-y: scroll;
overflow-x: hidden;
transition: 0.1s;
}

#suggestions div {
padding: 0.5rem;
border-bottom: 1px solid grey;
cursor: pointer;
}

#suggestions[visible] {
display: block;
}

#rentex {
margin: auto 0;
}
51 changes: 39 additions & 12 deletions flow.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,26 @@
<title>Flow</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" type="image/x-icon" href="res/favicon.png" />
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.json" />
<meta name="color-scheme" content="light only" />
<meta charset="UTF-8" />
</head>
<body>
<div id="toolbar">
<table>
<tr>
<td>
<span style="padding-right: 4rem;">Flow</span>
<span style="padding-right: 4rem">Flow</span>
</td>
<td>
<div
class="btn"
role="button"
style="width: 1.5rem"
onclick="displayDocumentation()"
>
?
</div>
</td>
<td>
<div class="btn" role="button" onclick="clearProject()">Clear</div>
Expand Down Expand Up @@ -39,6 +50,10 @@
<td>
<div id="run" role="button" onclick="dispOutput()">Run ></div>
</td>

<td>
<div class="btn" id="playsp" onclick="togglePlay(this)">Play</div>
</td>
<td>
<div
id="render"
Expand Down Expand Up @@ -68,14 +83,12 @@
</td>
<td id="mode">
<label>Mode: </label>
<select id="modeSelect" onchange="rModeUpdate(this.value)">
<option default value="number">Number</option>
<option value="rentex">2D RenTex</option>
</select>
<select id="modeSelect" onchange="modeUpdate(this.value)"></select>
</td>
</tr>
</table>
</div>
<div id="suggestions"></div>
<div id="canvas"></div>
<svg
id="linkCanvas"
Expand All @@ -87,33 +100,47 @@
></svg>
<table id="zoomBtns">
<tr>
<td><div onclick="zoomIn()">+</div></td>
<td><div style="cursor: zoom-in" onclick="zoomIn()">+</div></td>
</tr>
<tr>
<td><div onclick="zoomOut()">-</div></td>
<td><div style="cursor: zoom-out" onclick="zoomOut()">-</div></td>
</tr>
</table>
<canvas class="hidden" id="rentex" width="300" height="300"
>Your browser sucks!</canvas
>
<div id="renderOutput" class="hidden">
<span class="header"
>Render
<button
onclick="this.parentElement.parentElement.classList.add('hidden')"
>
X
</button></span
>
<canvas id="rentex" width="300" height="300">Your browser sucks!</canvas>
</div>
<image id="trashbin" src="res/rodbin.svg"></image>
<script>
window.onerror = (err) => {
alert("An error occurred. Check the console for details.");
};
Math.tan;
</script>
<script src="scripts/sfx.js"></script>
<script src="scripts/termsAndConditions.js"></script>
<script src="libs/noise.js"></script>
<script src="libs/worley.js"></script>
<script src="libs/soundplayer.js"></script>
<script src="scripts/dragElem.js"></script>
<script src="scripts/bLink.js"></script>
<script src="scripts/documentation.js"></script>
<script src="scripts/node.js"></script>
<script src="scripts/math.js"></script>
<script src="scripts/classes.js"></script>
<script src="scripts/modes.js"></script>
<script src="scripts/zoom.js"></script>
<script src="scripts/autoEval.js"></script>
<script src="scripts/rentex.js"></script>
<script src="scripts/soundwave.js"></script>
<script src="scripts/noiseClasses.js"></script>
<script src="scripts/serialise.js"></script>
<script src="scripts/suggestions.js"></script>
</body>
</html>
93 changes: 93 additions & 0 deletions libs/soundplayer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// Original JavaScript code by Chirp Internet: www.chirpinternet.eu
// Please acknowledge use of this code by including this header.

function SoundPlayer(audioContext, filterNode) {
this.audioCtx = audioContext;
this.gainNode = this.audioCtx.createGain();

if (filterNode) {
// run output through extra filter (already connected to audioContext)
this.gainNode.connect(filterNode);
} else {
this.gainNode.connect(this.audioCtx.destination);
}

this.oscillator = this.audioCtx.createOscillator();
}

SoundPlayer.prototype.setFrequency = function (val, when) {
//Frequency in Hz
if (this.oscillator !== null) {
if (when) {
this.oscillator.frequency.setValueAtTime(
val,
this.audioCtx.currentTime + when
);
} else {
this.oscillator.frequency.setValueAtTime(val, this.audioCtx.currentTime);
}
}
return this;
};

SoundPlayer.prototype.setVolume = function (val, when) {
//Gain?
//min: -3.4028235e38
//max: 3.4028235e38
if (when) {
this.gainNode.gain.exponentialRampToValueAtTime(
val,
this.audioCtx.currentTime + when
);
} else {
this.gainNode.gain.setValueAtTime(val, this.audioCtx.currentTime);
}
return this;
};

SoundPlayer.prototype.setWaveType = function (waveType) {
//sine, square, sawtooth or triangle
this.oscillator.type = waveType;
return this;
};

SoundPlayer.prototype.play = function (freq, vol, wave, when) {
this.oscillator = this.audioCtx.createOscillator();
this.oscillator.connect(this.gainNode);
this.setFrequency(freq);
if (wave) {
this.setWaveType(wave);
}
this.setVolume(1 / 1000);

if (when) {
this.setVolume(1 / 1000, when - 0.02);
this.oscillator.start(when - 0.02);
this.setVolume(vol, when);
} else {
this.oscillator.start();
this.setVolume(vol, 0.02);
}

return this;
};

SoundPlayer.prototype.stop = function (when) {
if (when) {
this.gainNode.gain.setTargetAtTime(
1 / 1000,
this.audioCtx.currentTime + when - 0.05,
0.02
);
this.oscillator.stop(this.audioCtx.currentTime + when);
} else {
this.gainNode.gain.setTargetAtTime(
1 / 1000,
this.audioCtx.currentTime,
0.02
);
this.oscillator.stop(this.audioCtx.currentTime + 0.05);
}
return this;
};
4 changes: 2 additions & 2 deletions manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
"sizes": "300x300"
}
],
"start_url": "",
"start_url": "/",
"background_color": "#000000",
"display": "standalone",
"scope": "",
"scope": "/",
"theme_color": "#000000",
"description": "Visual math in the web."
}
Loading

0 comments on commit 9e85436

Please sign in to comment.