Do Nothing Machine
Do Nothing Machine
Versão Software de uma "Do Nothing Machine"
Esta é a minha versão digital de uma “Do Nothing Machine”, em software.
A IDEIA
Criar o equivalente a uma “Do Nothing Machine” em software.
A TEORIA
A “Do Nothing Machine” cumpre fielmente o que promete no nome: é uma máquina cujo único propósito é a ausência total de propósito. Realiza uma ação totalmente desprovida de qualquer utilidade prática.
A PRÁTICA
Se o mundo já está repleto de “Do Nothing Machines” em hardware, por que não transcender este conceito para software? Seguem exemplos de código de “Do Nothing Machines”.
EXEMPLO 1
Do Nothing Machine!
O interruptor é acionado pelo utilizador e retorna ao estado desligado após uma pausa aleatória entre 0 e 1100 milissegundos.
O CÓDIGO
<!DOCTYPE html>
<html>
<head>
<title>Do Nothing Machine!</title>
<style>
/* Centraliza o conteúdo e define margem superior */
.exemplo1 { text-align: center; margin-top: 50px; }
/* Configura o layout do interruptor */
.interruptor { width: 60px; height: 34px; display: inline-flex; position: relative; }
/* Esconde a checkbox nativa */
.interruptor input { display: none; }
/* Define o estilo do interruptor */
.slider { position: absolute; width: 100%; height: 100%; background: #ccc; border-radius: 34px; cursor: pointer; }
/* Estilo da bolinha do interruptor, com transição suave */
.slider:before { content: ""; position: absolute; height: 26px; width: 26px; left: 4px; bottom: 4px; background: branco; border-radius: 50%; transition: .4s; }
/* Altera o estado visual do interruptor quando ativado */
input:checked + .slider { background: #2196F3; }
/* Anima a posição da bolinha ao ativar */
input:checked + .slider:before { transform: translateX(26px); }
</style>
</head>
<body>
<div class="exemplo1">
<h1>Do Nothing Machine!</h1>
<!-- Interruptor com temporizador para redefinir o estado -->
<label class="interruptor">
<input type="checkbox" onclick="setTimeout(() => this.checked = 0, Math.random() * 1e3 + 100)">
<span class="slider"></span>
</label>
</div>
</body>
</html>
EXEMPLO 2
Do Nothing Machine!
O interruptor é acionado pelo utilizador, fazendo com que um “braço mecânico/martelo” apareça, simulando um toque na bola do interruptor para esta retornar ao estado desligado.
Executa este procedimento com uma pausa aleatória entre 0 e 800 milissegundos.
O CÓDIGO
<!DOCTYPE html>
<html>
<head>
<title>Do Nothing Machine!</title>
<style>
/* Centraliza o conteúdo e define margem superior */
.exemplo2 { text-align: center; margin-top: 50px; }
/* container para o interruptor e braço */
.container { display: inline-block; position: relative; }
/* Estilo do interruptor */
.switch {
width: 60px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
position: relative; top: 60px;
}
/* Esconde a checkbox */
.switch input { display: none; }
/* Estilo do deslizador do interruptor */
.slider {
position: absolute; width: 100%; height: 100%;
background: #ccc; border-radius: 34px;
cursor: pointer; transition: .4s;
}
/* Estilo da bolinha do interruptor */
.slider:before {
content: ""; position: absolute; height: 26px; width: 26px;
left: 4px; bottom: 4px; background: branco;
border-radius: 50%; transition: .4s;
}
/* Estilo quando o interruptor é activado */
input:checked + .slider { background: #2196F3; }
input:checked + .slider:before { transform: translateX(26px); }
/* Estilo do braço mecânico */
.arm {
position: absolute; top: 50%; left: calc(50% + 40px);
width: 12px; height: 50px; background: #333;
border-radius: 12px; opacity: 0; transition: opacity 0.3s;
transform-origin: top center;
}
/* Estilo das extremidades do braço */
.arm:before, .arm:after {
content: ""; position: absolute; background: #333;
}
.arm:before { top: -15px; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%); }
.arm:after { bottom: -10px; left: 50%; width: 30px; height: 10px; border-radius: 0 0 5px 5px; transform: translateX(-50%); }
/* Animação do movimento do braço */
@keyframes moveArm {
0% { transform: rotate(0deg); }
100% { transform: rotate(-45deg); }
}
</style>
</head>
<body>
<div class="exemplo2">
<h1>Do Nothing Machine!</h1>
<div class="container">
<label class="switch">
<!-- Checkbox oculto que ativa a função do interruptor -->
<input type="checkbox" id="switch" onclick="gerirInterruptor()">
<span class="slider"></span>
</label>
<!-- Braço mecânico que simula a ação da máquina -->
<div class="arm" id="arm"></div>
</div>
<script>
function gerirInterruptor() {
const elementoSwitch = document.getElementById('switch');
const elementoBraço = document.getElementById('arm');
if (elementoSwitch.checked) {
// Atraso para corresponder à transição do deslizador
setTimeout(() => {
elementoBraço.style.opacity = '1';
elementoBraço.style.animation = 'moveArm 0.5s forwards';
// Atraso aleatório antes de redefinir o estado
setTimeout(() => {
elementoSwitch.checked = false;
elementoBraço.style.opacity = '0';
elementoBraço.style.animation = 'none';
}, Math.random() * 600 + 200); // Atraso aleatório entre 200 e 800ms
}, 400); // Atraso inicial
}
}
</script>
</div>
</body>
</html>
FICHA TÉCNICA
AVISO LEGAL
A informação fornecida nesta página é puramente para utilização lúdica e não deverá ser utilizada em contextos profissionais. Foram tomados todos os cuidados para assegurar que os conteúdos disponibilizados são rigorosos e atualizados, no entanto, o autor desta página não se responsabiliza por quaisquer erros ou omissões. O autor da página poderá alterar ou retirar a informação a qualquer momento e sem aviso prévio. Todo o conteúdo é disponibilizado sem qualquer garantia.
