Show me some fireworks!
ES6, 520 496 bytes

Clipping and everything else should work now.

(w,h,p,i,r=0,s=($=&gt;{while(++r&lt;i)for(j=0,_=$[r]=[],z=$[r-1]||[];j&lt;w*h;){k=j+1,l='*',c=0
n=(j%w&amp;&amp;z[j-1]==l&amp;&amp;++c)|(k%w&amp;&amp;z[k]==l&amp;&amp;++c)?'-':' '
n=(z[j-w]==l&amp;&amp;++c)|(z[j+w]==l&amp;&amp;++c)?'|':n
n=(j%w&amp;&amp;z[j-w-1]==l&amp;&amp;++c)|(k%w&amp;&amp;z[k+w]==l&amp;&amp;++c)?'\\':n
n=(k%w&amp;&amp;z[k-w]==l&amp;&amp;++c)|(j%w&amp;&amp;z[j+w-1]==l&amp;&amp;++c)?'/':n
_[j++]=Math.random()&lt;p?l:c&gt;1?'X':n}})(x=[])||x)=&gt;{c=document.body.children[0],r=0;while(++r&lt;i)setTimeout((k=0)=&gt;{for(r++,c.innerHTML='';k&lt;h;)c.innerHTML+=s[r].slice(k*w,++k*w).join('')+'\n'},90*r);r=0}


View animation!

Saved 24 bytes thanks to Zacharý's tip.

Old solution, 478 bytes (with clipping bug)

I think I got all the rules correct, however the solution has a clipping problem where everything exiting right/left wraps around one line lower/higher on the opposite side.

(w,h,p,i,r=0,s=($=&gt;{while(++r&lt;i)for(j=0,_=$[r]=[],z=$[r-1]||[];j&lt;w*h;){c=0
n=(z[j-1]=='*'&amp;&amp;++c)|(z[j+1]=='*'&amp;&amp;++c)?'-':' '
n=(z[j-w]=='*'&amp;&amp;++c)|(z[j+w]=='*'&amp;&amp;++c)?'|':n
n=(z[j-w-1]=='*'&amp;&amp;++c)|(z[j+w+1]=='*'&amp;&amp;++c)?'\\':n
n=(z[j-w+1]=='*'&amp;&amp;++c)|(z[j+w-1]=='*'&amp;&amp;++c)?'/':n
_[j++]=Math.random()&lt;p?'*':c&gt;1?'X':n}})(x=[])||x)=&gt;{c=document.body.children[0],r=0;while(++r&lt;i)setTimeout((k=0)=&gt;{for(r++,c.innerHTML='';k&lt;h;)c.innerHTML+=s[r].slice(k*w,++k*w).join('')+'\n'},90*r);r=0}


View old.