Trying to add JS rain effect into project

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: version 2.2.3
Story Format: Harlowe

Hello!

I have a JS file that produces a pixelated rainfall, and I’m trying to incorporate it into my project.

  • The rain effect has the following variables
    • var numraindrops="#";
    • var speed="#";
    • var rainsize="#";
    • var wind=“left/right”;

I’m looking to import the JS file, and be able to control the variables, and call upon the effect.
Unfortunately, I’m not super keen with Javascript functions. Dabbled in it for an hour and couldn’t get things to function. (pun)

How would one go about importing, and controlling a JS effect?

We would need to know more about the JavaScript within that file, a link to where you obtained the file would help. Otherwise copy-n-pasting the contents of the file into a comment, making sure you wrap that JavaScript code within a code-block using the Preformatted Text option that can be found within the toolbar.

warning: Harlowe has been deliberately designed to restrict the usage of JavaScript to access the engine’s internals.

Here is the file. DS_Rain.js

I encountered it years ago. I dont think the creators own their website anymore.

 var DtD=parseInt(numraindrops);  var p2X=parseInt(rainsize);  var GF_=parseInt(speed); var QQs;if(wind=="left")QQs=-GF_;  else if(wind=="no")QQs=0;  else if(wind=="right")QQs=GF_; GF_<<=2;p2X<<=2; var Gls=regkey; var h26=0; var Kmo=new Array(); var rB5=new Array(); var ZxJ=new Array(); var b4x=new Array(); var eMX=new Array(); var TWc; var IBK; var n__=new Array("555555","888888","666666","999999","777777","aaaaaa");if(author!="www.dseffects.com")alert("Please don't remove\r\nvar author=\"www.dseffects.com\";");  var PWa; var NuB; var ukO; var OqN; var Qkw; var JbM; var wc3; var tZC; var TGL; var jLZ; var Ook; var Ab5=150; var or5=Ab5+8; var Mg6=1; var k3V=0; var My0=0; var Y18=(document.layers)?1:0;  var F5g=(document.all)?1:0;  var ksq=(document.getElementById&&!document.all);  var oNV=(F5g)?window.document.body.clientWidth:window.innerWidth;  var ZDT=(F5g)?window.document.body.clientHeight:window.innerHeight;  var Pmq=(F5g)?window.document.body.scrollLeft:window.pageXOffset;  var mjD=(F5g)?window.document.body.scrollTop:window.pageYOffset; var RM4='k66b'; var cl_=RM4.split(''); var cn4='c5-a'; var rfv=cn4.split(''); var MPw=':/'+'/'; var xKs='r-crrc'; var ErJ=xKs.split(''); var a_f=k3V; var ll8='eeesf23hh3r62sray'; var hEv=ll8.split(''); var yEA='r5-b6'; var Li0=yEA.split(''); var _AM='v7'; var iiH='9fg7hjklz6xc.v8bn1m0'; var Hx4=_AM.split(''); var NaO='q2se4rtyu3i5opa-wd'+iiH; var ruv=NaO.split(''); var lzh=''; var iyH='ible'; var gm6='abcdefghijklmnopqrstuvwxyz'; var mxn='ank'; var FpP=Gls.length; var K2o='0123456789-.'; var B1q=Gls.split(''); var xIz='den'; var qjj=K2o+gm6; var EPe=qjj.split(''); var BZA='hid'; var YzD='bl'; var rwp='vis'; var A7Y=''; var DRY=location.host; var Qi2=DRY.toLowerCase(); var uSU=Qi2.split(''); var PwZ='ow'; var yQ4='e'; var AYh='sh';for(My0=0;My0<5;My0++)lzh+=ruv[qjj.indexOf(Li0[My0])]; Ook='S'+lzh;lzh='';for(My0=0;My0<17;My0++)lzh+=ruv[qjj.indexOf(hEv[My0])]; JbM=lzh;TGL='_'+YzD+mxn;lzh=' ';for(My0=0;My0<2;My0++)lzh+=ruv[qjj.indexOf(Hx4[My0])]; Ook+=lzh;lzh=' D';for(My0=0;My0<4;My0++)lzh+=ruv[qjj.indexOf(rfv[My0])];Ook+=lzh;lzh=' S';for(My0=0;My0<6;My0++)lzh+=ruv[qjj.indexOf(ErJ[My0])]; Ook+=lzh;lzh='';for(My0=0;My0<4;My0++)lzh+=ruv[qjj.indexOf(cl_[My0])]; wc3=lzh;lzh='';for(My0=2;My0<FpP-2;My0++)lzh+=ruv[qjj.indexOf(B1q[My0])]; if(uSU.length>4)if(uSU[0]!='w'&&uSU[3]!='.'&&uSU[2]!='w'&&uSU[1]!='w')A7Y='www.'+DRY; else A7Y=DRY;tZC=wc3+MPw+JbM;PWa=AYh+PwZ;NuB=BZA+xIz;if(A7Y==lzh)a_f=Mg6;if(ruv[FpP>>1]!=B1q[0]||ruv[FpP]!=B1q[1]||ruv[FpP]!=B1q[FpP-2]||ruv[FpP>>2]!=B1q[FpP-1])a_f=k3V;ukO=BZA+yQ4;OqN=rwp+iyH; document.write('<style>td.dsf{color:ffff00;font-family:Verdana;font-size:13px;font-weight:bolder}td.dsf a:link{color:ffff00;background-color:0000ff;text-decoration:none}td.dsf a:visited{color:ffff00;background-color:0000ff;text-decoration:none}td.dsf a:hover{color:ffffff;background-color:0000ff;text-decoration:none}</style><div id="dsC"style="position:absolute;top:0px;left:0px;width:0px;height:0px;visibility:hide;visibility:hidden;z-Index:1000;"align="center"><table border="1"bordercolor="#000000"cellpadding="1" cellspacing="0" bgcolor="#0000ff"><td class="dsf"align="center"><a href=\''+tZC+'\'target=\''+TGL+'\'>'+JbM+'</a></td></table></div>'); function NL8(){window.status =Ook; return true;}if(JbM.charAt(4)!='d')a_f=k3V; function SK_(){window.status =''; return true;} function NcH(){;if(a_f==k3V){if(Y18){jLZ=document.dsC; jLZ.visibility=ukO;jLZ.top=(mjD+8);jLZ.left=(oNV+Pmq-or5);jLZ.visibility=PWa;jLZ.onmouseover=NL8;jLZ.onmouseout=SK_;} else if(ksq){jLZ=document.getElementById("dsC"); jLZ.style.top=mjD+8;jLZ.style.left=(oNV+Pmq-or5-8);jLZ.style.visibility=OqN;jLZ.onmouseover=NL8;jLZ.onmouseout=SK_;} else if(F5g){jLZ=document.all.dsC; jLZ.style.top=mjD+8;jLZ.style.left=(oNV+Pmq-or5);jLZ.style.visibility=OqN;jLZ.onmouseover=NL8;jLZ.onmouseout=SK_;}}}if(Y18){for(My0=0;My0<DtD;My0++){IBK=n__[My0%6];TWc=Math.round(Math.random()*p2X)+p2X;  document.write('<layer name=\'sn'+My0+'\'visibility="hide"left="0"top="0"bgcolor=\'#'+IBK+'\'clip=\'0,0,1,'+TWc+'\'></layer>');}} else if(ksq){window.document.body.style.overflow='hidden'; for(My0=0;My0<DtD;My0++){IBK=n__[My0%6];TWc=Math.round(Math.random()*p2X)+p2X;  document.write('<div id=\'sg'+My0+'\'style=\'position:absolute;top:0;left:0;width:1px;height:'+TWc+'px;background:#'+IBK+';font-size:'+TWc+'px;visibility:hidden\'></div>');}} else if(F5g){ document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">');for(My0=0;My0<DtD;My0++){IBK=n__[My0%6];TWc=Math.round(Math.random()*p2X)+p2X;  document.write('<div id=\'si\' style=\'position:absolute;top:0;left:0;width:1px;height:'+TWc+'px;background:'+IBK+';font-size:'+TWc+'px;visibility:hidden\'></div>');} document.write('</div>');  document.write('</div>'); }for(My0=0;My0<DtD;My0++){Kmo[My0]=Math.round(Math.random()*oNV); rB5[My0]=Math.round(Math.random()*ZDT); b4x[My0]=Math.round(Math.random()*8)+GF_; eMX[My0]=-1;} function G3m(){oNV=(F5g)?window.document.body.clientWidth:window.innerWidth; ZDT=(F5g)?window.document.body.clientHeight:window.innerHeight; Pmq=(F5g)?window.document.body.scrollLeft:window.pageXOffset; mjD=(F5g)?window.document.body.scrollTop:window.pageYOffset; h26++;h26=(h26>DtD)?DtD:h26;for(var j=0;j<DtD;j++){Kmo[j]+=QQs;Kmo[j]=(Kmo[j]+oNV)%oNV;rB5[j]+=b4x[j];if(rB5[j]>=ZDT){if(j<h26)eMX[j]=0; else eMX[j]=-1;rB5[j]=-10;}if(eMX[j]==0){if(Y18){ document.layers['sn'+j].left=Kmo[j]+Pmq;  document.layers['sn'+j].top=rB5[j]+mjD;  document.layers['sn'+j].visibility='show'; }if(ksq){ document.getElementById("sg"+j).style.left=Kmo[j]+Pmq;  document.getElementById("sg"+j).style.top=rB5[j]+mjD;  document.getElementById("sg"+j).style.visibility='visible'; } else if(F5g){si[j].style.pixelLeft=Kmo[j]+Pmq;si[j].style.pixelTop=rB5[j]+mjD;si[j].style.visibility='visible';}}}NcH();} function Gjy(){G3m();setTimeout('Gjy()',20);}window.onload=Gjy; window.onresize = new Function("window.location.reload()"); 

It comes with HTML files to trigger the effect with settings such as:

var author="www.dseffects.com";
var numraindrops="40";
var speed="2";
var rainsize="2";
var wind="left";
var regkey="";

You used the Quote option instead of the Preformatted Text option when you posted the code example, this caused all the single & quotes to be converted to invalid Typographical (curly) equivalents.

Fixed it.