imik

imik

The hint with __file__ was just what I needed and got me on the right track.
Using os.path.join(os.path.dirname(__file__), 'resource', 'font.otf') within the main.py now gives me the ability to pull content from the resource directory. Perfect!

Thank you so much @frederik, as always

imik

Hi @eduairet I stumpled upon your thread as I am currently working on something similar. I need to share some code for someone else to work with and the package seems to be a perfect fit.

I just have a problem that my font is not loaded from the resource directory. Everytime I set text it uses standard fallback font.
Looking at your tree file I see that you use a varFont as well located within resource. Is there a trick to get it working?

Would be a bummer if the user needs to input a path to the font file.

imik

@frederik Thank you!

I fiddled around a bit today and managed to get a result pretty close with the code below.
The solution was to chop everything off <= 0.
Playing around with easing functions for the framePhase resulted in some interesting visuals as well.

I’ll admit it’s probably not the pretties code but it gets the job done. If anyone has some other ideas or upgrades for the code block below I am always keen to learn something new. Especially as I am planning to play around a bit more with wave based animations.

CANVAS = 1080
numFrames = 35
amp = CANVAS
tailLength = 1.1

txt = "CODING"
pt = 180


def setFontStyle(color = 0):
    fontSize(pt)
    fill(color)
    stroke(0)
    lineJoin("round")
    strokeWidth(5)
    
def drawShadow(_txt, x, y):
    with savedState():
        setFontStyle(.8)
        stroke(None)
        translate(25, -15)
        text(char, (x, y))

def drawChar(char, x, y, color):
    with savedState():
        setFontStyle(color)
        text(char, (x, y))

def f(firstPhase, secondPhase, thirdPhase):
    return(sin(.5 * pi * secondPhase - thirdPhase - firstPhase - pi * 1.4))

fontSize(pt)
amp -= fontCapHeight()     
capHeight = fontCapHeight()

for frame in range(numFrames):
    fPhase = (2 * pi) * frame / numFrames
    newPage(CANVAS, CANVAS)
    fill(1)
    rect(0, 0, CANVAS, CANVAS)
    scale(.9, center = (width()/2, height()/2))
    

    for i, char in enumerate(txt):
        txtPhase = i / len(txt)
        for j in range(4):
            colPhase = (i + j * tailLength) / (4 + len(txt))
            
            x = f(fPhase, txtPhase, colPhase)
            if x <= 0:
                x = 0
            y = 90 + capHeight * len(txt) - 1.2 * capHeight * i
            drawShadow(char, x * amp, y)


    for i, char in enumerate(txt):
        txtPhase = i / len(txt)
        for j in range(4):
            colPhase = (i + j * tailLength) / (4 + len(txt))
            x = f(fPhase, txtPhase, colPhase)
            if x <= 0:
                x = 0
            y = 90 + capHeight * len(txt) - 1.2 * capHeight * i
            drawChar(char, x * amp, y, (j / 3))
            
saveImage(f"~/Desktop/TypeTrail.gif")

Will result in something like this:

imik

Hey
I found a GIF online (haven’t found better credits for it) that I am currently trying to recreate in DrawBot.

For now I managed to create a wave effect from left to right with the code below.
But I am having a hard time to utilize wave functions to full extend to achieve the result that I want to recreate.

Especially offsetting the wave so it seems to be running through the text just once. I feel like this is somehow related to the topic Delay Animation but I am not able to adapt it.
It feels like I am still missing the fundamental idea of using wave functions for animations like this. If any of you has some resource, articles or suggestion I appreciate it a lot.

numFrames = 35
start, marginTop = 450, 90
travel = 400
txt = "CODING"


def drawShadow(_txt, x, yy):
    with savedState():
        translate(25, -15)
        fill(.8)
        text(_txt, (x, yy + fCapHeight * len(txt) - i * fCapHeight*1.20))

def drawChar(_txt, x, yy):
    with savedState():
        text(_txt, (x, yy + fCapHeight * len(txt) - i * fCapHeight*1.20))
            
    
for frame in range(numFrames):  
    fPhase = frame / numFrames
    newPage(1080, 1080)
    fill(1, 1, 1)
    rect(0, 0, width(), height())
    
    fontSize(180)

    fCapHeight = fontCapHeight()

    lineJoin("round")
    
    for i, char in enumerate(txt):
        for j in range(4):
            _travel = travel * sin(2 * pi * fPhase + (i + j * .8) / 4 + len(txt))
            drawShadow(char, start + _travel, marginTop)
    
    for i, char in enumerate(txt):
        cPhase = i / len(txt)
        stroke(0, 0, 0)
        strokeWidth(5)
        for j in range(4):
            fill(j / 3)
            _travel = travel * sin(2 * pi * fPhase + (i + j * .8) / 4 + len(txt))
            drawChar(char, start + _travel, marginTop)
            
saveImage("~/Desktop/waveAnimation.gif")

Results in a GIF like this.

And this is a more advanced version that I managed to create.

imik

Thank you @gferreira! This is a nice example
Also a great motivation to spent a bit more time on writing well structured code. My scripts tend to get messy very quickly.

imik

You need to specify the size of the new canvas after each newDrawing()

for i in range(10):
    newDrawing()
    size("A4")
    fill(random())
    rect(0, 0, width(), height())
    saveImage(f'~/Desktop/file-{i}.pdf')
    endDrawing()

imik

Hi @frederik,
I am running macOS version 10.14.6 and the simplified script works perfectly fine on my machine as well.
As I was trying to extend it I got the same output again and I did some trial and error.

What am I trying to achieve?
I have in mind a setup where I draw an ImageObject. The ImageObject then can contain text or graphics as well as another image. I then feed it into some arbitrary function to manipulate it.
The clue is that I want to manipulate the manipulated image again. So I am currently returning a new ImageObeject from the manipulation function.

I came up with something like this:

w = h = 300
# higher Numbers here result in the context leak
numManipulations = 20

def manipulateImage(img, r, angle, pos):
    tempImg = ImageObject()
    x, y = pos

    with tempImg:
        size(w, h)
        # Draw the old Image
        image(img, (0, 0))
        fill(None)
        stroke(0)
        # Draw the manipulation on top
        oval(x - r, y - r, r * 2, r * 2)
        clipPath()
        rotate(angle, center = (x, y))
        image(img, (0, 0))
        
    return(tempImg)

im = ImageObject()

with im:
    size(w, h)
    fill(1)
    rect(0, 0, w, h)
    fill(0)
    fontSize(100)
    text("Heee", (10, 10))

for a in range(numManipulations):
    r = randint(20, 40)
    x = randint(r, w-r)
    y = randint(r, h-r)
    angle = randint(0, 360)
    im = manipulateImage(im, r, angle, (x, y))
    
    newPage(w, h)
    image(im, (0, 0))

    saveImage(f"~/Desktop/test/RotatingImage-{a}.png")

What I found out so far:

~~The scripts runs fine when you only save the final image.~~
Nope, running 100 repetitions results in the same Context leak
When I am trying to save every step for animation purpose or so I will get Context leak deteced, msgtracer -1. No matter using gif, mp4 or png for later stitching.
With png it usually starts at around 12 repetitions, mp4 or gif can go up to 100 repetitions, but I guess it depends on the resolution and other factors.
Running the script within the app you see no problem except on a lot of repetitions the app freezes at some point and you need to kill it. Running the same script then in Terminal you see the Context leak deteced, msgtracer -1.

Maybe it is not the best setup for what I have in mind, but I hope one can understand what's happening.
Any input for improvment is much appreciated as well.

imik

Hi,
I am currently working on a rather simple script what should end in an animation export. To boost things up I am running the final script in the Terminal, but right now I am stuck with an error: Context Leak detected, msgtracer returned -1 which gives me some insight why DrawBot kept crushing on this script.

For the setup:
I want to generate an ImageObject() which will
then be rotated, for that I wrote my own function

def drawRotatedImage(img, angle, pos):
    x, y = pos
    oval(x - r, y - r, r * 2, r * 2)
    clipPath()
    rotate(angle, center = (x, y))
    image(img, (0, 0))

I setup my own ImageObject

im = ImageObject()
with im:
    size("A3")
    # Drawing

And then call the animation setup as follows:

for frame in range(numFrames):
    newPage("A3")
    drawRotatedImage(im, angle, pos)
    # call the function bunch of times

I narrowed it down that the problem lies somewhere within drawRotatedImage() and I think it has something to do with drawing the image object within this function. But at the moment I am lost on how I could fix this problem.

Any help and explanation on this problem will be much appreciated!

imik

Hey @frederik
Thank you very much for your reply.
I did some quick tests with the code you provided but it seems I have not achieved any positive result in saving the pages with the provided color profile data.
The results were always GenericRGB for TIFF, JPG and PNG regardless of me also using some other ICC files.

dataWithContentsOfFile_ returns an objective-c class NSConcreteData with the data represented as b'…' in it, what I guess is right and what imageColorSyncProfileData needs.

Anyway, thanks again for your help.

imik

Hey @gferreira,
thank you for you reply! I will have a more detailed look into the PIL-Library but I think that's it for the moment.
Still, if you have some further information or any idea where to find something about the imageColorSyncProfileData and how to use it that would be great! Always happy to learn something new.

Have a great day.

imik

@imik

Best posts made by imik

Latest posts made by imik