Posts made by frederik

I think the circCoords is a bit overkill
its creating an circular x, y coordinate while looping over the width and height of the page. You are drawing a lot of ovals

radius = 100
translate(width() *.5, height() *.5)

inSteps = 1
# inSteps = 15

for angle in range(0, 360, inSteps):
    factor = angle / 360 * 2
    if factor > 1:
        factor = 2 - factor    
    
    x = cos(radians(angle)) * radius
    y = sin(radians(angle)) * radius
    
    fill(factor, 0, 1)
    oval(x - 5, y - 5, 10, 10)

indeed, letters are collected into glyph runs with the same drawing attributes, so if you change a thing (like fill color) then you will get a box for each letter.

good luck!

I don't know what you are trying to do but textBoxCharacterBounds is really handy to retrieve typesetted information.

help(textBoxCharacterBounds)


t = FormattedString()
t.fontSize(50)
t += "hello"

t.font("Times")
t.fill(1, 1, 0)
t += " world"
t.font("Times-Bold")
t.fill(1, 0, 0)
t += " fooj"

textBox(t, (0, 0, 400, 400))

textRects = textBoxCharacterBounds(t, (0, 400, 400, 400))


for textRect in textRects:
    x, y, w, h = textRect.bounds
    
    fill(random(), random(), random(), .3)    
    rect(x, y - textRect.baselineOffset, w, h)
    
    text(textRect.formattedSubString, (x, y))

moving this into a github issue

follow up here: https://github.com/typemytype/drawbot/issues/417

this would be handy

how to add it:

Create a custom NSLayoutManager for the code editor and overwrite drawGlyphsForGlyphRange_atPoint_ and draw something like a rainbow or dots or ...

also see https://github.com/coteditor/CotEditor/blob/89afb53f207309bfee2b1070ada3f258e1e0d6ef/CotEditor/Sources/LayoutManager.swift#L312

@pi said in Is it possible do this processing.gif in drawbot?:

@frederik: Why is it 0.38?

the handle of the off curve is 38% of the distance between the oncurve points, that seems to be generating nice curves

an other solution!

# amount of corners, 6 will create a hexagon
corners = 6
# the radius of the circle
radius = 100
# amount of frames
frames = 24
# calculate the step in radians of each corner
angleStep = pi * 2 / corners
# calculate the distance between each point on the circle
# based on the cos, sin of the angle the opposite 'c' can be
# calculated with pythagoras 
distance = sqrt((radius - cos(angleStep) * radius) ** 2 + (sin(angleStep) * radius) ** 2)
# calculate the offcurve handle length
offCurveLength = distance * 0.38
# the extremes of factors we would like to use
minFactor = .3
maxFactor = 2 
# start the loop
for i in range(frames):
    # calculate a factor and normalize so it goes from 0 -> 1 -> 0
    # to create a loop
    factor = i / (frames) * 2
    if factor > 1:
        factor = 2 - factor
    # interpolate the factor with our min max settings
    factor = minFactor + (maxFactor - minFactor) * factor
    # create a new page
    newPage(radius * 4, radius * 4)
    # draw a white background (gifs dont have an alpha value)
    with savedState():
        fill(1)
        rect(0, 0, width(), height())
    # translate to the middle
    translate(width() / 2, height() / 2)
    # create a pen
    pen = BezierPath()
    # use the pen as a point pen
    # so we can just add point instead of segments
    pen.beginPath()
    # start a loop over all corners
    for i in range(corners):
        # get the angle of each corner
        angle = angleStep * i    
        # get the x, y position based on the angle and radius    
        x = cos(angle) * radius
        y = sin(angle) * radius            
        # get the off curces based on the hooked angle (+90°) 
        # and multiply by the factor         
        offx1 = (x + cos(angle + pi / 2) * offCurveLength) * factor
        offy1 = (y + sin(angle + pi / 2) * offCurveLength) * factor
            
        offx2 = (x - cos(angle + pi / 2) * offCurveLength) * factor
        offy2 = (y - sin(angle + pi / 2) * offCurveLength) * factor
        # add the point to the point pen path
        pen.addPoint((offx2, offy2))
        pen.addPoint((x, y), segmentType="curve")
        pen.addPoint((offx1, offy1))        
    # tell the path the drawing is done
    pen.endPath()
    # draw the path
    stroke(1, 0, 1, 1)
    strokeWidth(10)
    fill(None)
    drawPath(pen)
# save the gif
saveImage("circleHex.gif")

cool !

cool, thanks for sharing!

the resulting animated gif

hope this example is clear enough!

# path to an image
path = 'https://github.com/typemytype/drawbot/raw/master/docs/content/assets/drawBot.jpg'
# get the width and height of the image
canvasWidth, canvasHeight = imageSize(path)
# amount of frames
frameCount = 24
# start the loop
for frame in range(frameCount):
    # calculate a factor, number between 0 - 1
    # going from 0 - 1 - 0
    frameFactor = frame / (frameCount) * 2        
    if frameFactor > 1:
       frameFactor = 2 - frameFactor 
    # create a new page, based on the image size
    newPage(canvasWidth, canvasHeight)
    # set frame duration in second only when the full image is shown
    if frameFactor == 1:
        frameDuration(1)
    else:
        frameDuration(.05)
    
    # easin
    frameFactor = frameFactor * frameFactor
    # translate to the middle
    translate(canvasWidth/2, canvasHeight/2)
    # scale from the middle
    scale(frameFactor)
    # rotate from the middle
    rotate(360 * frameFactor * 10)
    # translate back away from the middle
    translate(-canvasWidth/2, -canvasHeight/2)
    # draw the image
    image(path, (0, 0))
# save as gif
saveImage("testImage.gif")

a lot is happening at the same time

I hope the example is clear enough!

# seperate width and height
canvasWidth = 300
rowCount = 10
circleCount = 10
# calculate circleSize based on the width and the amount circles
circleSize = canvasWidth / circleCount
# must be even
frameCount = 24
# calcualte the height based on the circle size and rows
canvasHeight = circleSize * rowCount


# start loop
for frame in range(frameCount-1):    
    # calculate a factor, number between 0 - 1
    # going from 0 - 1 - 0
    frameFactor = frame / (frameCount) * 2        
    if frameFactor > 1:
       frameFactor = 2 - frameFactor 
    # create a page
    newPage(canvasWidth, canvasHeight)
    # draw a white background
    with savedState():
        fill(1)
        rect(0, 0, canvasWidth, canvasHeight)
    # translate half of the circle size
    translate(circleSize/2, circleSize/2)
    # start a loop for each row
    for row in range(rowCount):
        # get the scale base factor, a number between 0 - 1
        circleScale = row / (rowCount - 1)
        # add the frame factor
        circleScale += frameFactor
        # normalize the circle size
        if circleScale > 1:
            circleScale = 2 - circleScale
        # adding some easein
        circleScale = circleScale * circleScale
        # start loop for each column
        for i in range(circleCount):
            # save and restore        
            with savedState():
                # translate to the x, y of the oval
                translate(i * circleSize, row * circleSize)
                # scale
                scale(circleScale)
                # draw the oval
                oval(-circleSize/2, -circleSize/2, circleSize, circleSize)
# save the image
saveImage("test.gif")

it works if you don't create an ImageObject first of the snow flake.

This is blowing your memory to moon and almost back as this will load the pdf in memory for every time you create a frame... The endless loop is different on the amount of available memory.

If you insist to use an ImageObject try to cache it if you are reusing the same image data over and over again.

# image(copo, (-w/2, -h/2))
image(path, (-w/2, -h/2))

happy xmass

could you move this topic to a github issue?

thanks!

maybe the callback should convert incoming str to bytes, or the docs must change. Im make an issue --> https://github.com/typemytype/drawbot/issues/411

pageCount() returning the current page count -->https://www.drawbot.com/content/canvas/pages.html#drawBot.pageCount

textBoxCharacterBounds (I see its not added to the docs yet..) returning a list of typesetted bounding boxes with characters and a subsetted formattedString

help(textBoxCharacterBounds)  # :)

hope this helps with your puzzle!

t = "AVA"

font("Garamond")
fontSize(200)

text(t, (10, 10))

openTypeFeatures(kern=False)
text(t, (10, 200))

newDrawing() completely reset the drawing stack, as @imik mentioned.

Use newDrawing if you want to generate multiple drawings, or when you are in an environment where the drawing stack is kept in memory and a hard reset of the drawing stack is required.

see the docs: https://www.drawbot.com/content/canvas/pages.html#drawBot.newDrawing

Update DrawBot

See https://github.com/typemytype/drawbot/releases/tag/3.126

an other option is to use path.expandStroke(10) so you can do point inside testing.

see https://www.drawbot.com/content/shapes/bezierPath.html#drawBot.context.baseContext.BezierPath.expandStroke