Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Glitch mode #31

Open
funwithtriangles opened this issue May 16, 2018 · 4 comments
Open

Glitch mode #31

funwithtriangles opened this issue May 16, 2018 · 4 comments

Comments

@funwithtriangles
Copy link

funwithtriangles commented May 16, 2018

Amazing stuff. Truly is! I Had to have some fun with it though and started to play around with silly JS in the console. Here's something to get you started, post your own ones too!

setInterval(() => document.querySelectorAll('div').forEach(item => {
item.style = 'transform: translate('+Math.random() * 10+'px,'+Math.random() * 10 +'px)'}), 1)
@cyanharlow
Copy link
Owner

Awesome!! I wish 'transform' could add transformations rather than overriding. 'margin' is also a decent positioning option:

setInterval(() => document.querySelectorAll('div').forEach(item => {
item.style = 'margin-left: ' + (Math.random() * 20 - 10) + 'px; margin-top: ' + (Math.random() * 20 - 10) + 'px;'}), 1)

@funwithtriangles
Copy link
Author

funwithtriangles commented May 17, 2018

@cyanharlow Derp mode!

@dvdrtrgn
Copy link

var divlist = $$('.container div');
var time = 33;

var isShown = (e) => !e.hidden;
var hasKids = (e) => !e.children.length;
var togThis = (e) => e.hidden = !e.hidden;
var makeArray = (e) => [].slice.call(e);

var isLeafy = (e) => !makeArray(e.children).filter(isShown).length;
var getLeaves = () => divlist.filter(isShown).filter(isLeafy).filter(togThis);

function getBits() {
  var x, arr = [];
  do arr.push(...(x = getLeaves()));
  while (x.length);
  return arr;
}

getBits().reverse().forEach(function (e, i) {
  setTimeout(() => togThis(e), i * time);
  console.log('done');
});

@cyanharlow
Copy link
Owner

@dvdrtrgn omg that is SO COOL. It's like the closest thing to seeing it drawn! Also - your JS syntax makes me feel like a JS failure. Very well done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants