Dr Abstract
Posted on October 23, 2020
Once again, we saw some HTML and CSS and thought... yikes! That could be done in less lines of code! Here is the original CodePen pen (thanks to the original poster and their clever HTML SCSS):
https://codepen.io/enbee81/pen/LBMKqV
and here is the ZIM CodePen pen:
https://codepen.io/zimjs/pen/xxORooW
The ZIM code looks like this:
// usually users can interact with a Blob
const mask = new Blob({interactive:false})
.sca(2.5)
.alp(1)
.center();
asset("headshot_800.jpg").center().setMask(mask);
// a Blob has a set of control points we will wiggle
loop(mask.pointControls, point=>{
point
// prop, start, min, max, timeMin, timeMax
.wiggle("x",point.x,10,40,4,8)
.wiggle("y",point.y,10,40,4,8)
.wiggle("scale",1,.1,.5,4,8);
});
// a manually changed Blob needs updating
Ticker.add(()=>{mask.update();});
new Circle(355, null, grey, 1, true).center();
new Rectangle(500, 500, null, grey, 1, null, true).center();
If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.
💖 💪 🙅 🚩
Dr Abstract
Posted on October 23, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related