Skip to content

Minor edits #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlexStillAlex wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Minor edits #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9e044c8
Hide sliders
Aug 23, 2022
6374344
Hide slide
Aug 23, 2022
790766b
lets hope ive not broken it
Aug 24, 2022
72caa9b
ditto
Aug 24, 2022
4dce836
Texture wrapping changes
Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 17 additions & 39 deletions grayscott/grayscott.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,30 +97,8 @@ var presets = [

//||Function to take text input||

function getVal() {
const val = document.querySelector('input').value;
return val
}
////////////////////////////////////////////////////////////


// ||Function to convert userinput function into the shader stuff||
function functoshader(){
var fstr = document.getElementById('F').value; // String of user input from f(x,y)
var gstr = document.getElementById('G').value; // String of user input from g(x,y)

// Changes instances of x,y to uv.r,uv.g for use in shader language for f(x,y). This is spaghetti
var fstr1 = fstr.replace(/x/g, "uv.r");
var FSTR = fstr1.replace(/y/g, "uv.g");

var gstr1 = gstr.replace(/x/g, "uv.r");
var GSTR = gstr1.replace(/y/g, "uv.g");

return [FSTR,GSTR]

}
////////////////////////////////////////////////////////////////

// Configuration.
var feed = presets[0].feed;
var kill = presets[0].kill;
Expand All @@ -141,8 +119,7 @@ init = function() //

mScene = new THREE.Scene();
mCamera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, -10000, 10000);
mCamera.position.z = 100;

mCamera.position.z = 100;
mScene.add(mCamera);

mUniforms = {
Expand Down Expand Up @@ -188,7 +165,7 @@ init = function() //
//THIS IS HOW THE INITIAL RENDER BEGINS
render(0);
//This is the initial 'spot location' in (x,y)
mUniforms.brush.value = new THREE.Vector2(0.25, 0.25);
mUniforms.brush.value = new THREE.Vector2(0.5, 0.5);
mLastTime = new Date().getTime();
requestAnimationFrame(render);
}
Expand All @@ -204,7 +181,7 @@ var resize = function(width, height)
canvasHeight = canvasQ.height();

mRenderer.setSize(canvasWidth, canvasHeight);

//############################################################## Wrapping I guess???
// TODO: Possible memory leak?
mTexture1 = new THREE.WebGLRenderTarget(canvasWidth/2, canvasHeight/2,
{minFilter: THREE.LinearFilter,
Expand All @@ -216,11 +193,12 @@ var resize = function(width, height)
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType});
/////////////////////////////////////////////NEW
mTexture1.wrapS = THREE.RepeatWrapping;
mTexture1.wrapT = THREE.RepeatWrapping;
mTexture2.wrapS = THREE.RepeatWrapping;
mTexture2.wrapT = THREE.RepeatWrapping;

/////////////////////////////////
mUniforms.screenWidth.value = canvasWidth/2;
mUniforms.screenHeight.value = canvasHeight/2;
}
Expand Down Expand Up @@ -412,18 +390,18 @@ var worldToForm = function()
// Adjusts the sliders and such
var init_controls = function()
{
$("#sld_replenishment").slider({
value: feed, min: 0, max:0.1, step:0.001,
change: function(event, ui) {$("#replenishment").html(ui.value); feed = ui.value; updateShareString();},
slide: function(event, ui) {$("#replenishment").html(ui.value); feed = ui.value; updateShareString();}
});
$("#sld_replenishment").slider("value", feed);
$("#sld_diminishment").slider({
value: kill, min: 0, max:0.073, step:0.001,
change: function(event, ui) {$("#diminishment").html(ui.value); kill = ui.value; updateShareString();},
slide: function(event, ui) {$("#diminishment").html(ui.value); kill = ui.value; updateShareString();}
});
$("#sld_diminishment").slider("value", kill);
// $("#sld_replenishment").slider({
// value: feed, min: 0, max:0.1, step:0.001,
// change: function(event, ui) {$("#replenishment").html(ui.value); feed = ui.value; updateShareString();},
// slide: function(event, ui) {$("#replenishment").html(ui.value); feed = ui.value; updateShareString();}
// });
// $("#sld_replenishment").slider("value", feed);
// $("#sld_diminishment").slider({
// value: kill, min: 0, max:0.073, step:0.001,
// change: function(event, ui) {$("#diminishment").html(ui.value); kill = ui.value; updateShareString();},
// slide: function(event, ui) {$("#diminishment").html(ui.value); kill = ui.value; updateShareString();}
// });
// $("#sld_diminishment").slider("value", kill);

$('#share').keypress(function (e) {
if (e.which == 13) {
Expand Down
55 changes: 16 additions & 39 deletions grayscott/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,13 @@
<link rel="stylesheet" type="text/css" href="../css/experiments.css"/>
<link rel="stylesheet" type="text/css" href="../gradientui/gradientui.css"/>
<link type="text/css" href="../3rd/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />

<!--||I'd read the documentation for 3.js rather than try this code||-->
<script type="text/javascript" src="../3rd/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../3rd/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../3rd/colorPicker.js"></script>
<script type="text/javascript" src="../3rd/three.min.js"></script>
<script type="text/javascript" src="../gradientui/gradientui.js"></script>
<script>
</script>


<script type = "text/javascript" src ="../grayscott/grayscott.js"> </script>
<script type="text/javascript" src="../3rd/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../3rd/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../3rd/colorPicker.js"></script>
<script type="text/javascript" src="../3rd/three.min.js"></script>
<script type="text/javascript" src="../gradientui/gradientui.js"></script>
<!--script type="text/javascript" src="http://mrdoob.github.com/three.js/build/three.min.js"></script-->



<script type = "text/javascript" src ="../grayscott/grayscott.js"> </script>

<!-- ||This makes a shader that'll modify the vectors in the canvas.
Projection and modelView matrices are given by 3.js||-->
Expand Down Expand Up @@ -192,10 +183,10 @@

<body>
<header>
<h1>Whats the difference between a good joke and a bad joke timing</h1>
<h1>Reaction diffusion system (Gray-Scott model)</h1>
</header>
<div id="simulation">
<canvas id="myCanvas" class="viewer" style="width:1024px;height:652px"></canvas> <!-- || originally 1024 x 512-->
<canvas id="myCanvas" class="viewer" style="width:1024px;height:512px"></canvas>
<aside class="panel">
<section id="instructions">
<header><h4>Instructions</h4></header>
Expand Down Expand Up @@ -248,15 +239,15 @@ <h4 class="unsafe">Advanced settings</h4>
<!-- //////////////////////////////////////////// -->
<br><br>
<label for="name">g(x,y) = </label>
<input id = 'G' type="text" value="x*y*y - 0.043*y" onblur="getVal()" src = "grayscott.js">
<input id = 'G' type="text" value="x*y*y - 0.097*y" onblur="getVal()" src = "grayscott.js">

<script type = "text/javascript" id = "stringscript">
function stringscript(){

var fFunc = functoshader()[0];
var gFunc = functoshader()[1];
// The script that we want to inject into the new body
// This is currently a test to see if it changes to the solitons preset.
// The script that we want to inject into the new body

var script = `
varying vec2 vUv;
uniform float screenWidth;
Expand Down Expand Up @@ -296,10 +287,9 @@ <h4 class="unsafe">Advanced settings</h4>
vec2 lapl = (uv0 + uv1 + uv2 + uv3 - 4.0*uv);//10485.76;

// ||Diffusion coefficients|| (And Forward Euler)||
float du = /*0.00002*/0.2097*lapl.r + ${fFunc}; // + - uv.r*uv.g*uv.g + 0.03*(1.0 - uv.r);


float du = /*0.00002*/0.2097*lapl.r + ${fFunc};
float dv = /*0.00001*/0.105*lapl.g + ${gFunc};

vec2 dst = uv + delta*vec2(du, dv);

if(brush.x > 0.0)
Expand All @@ -316,7 +306,7 @@ <h4 class="unsafe">Advanced settings</h4>

}
</script>
<!-- Two variants of scripts that will inject HTML -->

<script type = "text/javascript" id = "insertHTML">
function insertHTML(html, dest, append=false){
// if no append is requested, clear the target element
Expand All @@ -336,40 +326,27 @@ <h4 class="unsafe">Advanced settings</h4>
if( scripts[i].hasAttribute('src') ) script.src = scripts[i].src;
script.innerHTML = scripts[i].innerHTML;
document.head.appendChild(script);
//document.head.removeChild(script);
document.head.removeChild(script);
}
// done!
return true;
}

function HTMLinject(script,destinationID){
dest = document.getElementById(destinationID);

//
dest.innerHTML = script ;
return true;

}
</script>


<script>

//The block that does stuff upon reload.

//injects the script
function Change() {
insertHTML(stringscript(),document.getElementById('gsFragmentShader'))
//HTMLinject(stringscript(),'gsFragmentShader')
}

</script>

<input type = 'button' value = "GO! " onclick = "Change()" > <br>



<!-- || THESE FOLLOWING SCRIPTS SHOULD BE IN THE JS FILE BUT I'M THICK! || -->

<script>
function getVal(){
const val = document.querySelector('input').value;
Expand Down