Skip to content

Instantly share code, notes, and snippets.

@sonus

sonus/easter_cart.html

Last active March 27, 2018 11:57
Show Gist options
  • Save sonus/0d1f179b2645c0b357e827f0ec8e898d to your computer and use it in GitHub Desktop.
Save sonus/0d1f179b2645c0b357e827f0ec8e898d to your computer and use it in GitHub Desktop.
Download ZIP
Easter
Raw
easter_cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
div.automaton{
height: 800px;
width: 450px;
background-color: #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #B3E5FC;
-webkit-border-radius: 50% / 60% 60% 40% 40%;
border-radius: 50% / 60% 60% 40% 40%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: #ffffff;
overflow: hidden;
}
.pp{
height: 800px;
width: 450px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-border-radius: 50% / 60% 60% 40% 40%;
border-radius: 50% / 60% 60% 40% 40%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
overflow: hidden;
}
div.card div{
width: 5px;
height: 5px;
float: left;
}
div.card div.e{
background-color: red;
}
div.card div.bl{
background-image: -webkit-linear-gradient(45deg, #fff 50%, red 50%);
}
div.card div.br{
background-image: -webkit-linear-gradient(135deg, #fff 50%, red 50%);
}
div.card div.tl{
background-image: -webkit-linear-gradient(315deg, #fff 50%, red 50%);
}
div.card div.tr{
background-image: -webkit-linear-gradient(225deg, #fff 50%, red 50%);
}
html,body, *{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="automaton">
<div class="card"></div>
</div>
<!-- <p style="font-family: monospace; font-size:10px ; position: relative; top: -17px; left: 50px;">Happy</p> -->
<!-- <p style="font-family: monospace; font-size:10px ; position: relative; top: -27px; left: 370px;">Easter</p> -->
<p class="pp" style="line-height: 18px; font-size: 18px; font-family: times; position:fixed; top :0; left:5px; color: hsla(63, 100%, 50%, 0.6);">
<script type="text/javascript">
for (var line=1; line<45; line++) {
for(var i=1;i<26;i++) {
var s = (Math.floor((Math.random()*2)%2)) ? "╱" : "╲";
document.write(s);
}
document.writeln("<br>");
}
</script>
</p>
<script type="text/javascript">
function setEgg(size,x,y){
var style="";
var width = 5*size;
y = y - Math.floor(width/2);
var bcolor= randomColor();
style = "width: "+width+"px; height: "+6*size+"px; ";
style += "background-color: "+bcolor+";";
style += "border-radius: 100%;"
document.body.innerHTML += '<span style=" position: fixed; top:'+x+'px; left: '+y+'px; '+style+' " ><span>'
}
// setEgg(1,100,100);
for (let i = 0; i < 90; i++) {
let div = document.createElement('div')
document.querySelector('.card').appendChild(div)
}
var fc = 0;
function randomColor() {
fc++;
if(fc<5000){
return "#000000";
}else if(fc<9000){
return "#ff0000";
}else{
return "#ffff00";
}
// let max = 255
// let min = 0
// let red= Math.floor(Math.random() * (max - min + 1));
// let green= Math.floor(Math.random() * (max - min + 1));
// let blue= Math.floor(Math.random() * (max - min + 1));
return "#03A9F4";
return 'rgba('+red+','+green+','+blue+',1)';
}
function randomBinary() {
let max = 1
let min = 0
return Math.floor(
Math.random() * (max - min + 1)
)
}
function randomizeRow(rowDiv) {
let len = rowDiv.childNodes.length;
for (let i = 0; i < len; i++) {
let activeColor = randomColor();
let div = rowDiv.childNodes[i];
let res = randomBinary();
div.classList.add(res ? 'active' : 'inactive')
if(res){
div.setAttribute("style", 'background-color:'+activeColor+';');
}
}
}
randomizeRow(document.querySelector('.card'))
var ss = setInterval(duplicateRow, 1);
var count = 0;
function duplicateRow() {
count++;
if(count==160){
clearInterval(ss);
return;
}
let allRows = document.querySelectorAll('.card')
let lastRow = allRows[allRows.length - 1]
let clone = lastRow.cloneNode(true)
document
.querySelector('.automaton')
.appendChild(clone)
processRow(clone, lastRow)
// setEggCard(lastRow);
}
function setEggCard(rowDiv){
var flag;
let len = rowDiv.childNodes.length
for (let i = 0; i < len; i++) {
let target = rowDiv.childNodes[i]
if(target.classList.contains('inactive')){
flag++;
}else{
if(flag>7){
var egrow = i - Math.floor(flag/2);
var rect = rowDiv.childNodes[egrow].getBoundingClientRect();
setEgg(2, rect.top, rect.left);
}
flag=0;
}
}
}
function processRow(rowDiv, parentRowDiv) {
let len = rowDiv.childNodes.length
for (let i = 0; i < len; i++) {
let target = rowDiv.childNodes[i]
let prevSelf = parentRowDiv.childNodes[i]
let leftSibling =
prevSelf.previousElementSibling ||
parentRowDiv.childNodes[
parentRowDiv.childNodes.length - 1]
let rightSibling =
prevSelf.nextElementSibling ||
parentRowDiv.childNodes[0]
let toggleClass = setActiveIfMatchesRule
.bind(
null,
target,
leftSibling,
prevSelf,
rightSibling
)
//73
// toggleClass([1,1,1], false)
// toggleClass([1,1,0], true)
// toggleClass([1,0,1], false)
// toggleClass([1,0,0], false)
// toggleClass([0,1,1], true)
// toggleClass([0,1,0], false)
// toggleClass([0,0,1], false)
// toggleClass([0,0,0], true)
//150
// toggleClass([1,1,1], true)
// toggleClass([1,1,0], false)
// toggleClass([1,0,1], false)
// toggleClass([1,0,0], true)
// toggleClass([0,1,1], false)
// toggleClass([0,1,0], true)
// toggleClass([0,0,1], true)
// toggleClass([0,0,0], false)
//126
toggleClass([1,1,1], false)
toggleClass([1,1,0], true)
toggleClass([1,0,1], true)
toggleClass([1,0,0], true)
toggleClass([0,1,1], true)
toggleClass([0,1,0], true)
toggleClass([0,0,1], true)
toggleClass([0,0,0], false)
}
}
function setActiveIfMatchesRule(
target,
leftSibling,
prevSelf,
rightSibling,
rule,
ruleValue
) {
let matchesRule =
state(leftSibling) === rule[0] &&
state(prevSelf) === rule[1] &&
state(rightSibling) === rule[2]
if(matchesRule)
setIsActive(target, ruleValue)
}
function state(cellDiv) {
return cellDiv.classList.contains('active') ? 1 : 0
}
var stateColor="";
function setIsActive(cellDiv, isActive) {
let activeColor = randomColor();
if (!!isActive) {
cellDiv.classList.remove('inactive')
cellDiv.classList.add('active')
cellDiv.setAttribute("style", 'background-color:'+activeColor+';');
} else {
cellDiv.classList.remove('active')
cellDiv.classList.add('inactive')
cellDiv.setAttribute("style", '');
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment