Adapted from a CFDG : https://www.contextfreeart.org/gallery2/#design/2050
A Pen by Gerard Ferrandez on CodePen.
<canvas></canvas> | |
<!-- Click to generate a new image --> |
"use strict"; | |
////////////////////////////////////////////////////////////////// | |
// Adapted from a CFDG program | |
// https://www.contextfreeart.org/gallery2/#design/2050 | |
////////////////////////////////////////////////////////////////// | |
{ | |
const code = { | |
setup() { | |
this.render({ | |
startShape: 'TENDRILS', | |
background: '#fff' | |
}); | |
}, | |
rules() { | |
return { | |
TENDRILS: s => { | |
this.ARM(s); | |
this.ARM(s, {flip: 90}); | |
}, | |
ARM: [ | |
98, s => { | |
this.CIRCLE(s); | |
this.CIRCLE(s, { size: 0.9, brightness: 1 }); | |
this.ARM(s, { y: 0.2, size: 0.99, rotate: 3 }); | |
}, | |
2, s => { | |
this.CIRCLE(s); | |
this.CIRCLE(s, { size: 0.9, brightness: 1 }); | |
this.ARM(s, { y: 0.2, size: 0.99, flip: 90 }); | |
this.ARM(s, { y: 0.2, size: 0.6, brightness: 0.2 }); | |
} | |
] | |
}; | |
} | |
}; | |
// import cfdg library | |
cfdg.apply(code); | |
// run code | |
code.setup(); | |
// Click canvas to generate a new image | |
["click", "touchdown"].forEach(event => { | |
document.addEventListener(event, e => code.setup(), false); | |
}); | |
} |
<script src="https://codepen.io/ge1doot/pen/rdeWrK"></script> |
html, body { | |
overflow: hidden; | |
touch-action: none; | |
position: absolute; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
background: #000; | |
} | |
canvas { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
user-select: none; | |
cursor: pointer; | |
background: #000; | |
} |
Adapted from a CFDG : https://www.contextfreeart.org/gallery2/#design/2050
A Pen by Gerard Ferrandez on CodePen.