3D blog is ending

 Later this month, 3D-blog will end.

Thanks for all.

3D BLog has return

Go  to Check  

 https://thereal3dblog.com/

wow!! visitors --my page.

 Now I can continue writing my story,

 This next story is.

https://ideasmoviesetcetera.blogspot.com/2023/11/movie-idea-time-traveling-cowboys.html

 So! I turn my this ⬆️

My Movie idea! to a RatRat & Ed my pr2y universe story --full book.

So RatRat is buying spending his reward on local market, when sudently molten core blob of fiery stone like shooting stars all over sky, luckily no one hit near him. Or them because there is also a bar. The local man says to his drinking buddy near tavern "That damn! powerplant it is about to explode but, those stupid inbred owners don't know shit, any normal man could just fix powerplant if get there but all those stupid ugly inbred swamp persons, that own powers station not let anyone in.  " 

It is from local wise guy.

RatRat thinks his business then: "What are that those metal-eggs"

Shopkeeper: "They are one broken entertainment system, before it lead user a virtual world now it just turns user crazy, you don't want that" 

RatRat thinks: __I can't physically match that stupid smelly Ed, but I might can get him using that entertainment system, and when his mind is gone. I stab him! and finally get him good. Then I steal all his stuff.__

RatRat says: "I want it! have monney: here"

Shopkeeper: "Ok, but I warned you"

RatRat "Narf* Narf* I use it as experimental trap."

Shopkeeper: "Ok"

Shopkeeper: "It take any files."

RatRat buys an old movie. dv and they speak  boring

next.js wtf? don't you know there is wordpress

Error: Cannot enqueue Handshake after invoking quit: on node mysql

 Have you try createPool instead createConnection or insert whole app.get(...  inside of query's callback function.

one or both these helps me

sequelize is also good

Problem: Fill array by dice numbers; all different 2

function gapLot(){
  
  var array6=[];
  var array2=[1,2,3,4,5,6];
  var random;
 
    for(var i=0;i<6;i++){ //0-5
      random= Math.floor(Math.random() * (6-i))+1;

        if(random==(6-i)){
   
          array6[i]=array2[5-i];
 
        }else{

  
         array6[i]=array2[random-1];
 
         array2[random-1]=array2[5-i];

  
       }
  }
  
   return array6;
 }
 console.log(gapLot());

Problem: Fill array by dice numbers; all different

 You got array of 6,

 

 It need to be fill dice-numbers all less that 6 more than one. We talk about 1,2,3,4,5,6.  Minimal O is preferred. I mean few loops as possible to do this task.

Here my solution, throw dice, get 6 add that to array

Next acquire smaller dice, 1-5 the d5 throw this now, it show 4

That is not 5, we must remember 5 is 4, so that when we take yet smaller dice, the data not get lost, to help remember what is what, we have a pre-filled array where numbers are in order.

And now 5 is 4 and 4 is 5. The data.

Yes. Then we dice smaller dice d4->

We got a three, next let's update the helper-array, that what is on the position-4 on the helper-array, is 3 and three is that, what have there before(5). So...

D3 ->  1

the helper-array goes:..

To terminate last two numbers we flip coin.

This killer C:macro make, C random like it would be JS:random

 Javascript random is nice, because it is between 0 and 1; So you can like:

 Math.random()*sum where you get then numbers between 0 and the sum

like if sum is 7 it give's random's 0-7. And if you want transfer it out of zero you just add numbers to it. 

  So it good and easy, but Random in C gives BIG numbers it harder to use, here how you alter it similar to JS-random:

#define JSrandom (float)(rand()%32767)/32767.00

Then use like JS

random_num=(int)JSrandom*sum + 1;

But you must, before use that JSrandom, make that time seeds thingy, as usually, that make random more random

srand((unsigned int)time(&t));

How it works? Lowest number that C random gives is 32767 that what they promise. If you then use it to "%(modulo)" random it ensure that all numbers are lower than it(32767) or equal. When it(the calculation) be then divided by 32767 it make so that what was before 32767 is now 1 and all other numbers be between 0 to 1.

 

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>