Fragments



<script>document.documentElement.style.overflow = 'hidden'; // For Firefox and Chrome
document.body.scroll = 'no'; // For IE
generateditem = document.createElement("div");
;generateditem.id = `background`;;generateditem.style = `width:` + `100%` + `;height:` + `100%` + `;position:` + `absolute` + `;left:` + `0` + `;top:` + `0` + `;background-color:` + `black` + `;user-select: none` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 10000,
});;generateditem.contentEditable=`false`;;array_name_here = `CollisionListA`;;if (`variablelist` in window) {

}else{

variablelist = {};
};


variablelist[array_name_here] = [];;array_name_here = `CollisionListB`;;if (`variablelist` in window) {

}else{

variablelist = {};
};


variablelist[array_name_here] = [];;if (`timercounter` in window) {

}else{

timercounter = {};timerexpire = {}
}

;intrafrag_var = `CollisionTimer`;
if('timerexpire' in window){}else{timerexpire = {} }
if('timercounter' in window){}else{timercounter = {} }
timerexpire[intrafrag_var] = -1;
timercounter[intrafrag_var] = setInterval(function() {timerexpire[`CollisionTimer`] =timerexpire[`CollisionTimer`] +1; if ("loop_name_here" in window) {
PriorLoopName = loop_name_here
} else {
PriorLoopName = ``
}

loop_name_here = `CollisionLoop`
try{loop_counter[loop_name_here] = 1}catch(err){var loop_counter = {}
loop_counter[loop_name_here] = 1
}for (loop_counter[loop_name_here] = 0; loop_counter[loop_name_here] < variablelist[`CollisionListA`].length; loop_counter[loop_name_here]++) {;Collision_ID =`Collisions`;;case_A =variablelist[`CollisionListA`][loop_counter[`CollisionLoop`]];;case_B=variablelist[`CollisionListB`][loop_counter[`CollisionLoop`]];aRect = document.getElementById(case_A).getBoundingClientRect();

bRect = document.getElementById(case_B).getBoundingClientRect();

if ( !(
((aRect.top + aRect.height) < (bRect.top)) ||
(aRect.top > (bRect.top + bRect.height)) ||
((aRect.left + aRect.width) < bRect.left) ||
(aRect.left > (bRect.left + bRect.width))
)){
try{collision_counter[Collision_ID] = collision_counter[Collision_ID] + 1} catch(err){ try{collision_counter[Collision_ID] = 0}catch(err) {collision_counter = {};collision_counter[Collision_ID] = 0} collision_counter[Collision_ID] = collision_counter[Collision_ID] + 1 }
;generateditem = document.getElementById(variablelist[`CollisionListA`][loop_counter[`CollisionLoop`]]);generateditem.src = `` ;;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([{transform: '' + 'translate3d(' + [Math.floor(Math.random()*(200 + 1 - -200) + -200),`px`,].join('') + ',' + [Math.floor(Math.random()*(200 + 1 - -200) + -200),`px`,].join('')+ ',' + `100px` + `) `,},],{duration: 5000,
iterations:Infinity,});;generateditem.innerHTML = `💨`;
}
};loop_name_here = PriorLoopName;},10);

if ("loop_name_here" in window) {
PriorLoopName = loop_name_here
} else {
PriorLoopName = ``
}

loop_name_here = `Xloop`
try{loop_counter[loop_name_here] = 1}catch(err){var loop_counter = {}
loop_counter[loop_name_here] = 1
}for (loop_counter[loop_name_here] = 0; loop_counter[loop_name_here] < 10; loop_counter[loop_name_here]++) {if ("loop_name_here" in window) {
PriorLoopName = loop_name_here
} else {
PriorLoopName = ``
}

loop_name_here = `Yloop`
try{loop_counter[loop_name_here] = 1}catch(err){var loop_counter = {}
loop_counter[loop_name_here] = 1
}for (loop_counter[loop_name_here] = 0; loop_counter[loop_name_here] < 10; loop_counter[loop_name_here]++) {generateditem = document.createElement("div");
;generateditem.id = [`Tree`,loop_counter[`Xloop`]+1,loop_counter[`Yloop`]+1,].join('');;generateditem.innerHTML = `&#127794;`;;generateditem.style = `width:` + `5vw` + `;top:` + [parseFloat(loop_counter[`Xloop`])*10,`vw`,].join('') + `;left:` + [parseFloat(loop_counter[`Yloop`])*10,`vh`,].join('') + `;text-align:` + `center` + `;color:` + `white` + `;font-size:` + `10vw` + `;user-select: none` + `;font-family:` + `arial` + `;height:` + `5vh` + `;position:` + `absolute` + `;opacity:` + `1` + `;`;generateditem.addEventListener('click', function (e) {});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 10000,
});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); }};loop_name_here = PriorLoopName;};loop_name_here = PriorLoopName;generateditem = document.createElement("div");
;generateditem.id = `Maintext`;;generateditem.innerHTML = `First live demo of fragments`;;generateditem.style = `width:` + `100%` + `;height:` + `5em` + `;position:` + `absolute` + `;left:` + `0` + `;top:` + `50%` + `;color:` + `yellow` + `;font-size:` + `10vw` + `;text-align:` + `center` + `;z-index:` + `1000` + `;user-select: none` + `;`;generateditem.addEventListener('click', function (e) {if ("loop_name_here" in window) {
PriorLoopName = loop_name_here
} else {
PriorLoopName = ``
}

loop_name_here = `Xloop`
try{loop_counter[loop_name_here] = 1}catch(err){var loop_counter = {}
loop_counter[loop_name_here] = 1
}for (loop_counter[loop_name_here] = 0; loop_counter[loop_name_here] < 10; loop_counter[loop_name_here]++) {if ("loop_name_here" in window) {
PriorLoopName = loop_name_here
} else {
PriorLoopName = ``
}

loop_name_here = `Yloop`
try{loop_counter[loop_name_here] = 1}catch(err){var loop_counter = {}
loop_counter[loop_name_here] = 1
}for (loop_counter[loop_name_here] = 0; loop_counter[loop_name_here] < 10; loop_counter[loop_name_here]++) {;generateditem = document.getElementById([`Tree`,loop_counter[`Xloop`]+1,loop_counter[`Yloop`]+1,].join(''));generateditem.src = `` ;;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([{transform: '' + `rotate3d(` + 0 + ',' + 0 + ',' + 1+ ',' + [Math.floor(Math.random()*(0 + 1 - 0) + 0),`deg`,].join('') + `) `,},{transform: '' + `rotate3d(` + 0 + ',' + 0 + ',' + 1+ ',' + [Math.floor(Math.random()*(5 + 1 - -5) + -5),`deg`,].join('') + `) `,},{transform: '' + `rotate3d(` + 0 + ',' + 0 + ',' + 1+ ',' + [Math.floor(Math.random()*(5 + 1 - -5) + -5),`deg`,].join('') + `) `,},{transform: '' + `rotate3d(` + 0 + ',' + 0 + ',' + 1+ ',' + [Math.floor(Math.random()*(0 + 1 - 0) + 0),`deg`,].join('') + `) `,},],{duration: 5000,
iterations:Infinity,});;generateditem.innerHTML = `&#128293;`;;if (typeof array_counter == 'undefined') {
var array_counter = {} };
array_name_here = `CollisionListA`;;if (array_name_here in variablelist){}else{variablelist[array_name_here] = []};
variablelist[array_name_here].push([`Tree`,loop_counter[`Xloop`]+1,loop_counter[`Yloop`]+1,].join(''));
;if (typeof array_counter == 'undefined') {
var array_counter = {} };
array_name_here = `CollisionListB`;;if (array_name_here in variablelist){}else{variablelist[array_name_here] = []};
variablelist[array_name_here].push(`Meat`);
};loop_name_here = PriorLoopName;};loop_name_here = PriorLoopName;;generateditem = document.getElementById(`Maintext`);generateditem.src = `` ;;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 5000,
});;generateditem.innerHTML = `Getting Lit`;;generateditem.style = `width:` + `100%` + `;height:` + `5em` + `;position:` + `absolute` + `;left:` + `0` + `;top:` + `50%` + `;color:` + `red` + `;font-size:` + `10vw` + `;text-align:` + `center` + `;z-index:` + `1000` + `;user-select: none` + `;`;generateditem = document.getElementById(`Meat`);generateditem.src = `` ;;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 5000,
});;generateditem.style = `width:` + `10vw` + `;opacity:` + `1` + `;user-select: none` + `;height:` + `10vh` + `;position:` + `absolute` + `;top:` + `75%` + `;color:` + `yellow` + `;font-size:` + `10vw` + `;text-align:` + `center` + `;z-index:` + `1000` + `;`});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([{transform: '' + 'scale(' + `1`+ ',' + `1` + `) `,},{transform: '' + 'scale(' + `.7`+ ',' + `.7` + `) `,},{transform: '' + 'scale(' + `1`+ ',' + `1` + `) `,},],{duration: 2000,
iterations:Infinity,});;generateditem.contentEditable=`false`;generateditem = document.createElement("div");
;generateditem.id = `Meat`;;generateditem.innerHTML = `&#129385;`;;generateditem.style = `width:` + `5vw` + `;user-select: none` + `;height:` + `5vw` + `;position:` + `absolute` + `;top:` + `75%` + `;color:` + `yellow` + `;font-size:` + `10vw` + `;text-align:` + `center` + `;z-index:` + `1000` + `;opacity:` + `0` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 2000,
iterations:Infinity,});;generateditem.contentEditable=`false`;// Make the DIV element draggable:


// find the element that you want to drag.
var box =generateditem

/* listen to the touchMove event,
every time it fires, grab the location
of touch and assign it to box */

box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];

// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX -box.offsetWidth/2 + 'px';
box.style.top = touchLocation.pageY -box.offsetHeight/2 + 'px';
})

/* record the position of the touch
when released using touchend event.
This will be the drop position. */

box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})




//begin nonmobile
dragElement(generateditem);

function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;


function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}

function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}

function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}