DEV Community

Cover image for The Making of an Angel Maker
Dr Abstract
Dr Abstract

Posted on

The Making of an Angel Maker

Come check out how we made an Angel Maker drawing app in a dozen lines of code with ZIM https://codepen.io/danzen/pen/xxErLry. ZIM must be about the easiest way to code drawing!

Alt Text

We also made a ZIM Book of Angels at https://zimjs.com/angels/ using ZIM Book(). These were both made along with all the angels in one morning! So much fun to code and so beautiful - we really hope you join us in the new year and code with ZIM!

Here is the code for the Angel Maker - try it out on CodePen...

new Rectangle(stageW, stageH, frame.color)
    .addTo()
    .noMouse(); 

new Label("A  N  G  E  L", 20, null, tin)
    .pos(0, 30, CENTER);

const pen = new Pen({
    damp:.05,
    color:series(white,lighter),
    size:10,
    undo:10,
    lineAlpha:.2
}).addTo().animate({
    props:{size:90},
    rewind:true,
    loop:true,
    time:.7
});

new MotionController({
    target:pen,
    type:"pressmove",
    damp:.2,
    speed:20,
    mouseMoveOutside:true
});

let copy;
Ticker.add(function() {
    if (copy) copy.dispose();
    copy = new Bitmap(pen.paper, stageW, stageH)
        .sca(-1,1)
        .loc(stageW,0);
});
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)