Brown noise

Press here to hear the Brown noise. Press again and noice go away. Not bad ;)

  
You know Brown noise the Brownian noise the Brownian motion A random walk. 

Here some hints how I make it
  
Say: 2D-plane
  	|A|B|C|D|...
  1|1A||1B||4C|...
  2|2A||2B||4C|...
  3|3A||3B||4C|...
  4|4A||4B||4C|...
  .				.
  .				 .	
  .				  .	
Matrix if yuo will
How presentate this in 1D dimensional sound buffer?
Let another dimension be in higer tenth power

1000 2000 3000... 
1001 2001 3001...
1002 2002 3003...
.
.
.
It depends the size of matrix how get square area walker to wadel around.
basic steps can be:
var steps=[1,-1, 1000, -1000, 999,-999, 1001, -1001];
in 999 999 square where there is 999 step-blocs y is over thousand and x 0-999

At the edges it is different, you want it stay, inside think most careful 
the edges:
	
    
if((positionnow)%1000==0)
    
Here if you kive it the normal steps; here being the left edge -1000
                                                                   0
                                                               	1000
                                                                2000
                                                                .
                                                                    .
                                                                    .
(The matrix is another way up here) you step out the bounds if dice 
roll on steps -999, -1 or 999, so here 
walk need to be the different:
var stepsonedge1=[1,2, 1000, -1000, 1002,-1002, 1001, -1001];


I make them edges,  to be scarry to that random walker so it take
two teps opposite direction,
out of them if it is about walk thru them edges. 
First I thought maybe it teleport on edges the walker back to
its original position 500,
but then I decide: "Why not this way." .

Strange it come this good, that sound, that definitely is the Brownian noise,
not all the seeds, if it souds snapping 
or pounding: Reload the page!
the real head scratcher. Here! Is that,
there is geometrically 2 between -1 and 1, or is there?
The Real paradox!? It makes your head spin.

And the dice is js normal vanilla:

  function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

--that silent blep* sound comes when sound buffer loop-around back in beginig.

Pink noise test 1

Press here to hear the test pink noise 1. Press again and bad noice go away. Its not yet sound like in the wiki. sound like error and fire

white noise WhiteNoise

Press here to hear the white noise. Press again and bad noice go away.

Flat C the C♭

Press here to hear the flat C the sine wave

Shadow button the code full!: now...🕒

This full code, I colored it later if not make small blogs about it's subsectios where I explain stuff. I dont much care about colorings. 

And https://praybook2.blogspot.com/2021/08/css-box-shadow-button-shadow-has-no.html this is the shadow button I mean.

<script id="primitives">

  

  

  var Test_timer;//=setInterval(myTimer, 1000);

 var shadowtest__StyleContainer=[] ;

  var shadowtest__numberRunner=-1;

  var shadowtest__thechosen=0;

  var shadowtest__freshfromContainer=false;

  var shadowtest__moveleft=10;

  var shadowtest__moveleft_speed=0;

  var shadowtest__movedown=10;

  var shadowtest__spray=10;

  var shadowtest__size=10;

  var shadowtest__color_R=120;

  var shadowtest__color_G=20;

  var shadowtest__color_B=50;

  var shadowtest__color_O=1;

  

   var shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

  // var box_shadow=" 0 4px 87px 190px rgba(0, 0, 0, 0.2)"; 0px   0px  0px  0px  rgba(0,0,0,1)

   var box_shadow="box-shadow: "+shadowtest__moveleft+"px   "+shadowtest__movedown+"px  "+shadowtest__spray+"px  "+ shadowtest__size+"px  "+ shadowtest__color+";";

  var  altering=true;

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<script id="opjects">

     var ading={red:1,green:1,blue:1,opacity:-0.01};

   var ColorsAndOpacity={

    red:215,green:215,blue:215,opacity:1,

first:true

    };

  var  RgbaColor={string:"rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")"};

  var  CollectionOfValues={

     left:20,down:20,spray:20,size:20

    }

 // CollectionOfValues.spray=1

  var speeds={ left:5,down:5,spray:5,size:5};

    var fullStyle={

    PutThisInCSS:" "+CollectionOfValues.left+"px   "+CollectionOfValues.down+"px  "+CollectionOfValues.spray+"px  "+ CollectionOfValues.size+"px  "+ RgbaColor.string+"",

string:"rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")",

    left:CollectionOfValues.left,down:CollectionOfValues.down,spray:CollectionOfValues.spray,size:CollectionOfValues.size,

     red:ColorsAndOpacity.red,green:ColorsAndOpacity.green,blue:ColorsAndOpacity.blue,opacity:ColorsAndOpacity.opacity

      ,first:true

    };

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<script id="functions">

  

  function usefromcontainer(){

    //console.log(fullStyle.PutThisInCSS);

  fullStyle.PutThisInCSS=shadowtest__StyleContainer[shadowtest__thechosen].PutThisInCSS;// pitää     päivitää niitä väli vaiheita

    ColorsAndOpacity.red=shadowtest__StyleContainer[shadowtest__thechosen].red;

    ColorsAndOpacity.blue=shadowtest__StyleContainer[shadowtest__thechosen].blue;

    ColorsAndOpacity.green=shadowtest__StyleContainer[shadowtest__thechosen].green;

    ColorsAndOpacity.opacity=shadowtest__StyleContainer[shadowtest__thechosen].opacity;

     ColorsAndOpacity.first=shadowtest__StyleContainer[shadowtest__thechosen].first;

    

    

    CollectionOfValues.left=shadowtest__StyleContainer[shadowtest__thechosen].left;

    CollectionOfValues.down=shadowtest__StyleContainer[shadowtest__thechosen].down;

  CollectionOfValues.spray=shadowtest__StyleContainer[shadowtest__thechosen].spray;

    CollectionOfValues.size=shadowtest__StyleContainer[shadowtest__thechosen].size;

   RgbaColor.string=shadowtest__StyleContainer[shadowtest__thechosen].string;

  fullStyle= JSON.parse(JSON.stringify(shadowtest__StyleContainer[shadowtest__thechosen]));

    //fullStyle.PutThisInCSS=

    

   

 

  

  }

  

      function Changespeeddirect(){

    speeds["left"]=speeds["left"]*(-1);

    

    }

    function AlterStrings(){

      if(altering){

      changestring2("-","shadowtest__moveleft__direction_span");

      altering=false;

      }else{

      changestring2("+","shadowtest__moveleft__direction_span");

      altering=true;

      }

    }

      function moveClection(Ob,K){

    updatingStylePosition(Ob,K);

    hierspeeds(K);

    writeStyle();

    }

      function updatingStylePosition(object,key){

    //console.log( );

      object[key]=object[key]+speeds[key];

    //console.log(object[key]);

   // console.log(speeds[key]);

    }

    function hierspeeds( key){

   //  speeds[key]++;// tässä virhe

    speeds[key]=speeds[key]+speeds[key];

    }

    function writeStyle(){

 

      if(shadowtest__freshfromContainer){

      usefromcontainer();

        shadowtest__freshfromContainer=false;

      }

      

      UpdateStyleColor();

      UpdatefullStyle(); 

       const clonefullStyle= JSON.parse(JSON.stringify(fullStyle));

      

       shadowtest__StyleContainer[shadowtest__thechosen]=  clonefullStyle; 

      var stringi="";

      var stringi2="";

      

      

    for(let i = 0; i <= (shadowtest__numberRunner); i++){

      //    for(i; i > 0; i--){  

           

       if(i==0){

       //stringi=stringi+shadowtest__StyleContainer[i];

         

         if(shadowtest__thechosen==i){

         stringi="👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+ stringi;

         }else{

         

         stringi= shadowtest__StyleContainer[i].PutThisInCSS+ stringi;

         }

          stringi2=shadowtest__StyleContainer[i].PutThisInCSS+ stringi2;

        // stringi=shadowtest__StyleContainer[i].PutThisInCSS+ stringi;

         

   //SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi+";}");

         

   //SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span");

       }else{

       //stringi=stringi+","+shadowtest__StyleContainer[i];

         if(shadowtest__thechosen==i){

          stringi= "👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+ ","+stringi;

         }else{

         

          stringi= shadowtest__StyleContainer[i].PutThisInCSS+ ","+stringi;

         

         }

         stringi2= shadowtest__StyleContainer[i].PutThisInCSS+ ","+stringi2;

       

        // }

        // console.log(shadowtest__StyleContainer[i].PutThisInCSS+ "  "+222222222222222+" " +i);

   

       //  SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi+";}");

      

      //   SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span");   

         

       }

    }

      

      SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi2+";}");

         

   SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span"); 

    }

      function ColorthingysR(classnames,buttoncolor){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttoncolor)[0];

    shadowtest__color_R++;

      //milloinkohan kierähtää ympäri

    if( shadowtest__color_R==216){

      shadowtest__color_R=0;

      }

      shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    }

     function Colorthingys(classnames,buttonToColorClassName){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttonToColorClassName)[0];

    shadowtest__color_R++;

       

    if( shadowtest__color_R==216){

      shadowtest__color_R=0;

      }

      shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    }

     function SingAndDanceAddelements(StringTheStyle){

     var styleT = document.createElement("style");

  styleT.setAttribute("id","TheStyle");

  styleT.appendChild(document.createTextNode(StringTheStyle));

     var Laying_styleT=document.getElementById("TheStyle");

  var parentstyle = Laying_styleT.parentNode;

  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);

   }

 // SingAndDanceAddelements3(,"shadowtest__ShowThestyle_span",0,"span");

 function SingAndDanceAddelements3(StringTheStyle,className,classorder,element){

     var styleT = document.createElement(element);//siis teen style id kopion 2 kopioita ja sitten pyöritän niitä

  styleT.setAttribute("class",className);

  styleT.appendChild(document.createTextNode(StringTheStyle));

//console.log(className);

 // var Laying_styleT= getElementsByClassName(className)[classorder];

 // var Laying_styleT= getElementsByClassName(className) ;

   var Laying_styleT= document.getElementsByClassName(className)[classorder] ;

  // var Laying_styleT=document.getElementById("TheStyle");

  var parentstyle = Laying_styleT.parentNode;

  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);

   }

      function ButtonEventmaker(object){

     // object.EventFunctionPairarray;

     // object.ButtonClass

    var length= object.events.length;

      for (let i = 0; i < length; i+=2) {

   

      ButtonControl( object.class,object.events[i],  object.events[i+1]);

      }

    }

    function TakeColor(ClassName){

  //  console.log("!");

    var ColorButton=  document.getElementsByClassName(ClassName)[0];

  //   console.log(ColorButton);

     // ColorButton.style.backgroundColor

      // ColorButton.style.backgroundColor = shadowtest__color;

      ColorButton.style.backgroundColor = RgbaColor.string;

     // console.log("hiu e");

     // RgbaColor.string

     // uudelleen piirto

      writeStyle();

    }

 

 

  function SingAndDanceAddelements2(StringTheinner, element,atributelist,classname,classnumber){

     var styleT = document.createElement(element);

       var length= atributelist.length;

      for (let i = 0; i < length; i+=2) {

      //object.EventFunctionPairarray[i];

      //object.EventFunctionPairarray[i+1];

      //  console.log(object.events[i]);

     //   console.log(object.events[i+1]);

     //   console.log(object.class )

    //  ButtonControl( object.class,object.events[i],  object.events[i+1]);

     styleT.setAttribute(atributelist[i],atributelist[i+1]);

      }

     styleT.appendChild(document.createTextNode(StringTheinner));

    // getElementsByClassName

     //var Laying_styleT=document.getElementById("TheStyle");

     var Laying_styleT=document.getElementsByClassName(classname)[classnumber];

  var parentstyle = Laying_styleT.parentNode;

  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);

   }

     function MakeNewBoxShadow(){

     if(shadowtest__numberRunner==-1){

     //tringStyle=stringStyle+fullStyle.PutThisInCSS;

       

         SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ fullStyle.PutThisInCSS+";}");

       //tähän kirjoitan yhden sellaisen

        SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ fullStyle.PutThisInCSS+";}","shadowtest__ShowThestyle_span",0,"span");

       

       document.getElementById("hideandrise").style.display = "block";

       document.getElementById("hideandrise").style.animation = "visible 4s 1";

       document.getElementById("hideandrise").style.opacity = "1.0";

       //plauu

       

       //.style.animation = "mynewmove 4s 2"

     }else{

//console.log(shadowtest__StyleContainer[shadowtest__numberRunner].left );

      // console.log(shadowtest__numberRunner);

    // console.log( shadowtest__StyleContainer[shadowtest__numberRunner]);

       //0px   0px  0px  0px  rgba(0,0,0,1) box-shadow:

      // SingAndDanceAddelements(" .shadowtest__shower{"+box_shadow+"}");

      //console.log(shadowtest__numberRunner);

    var stringStyle2="";

    var stringStyle="";

     for(let i = 0; i <= (shadowtest__numberRunner); i++){

       if(i==0){ 

       //stringStyle=stringStyle+shadowtest__StyleContainer[i];

          stringStyle=shadowtest__StyleContainer[i].PutThisInCSS+stringStyle;

        // if(shadowtest__thechosen==i){

        //  stringStyle2="👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+stringStyle2;

        // }else{

         stringStyle2=shadowtest__StyleContainer[i].PutThisInCSS+stringStyle2;

        // }

       }else{

       //stringStyle=stringStyle+","+shadowtest__StyleContainer[i];

          stringStyle=shadowtest__StyleContainer[i].PutThisInCSS+","+stringStyle;

         // if(shadowtest__thechosen==i){

         //  stringStyle2="👉"+shadowtest__StyleContainer[i].PutThisInCSS+","+"👈"+stringStyle2;

         // }else{

         stringStyle2=shadowtest__StyleContainer[i].PutThisInCSS+","+stringStyle2;

         // }

       //  console.log(shadowtest__StyleContainer[i].PutThisInCSS+ "  "+222222222222222);

        /* 

   SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}");

     SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}","shadowtest__ShowThestyle_span",0,"span");

       */

       }

      

     } 

      // fullStyle.first=true;

        stringStyle=fullStyle.PutThisInCSS+","+stringStyle;  

        stringStyle2="👉"+fullStyle.PutThisInCSS+"👈"+","+stringStyle2;

       

        SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}");

     SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringStyle2+";}","shadowtest__ShowThestyle_span",0,"span");

//writeStyle();"👉""👈"

      }

    // console.log(" .shadowtest__shower{"+box_shadow+"}");

  //   SingAndDanceAddelements(" .shadowtest__shower{ box-shadow: 10px   20px  20px  10px  rgba(145,93,93,1);}");

     shadowtest__numberRunner++;

      // console.log(fullStyle.first +" first first first")

       fullStyle.first=true;

      shadowtest__StyleContainer.push(JSON.parse(JSON.stringify(fullStyle))); 

      fullStyle.first=false;

//shadowtest__thechosen=shadowtest__numberRunner;

       shadowtest__thechosen=shadowtest__numberRunner;

   }

      function AddShadowstoAStyle(){

    

      // box_shadow miten tään styleksi

    }

  //  ButtonLoopOver([]);

  function ButtonLoopOver(array){

    const LENGTH=array.length;

   // console.log("liii i hiuss "+LENGTH);

    for(let i = 0; i < LENGTH; i++){

    //console.log(i);

       ButtonEventmaker(array[i]);

    }

  }

  function ButtonControl(Classofthebutton, event, appening){

    try{

  var class_name = document.getElementsByClassName(Classofthebutton)[0];

    class_name.addEventListener(event, appening);

    }catch(error){}

  }

  function movethe(){

  }

      function UpdateStyleColor(){

  /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ; */

     

       // ColorsAndOpacity.red

        

      RgbaColor.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;

      //console.log(RgbaColor.string);

    }

      function UpdateStyleColor2(color){

  /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ; */

      

       // ColorsAndOpacity.red

        //first

        

        //  rgb(205, 35, 37)  red

                    // rgb(34, 211, 37) green

                    //rgb(23, 23, 183)  blue

                        

        

        if(ColorsAndOpacity.first){

       

          ColorsAndOpacity.first=false;

          if(color=="red"){

            ColorsAndOpacity.red=205;

            ColorsAndOpacity.green=35;

            ColorsAndOpacity.blue=37;

            }

          if(color=="green"){

             ColorsAndOpacity.red=35;

            ColorsAndOpacity.green=211;

            ColorsAndOpacity.blue=37;

          }

          if(color=="blue"){

          ColorsAndOpacity.red=23;

            ColorsAndOpacity.green=23;

            ColorsAndOpacity.blue=183;

          

          }

          if(color=="opacity"){

          ColorsAndOpacity.first=true;

          

          

          }

        

        }

        

      RgbaColor.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;

      //console.log(RgbaColor.string);

    }

    function notoimiikst(x,key){

    x[key]++

      //console.log(x[key]);

    }

   function UpdatefullStyle(){

   fullStyle.PutThisInCSS=" "+CollectionOfValues.left+"px   "+CollectionOfValues.down+"px  "+CollectionOfValues.spray+"px  "+ CollectionOfValues.size+"px  "+ RgbaColor.string+"";

 fullStyle.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")";

   

    fullStyle.left=CollectionOfValues.left;

     

     fullStyle.down=CollectionOfValues.down;

     fullStyle.spray=CollectionOfValues.spray; 

     fullStyle.size=CollectionOfValues.size;

     

     fullStyle.red=ColorsAndOpacity.red;

     fullStyle.green=ColorsAndOpacity.green;

     fullStyle.blue=ColorsAndOpacity.blue;

     fullStyle.opacity=ColorsAndOpacity.opacity;

     

     fullStyle.first=ColorsAndOpacity.first;

     

   }

      function changestring(newstring,element,classname){

    SingAndDanceAddelements2(newstring,element,["class",classname],classname,0);

    }

     function changestring2(newstring,classname){

    SingAndDanceAddelements2(newstring,"span",["class",classname],classname,0);

    }

  function ColorChanguniver(buttoncolor,ref,key){

   // var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttoncolor)[0];

    ref[key]=ref[key]+ading[key];

      

    if( ref[key]==216){

        ading[key]=-1;

      }

        if( ref[key]==-1){

        ref[key]=0;

        ading[key]=1;

        }

      

    /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.redNum+","+ ColorsAndOpacity.greenNum+","+ ColorsAndOpacity.blueNum+","+ ColorsAndOpacity.opacity+")" ;*/

       // UpdateStyleColor();

    UpdateStyleColor2(key);

       // UpdatefullStyle();

     // rbg.string=rbg.string;

        //ColorButton.style.backgroundColor =  rbg.string;

        ColorButton.style.backgroundColor =   RgbaColor.string;

     // console.log( RgbaColor.string);

    }

    function opasity(buttoncolor,ref,key){

      var ColorButton=document.getElementsByClassName(buttoncolor)[0];

      ref[key]=ref[key]+ading[key];

      if( ref[key]>=1){

      ref[key]=1;

        ading[key]=-0.01;

      }

        if( ref[key]<=0){

        ref[key]=0;

        ading[key]=0.01;

        }

      //shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;

       //ColorButton.style.backgroundColor =   shadowtest__color;

      //console.log(  shadowtest__color);

      writeStyle();

    }

    function ShadowMoveLeft(){

   shadowtest__moveleft=shadowtest__moveleft+ shadowtest__moveleft_speed;

   //shadowtest__moveleft_speed++;

     ///if(){} no stops

   //  console.log("move "+ shadowtest__moveleft);

   }

  function ShadowSpeed(){

   //shadowtest__moveleft++;

   shadowtest__moveleft_speed++;

     ///if(){} no stops

   //  console.log("speed "+shadowtest__moveleft_speed);

   }

  function test(){

   ShadowSpeed();

  }

  function test2(){

  // ShadowMoveLeft();

  Test_timer=setInterval(myTimer, 1000);

  }

  function myTimer(){

  ShadowMoveLeft();

  }

   function test3(){

   clearInterval(Test_timer);

   }

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<script id="construct">

    class moveC{

      

      #alterinhere;

        #timerholder;

      #speedOrder;

    constructor(object,key,drawfunctio){

          

         // this.exlude=ecludeThese;// string aray

              

          

          this.speeds=[5,10,20,30,40,60,70,80,90,100];

          this.negaspeeds=[-1,-10,-20,-30,-40,-60,-70,-80,-90,-100];    

              

          this.Out=true;

            this.thekey=key;

            this.#speedOrder=-1;

            this.noexluded=true;

            this.#timerholder;

            this.#alterinhere=true;

            this.draw=drawfunctio;

            this.negaspeedson=false;

// this.Outfrominer=true;

    //      this.status=[this.Out,this.noexluded,this.Outfrominer]; 

        

          //this.Waitout=await

            /* this.classTest={

          hui:"ki",tui:2,Poo:"em"

          }; */

          }

      

      

           AlterStrings(tHis,toThis,className){

      if( this.#alterinhere){

      changestring2(toThis,className);

       this.#alterinhere=false;

      }else{

      changestring2(tHis,className);

       this.#alterinhere=true;

      }

    }

      

      console(){

      console.log("proto rype");

      }

      #realstop(){

         

          //pysäyttää vain jos [true, false]

          if(this.Out){// according that this can stop and then begin the timer

//try{

             clearInterval(this.#timerholder);

          //  ()=>{clearInterval(this.#timerholder);};

            //}catch(e){}

         //  console.log(this.Out+ "  hh ui ");

          }

// console.log(this.Out+ "  hiii hiii ");

          }

      changeplustominus(){

        

        if(this.#speedOrder==-1){this.#speedOrder=0;}

      if( this.negaspeedson){

        

        

      speeds[this.thekey]=this.speeds[this.#speedOrder];  

      this.negaspeedson=false;

      }else{

      

      speeds[this.thekey]=this.negaspeeds[this.#speedOrder];  

      this.negaspeedson=true;

      }

        //käänetääs -+

        

      

      }

      

      speedup(){

        this.#speedOrder++;

        

        if(!this.negaspeedson){

      speeds[this.thekey]=this.speeds[this.#speedOrder];

        }else{

      speeds[this.thekey]=this.negaspeeds[this.#speedOrder];   

        }

        

        

        if(this.#speedOrder==9){

        this.#speedOrder=-1;

         // console.log(speeds[this.thekey]);

        }

      

      }

      

      #timer(r){

      clearInterval(this.#timerholder);

     this.#timerholder= setInterval(()=>{  this.#realstop();this.draw();this.fixer();}, r);

      }

  

      enter(){

this.#timer(1000);

           this.Out=false;

           //this.status[0]=this.Out;

           // console.log(this.Out + " enter");

          //  console.log(this.status);

          }

      fixer(){

      

      

      }

      leave(){

 if(this.noexluded){

         this.Out=true;

 }else{

 this.Out=false;

 this.noexluded=true;

   clearInterval(this.#timerholder);

 }

        //    this.noexluded=true;

        //    this.status[1]=this.noexluded;

         //  this.status[0]=this.Out;

         //   this.status[1]=this.noexluded;

       // console.log(this.Out + " leave"  );

          }

      //This time I can't use endless new because I it is internal flag no external 

      exlude(){

            //new Promise(()=>{});

           // console.log("witch");

          this.Out=false;

           // this.status[1]=this.noexluded;

    //console.log(this.Out+ " ");

          }

      exludeEnded(){

          

         // this.Outfrominer=false;

       //   this.noexluded=true;

         // Outfrominer

         //  this.Out=false;

          this.noexluded=false;

       //    this.status[0]=this.Out;

         //  this.status[1]=this.noexluded;

         //  this.status[2]=this.Outfrominer;

          // console.log(this.Out+" exlEnded");

          }

      #check(){

      new Promise(()=>{

     // console.log(this.noOut);

       return this.noOut;

      });

      }

      //speeds=[10,20,]

    }

    //console.log(moveC);

        class OnMouseOver3{

    constructor( functionContinuing,interval) {

  // this.SaveClass=Nameclass; //I may not need a event in here. 

   this.Savefunction=functionContinuing;

   this.Saveinterval=interval;

   this.SaveTimer=  setInterval(this.Savefunction, this.Saveinterval);

    }

       //set setInterval(this.Savefunction, this.Saveinterval);

    // this.Leave=stop();

      stop (){

    // console.log("end end eeeeeeee");

     clearInterval(this.SaveTimer);

     }

    }

   class OnMouseOverChangeColor{

    constructor(Nameclass,interval,classname,classnameTarget,Colornum,referenssi) {

   this.SaveClass=Nameclass; //En taida tarvita täällä eventtii

   //this.Savefunction=functionContinuing;

   this.Saveinterval=interval;

   this.class_name=classname;

   this.ClassNameTarget=classnameTarget;

   this.colornum=Colornum;

   //this.SaveTimer=  setInterval(this.Savefunction, this.Saveinterval);

      //  #ovettestinner(){

         // this.#testinner(2);

        //  }

    }

         Test(){setInterval( this.#testinner, 1000);}

         // Test(){setInterval( function(){this.#testinner} , 1000);}

     Exit(){

     //console.log("end end eeeeeeee");

     clearInterval(this.SaveTimer);

     }

          /*

          #ovettestinner(){

          this.#testinner(2);

          }

          */

          #testinner(){

          //console.log("tiu tiu "+Nameclass);

          }

   //var re=22;

         #ColorC(classnames,buttonToColorClassName, noy){

   // console.log(noy);

   // function (classnames,buttonToColorClassName){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttonToColorClassName)[0];

    //shadowtest__color_R++;//  

         this.colornum++

       

    // if( shadowtest__color_R==216){

      if( this.colornum==216){

      //shadowtest__color_R=0;

       this.colornum=0;

      }

        shadowtest__color="rgba"+"("+this.colornum+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    // console.log(      RgbaColor);

          // return this.colornum;

            

    }

     

        }

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<style id="TheStyle"></style>

<style id="TheStyle_Static_Old">

  @keyframes visible {

    0% {opacity: 0.0;}

    100% {opacity: 1.0;}

  }

</style>

<script>

 

  /*

    */

  

  

  

  var Holder_OnmouseOver_R;

  var Holder_OnmouseOver_G;

  var Holder_OnmouseOver_B;

  var Holder_OnmouseOver_O;

speeds.down=5;

  

  var moveDown= new moveC(speeds,"down",()=>{console.log("ehm"); CollectionOfValues.down=CollectionOfValues.down+speeds.down; writeStyle();});

  var sizeChange=new moveC(speeds,"size",()=>{CollectionOfValues.size=CollectionOfValues.size+speeds.size; writeStyle();});

  var leftMove=new moveC(speeds,"left",()=>{CollectionOfValues.left=CollectionOfValues.left+speeds.left; writeStyle();});

  //var left

   

  moveC.prototype.console=function (){

 // console.log("triiii riii rteiiii");

  }

  moveC.prototype.fixer = function () {

 // this.console();

      if(CollectionOfValues.spray<0){

      CollectionOfValues.spray=1;

        this.changeplustominus();

        this.AlterStrings("+","-","shadowtest__spray__direction_span");

        this.console();

      }

    if(CollectionOfValues.spray<0){

     CollectionOfValues.spray=200;

    }

      

}

 

  /*

  moveC.prototype.#timer=function(r){

      clearInterval(this.#timerholder);

     this.#timerholder= setInterval(()=>{  this.#realstop();this.draw();}, r);

      }

  

   //mouse overiksi

  */

 // console()

  //this.AlterStrings("+","-","shadowtest__spray__direction_span");

  var sprayer=new moveC(speeds,"spray",()=>{CollectionOfValues.spray=CollectionOfValues.spray+speeds.spray; writeStyle();});

  

  //moveDown.timer(1000);//

   // console.log(moveC);

    //console.log(moveDown);

    //console.log(moveDown.classTest.hui);

   const BUTTON_DATA =[{

  class:"t",

  events:["click", function(){shadowtest__moveleft_speed++;console.log("speed "+shadowtest__moveleft_speed);},"mouseenter",test2,"mouseout",test3]

  },

  {

  class:"tx",

  events:["click", function(){shadowtest__moveleft_speed++;console.log("speed "+shadowtest__moveleft_speed);},"mouseenter",test2,"mouseout",test3]

  } ,

  {

  class:"shadowtest__shower",

  events:["click",  MakeNewBoxShadow]

  },

   {

     class:"shadowtest__colorchoose",

     events:["click",()=>{TakeColor("shadowtest__colorchoose"); }]

  },{

  class:"shadowtest__colorchoose__R",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_R= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"red");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_R.stop();}]

  },{

  class:"shadowtest__colorchoose__G",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_G= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"green");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_G.stop();}]

  },{

  class:"shadowtest__colorchoose__B",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_B= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"blue");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_B.stop(); }]

  },{

  class:"shadowtest__colorchoose__O",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_O= new OnMouseOver3(function li(){  opasity( "shadowtest__colorchoose",ColorsAndOpacity,"opacity");   },66)} ,"mouseout",()=>{Holder_OnmouseOver_O.stop(); }]

  },{

  class:"shadowtest__spray_span",

  events:["click",()=>{ console.log( document.getElementsByClassName("shadowtest__spray_span")[0].style.backgroundColor="inherit" ); UpdatefullStyle();  }]

  },

                       

                       //

                  /*       {

   class:"shadowtest__moveleft",

   events:["click",()=>{leftMove.speedup();},"mouseenter",()=>{leftMove.enter();},"mouseout",()=>{ leftMove.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu

   },{

   class:"shadowtest__moveleft_span",

   events:["mouseenter",()=>{leftMove.exlude();},"mouseout",()=>{leftMove.exludeEnded();}]

   },

                       

                 */ 

               {

   class:"shadowtest__moveleft",

   events:["click",()=>{leftMove.speedup();},"mouseover",()=>{leftMove.enter();},"mouseout",()=>{ leftMove.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu

   },

                       {

   class:"shadowtest__moveleft__direction",

   events:["click",()=>{leftMove.changeplustominus(); leftMove.AlterStrings("+","-","shadowtest__moveleft__direction_span");}]

   },

                       

                       ///

  {

   class:"shadowtest__movedown",

   events:["click",()=>{moveDown.speedup();},"mouseenter",()=>{moveDown.enter();},"mouseout",()=>{ moveDown.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu

   },{

   class:"shadowtest__movedown_span",

   events:["mouseenter",()=>{moveDown.exlude();},"mouseout",()=>{moveDown.exludeEnded();}]

   },{

   class:"shadowtest__movedown__direction",

   events:["click",()=>{moveDown.changeplustominus(); moveDown.AlterStrings("+","-","shadowtest__movedown__direction_span");}]

   },{

   class:"shadowtest__size",

   events:["click",()=>{ sizeChange.speedup();},"mouseenter",()=>{sizeChange.enter();},"mouseout",()=>{ sizeChange.leave();}]

   

   

   },{

   class:"shadowtest__size_span",

   events:["mouseenter",()=>{sizeChange.exlude();},"mouseout",()=>{sizeChange.exludeEnded();}]

   },{

   class:"shadowtest__size__direction",

   events:["click",()=>{sizeChange.changeplustominus(); sizeChange.AlterStrings("+","-","shadowtest__size__direction_span");}]

   }

                       ///

     ,{

   class:"shadowtest__spray",

   events:["click",()=>{ sprayer.speedup(); },"mouseenter",()=>{sprayer.enter();},"mouseout",()=>{ sprayer.leave();}]

   

   

   },{

   class:"shadowtest__spray_span",

   events:["mouseenter",()=>{sprayer.exlude();sprayer.fixer();},"mouseout",()=>{sprayer.exludeEnded();}]

   },{

   class:"shadowtest__spray__direction",

   events:["click",()=>{sprayer.changeplustominus(); sprayer.AlterStrings("+","-","shadowtest__spray__direction_span");}]

   

     

   

   },{

   class:"shadowtest__ChooseShadow",

   events:["click",()=>{ shadowtest__thechosen++; shadowtest__freshfromContainer=true; if(shadowtest__numberRunner<shadowtest__thechosen){

   shadowtest__thechosen=0;

    //console.log("d");

     //shadowtest__freshfromContainer=false;

   }

                        

                        

                        

                       // console.log(shadowtest__freshfromContainer);

                       // console.log(shadowtest__numberRunner);

                       // console.log(shadowtest__thechosen);

                        writeStyle();

                    var ColorButton=  document.getElementsByClassName("shadowtest__colorchoose")[0];

     ColorButton.style.backgroundColor = shadowtest__StyleContainer[shadowtest__thechosen].string;

                    //  rgb(205, 35, 37)  punainen

                    // rgb(34, 211, 37) green

                    //rgb(23, 23, 183) blue sit if mitä painaa ensin

                        

                        

                        

                        

                       }]

   

   }

//jos kerkeää ennen timerin lumista palata tekee toisen timerin

//changeplustominus()

  ];

</script>

<h1 style="background-color: white; box-sizing: border-box; color: #1b1b1b; font-family: zillaslab, palatino, &quot;Palatino Linotype&quot;, serif; font-size: 3.052rem; letter-spacing: 0.035rem; line-height: 1.2; margin: 0px; word-break: break-word;">Recently I noticed something interesting in the box-shadow CSS property. Here press the "Make a new shadow"-button to test it out.</h1>

<div class="shadowtest__ShowThestyle" style="background-color: cyan;"><span class="shadowtest__ShowThestyle_span"></span></div>

<!--<button

  class="t"

  ;

  id="test1"

  n_onmouseover="test2()"

  n_onclick="test()"

  n_onmouseenter="test2()"

  n_monmouseout="test3()"

>

  test

</button>-->

<!--<button class="tx" ; id="test12">test2</button>-->

<button class="shadowtest__shower">

  <span class="shadowtest__shower_span">Make a new shadow</span></button><br /><br />

<div id="hideandrise" style="display: none; opacity: 0;">

  <button class="shadowtest__moveleft">

    <span class="shadowtest__moveleft_span">left</span></button><button class="shadowtest__moveleft__direction">

    <span class="shadowtest__moveleft__direction_span">+</span>

  </button>

  <button class="shadowtest__movedown">

    <span class="shadowtest__movedown_span">down</span></button><button class="shadowtest__movedown__direction">

    <span class="shadowtest__movedown__direction_span">+</span>

  </button>

  <button class="shadowtest__spray">

    <span class="shadowtest__spray_span">spray up</span>

  </button>

<button class="shadowtest__spray__direction">

    <span class="shadowtest__spray__direction_span">+</span>

  </button>

  

  

  <button class="shadowtest__size">

    <span class="shadowtest__size_span">size</span></button><button class="shadowtest__size__direction">

    <span class="shadowtest__size__direction_span">+</span>

  </button>

  <button class="shadowtest__colorchoose">

    choose color

    <span class="shadowtest__colorchoose__R" style="background-color: red;">R</span><span class="shadowtest__colorchoose__G" style="background-color: green;">G</span><span class="shadowtest__colorchoose__B" style="background-color: blue;">B</span><span class="shadowtest__colorchoose__O">O</span>

  </button>

  <button class="shadowtest__ChooseShadow">

    <span class="shadowtest__ChooseShadow_span">Choose shadow</span>

  </button>

</div>

<script>

  // TakeColor("shadowtest__colorchoose");

   ButtonLoopOver(BUTTON_DATA);

</script>