Tutorials

• 

  How to draw a line connecting all off curve points to on curve points
  3 Oct 2023, 16:41 • micahmicah   3 Oct 2023, 19:00

  5
  0
  Votes
  5
  Posts
  19
  Views

  3 Oct 2023, 19:00

  Thanks so much! That worked. It does seem like for some drawings it helps if I set a different starting point for the contour but this is perfect for my needs. Thanks again, I really appreciate it.
• 

  Need help: Dynamic text animation
  11 Nov 2022, 15:40 • shespoke2me   11 Nov 2022, 18:48

  4
  0
  Votes
  4
  Posts
  14
  Views

  11 Nov 2022, 18:48

  @monomonnik said in Need help: Dynamic text animation: Thank you man! Helped a lot
• 

  masking photos
  6 Feb 2022, 23:14 • aanvi   7 Feb 2022, 09:02

  2
  0
  Votes
  2
  Posts
  23
  Views

  7 Feb 2022, 09:02

  you will need to mask a BezierPath with clipPath see https://www.drawbot.com/content/shapes/drawingPath.html#drawBot.clipPath I will let you try for a bit first good luck
• 

  Request: Barcode Generator
  27 Nov 2021, 07:46 • Joaquin   27 Nov 2021, 20:51

  2
  0
  Votes
  2
  Posts
  12
  Views

  27 Nov 2021, 20:51

  An ImageObject as support to generate barcodes. fe: https://drawbot.com/content/image/imageObject.html#drawBot.context.tools.imageObject.ImageObject.code128BarcodeGenerator im = ImageObject() im.code128BarcodeGenerator((170, 32), message=b"hello world", quietSpace=0) image(im, (10, 10)) Im making an issue to have the size argument optional.
• 

  Tutorial Request:Randomize Each Character Color in text
  2 Nov 2021, 21:41 • JenO   9 Nov 2021, 00:52

  3
  0
  Votes
  3
  Posts
  24
  Views

  9 Nov 2021, 00:52

  Thank you!
• 

  Single line fonts in drawbot ?
  opentype features single line single stroke ttf format • 9 May 2021, 17:59 • bettina comte   9 May 2021, 17:59

  1
  0
  Votes
  1
  Posts
  20
  Views

  No one has replied

• 

  Getting RGBA values from a Variables Colorwell
  10 Mar 2021, 02:59 • benkiel   12 Mar 2021, 18:22

  2
  0
  Votes
  2
  Posts
  22
  Views

  12 Mar 2021, 18:22

  thanks for sharing!
• 

  Type Wave Animation
  16 Feb 2021, 11:34 • imik   17 Feb 2021, 21:59

  3
  0
  Votes
  3
  Posts
  38
  Views

  17 Feb 2021, 21:59

  @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:
• 

  Gradient rings from Python for Designers tutorial
  gradient circles python for designers • 11 Jan 2021, 20:06 • eduairet   18 Jan 2021, 19:42

  3
  0
  Votes
  3
  Posts
  32
  Views

  18 Jan 2021, 19:42

  @frederik thank you very much! I'll implement this way
• 

  Tutorial Request: Delay Animation
  26 Dec 2020, 13:05 • vitorcarvalho   29 Dec 2020, 01:55

  7
  0
  Votes
  7
  Posts
  60
  Views

  29 Dec 2020, 01:55

  @vitorcarvalho wow, this is lovely!!!
• 

  Unknown Pleasures Tutorial
  19 Mar 2020, 23:17 • eduairet   17 Jul 2020, 17:28

  5
  1
  Votes
  5
  Posts
  71
  Views

  17 Jul 2020, 17:28

  @jo Thank you, I was disconnected from Drawbot so I haven't seen this, I'll try your suggestions on the code
• 

  SOLVED Tutorial request: how to animate a variable font
  animation variable fonts • 27 Mar 2018, 12:15 • Mattipa   8 Apr 2020, 13:48

  28
  0
  Votes
  28
  Posts
  11.7k
  Views

  8 Apr 2020, 13:48

  @hzinn not sure how best to improve this more frames and higher resolution might be a start and maybe adding a background.
• 

  SOLVED Making a loop to save multiple GIFs
  21 Jan 2020, 19:32 • eduairet   29 Mar 2020, 18:45

  9
  0
  Votes
  9
  Posts
  148
  Views

  29 Mar 2020, 18:45

  Hello @frederik ! Thank you! it works for me May I add those few lines found on this other tutorial about "EaseInOut" function. def easeInOut(factor): assert 0 <= factor <= 1 return (1 - cos(factor * pi)) / 2 It will add a new graph with easeInOut. It is working well with your previous lines. Thank you for your help ! Be safe.
• 

  SOLVED Tutorial Request : Test Install/Uninstall a .ttf
  2 Nov 2019, 17:15 • loweredcase   3 Nov 2019, 19:18

  4
  0
  Votes
  4
  Posts
  163
  Views

  3 Nov 2019, 19:18

  @gferreira i didn't know you could specifiy path inside font() command. thank you -- this is exactly what i needed!
• 

  SOLVED Variable portrait
  variable fonts image • 31 Oct 2019, 07:33 • eduairet   1 Nov 2019, 18:12

  4
  0
  Votes
  4
  Posts
  254
  Views

  1 Nov 2019, 18:12

  import string import random # path to the image path = u"https://yourimage.jpg" # get the size of the image print(imageSize("https://yourimage.jpg")) # w, h = imageSize(path) s = letter size w = 400 h = 400 s = 10 # Set the characters you need chars = 'HOLAhola' print (random.choice(chars)) # Get colors pix_cols = {} for x in range(0, w, s): for y in range(0, h, s): pix_cols[(x, y)] = imagePixelColor(path, (x, y)) # Variable font to use """ FontName wdth {'name': 'Width', 'minValue': 100.0, 'maxValue': 800.0, 'defaultValue': 100.0} wght {'name': 'Weight', 'minValue': 150.0, 'maxValue': 800.0, 'defaultValue': 150.0} slnt {'name': 'Slant', 'minValue': 0.0, 'maxValue': 14.0, 'defaultValue': 0.0} """ min_val_wdth = listFontVariations('FontName')['wdth']['minValue'] max_val_wdth = listFontVariations('FontName')['wdth']['maxValue'] min_val_wght = listFontVariations('FontName')['wght']['minValue'] max_val_wght = listFontVariations('FontName')['wght']['maxValue'] min_val_slnt = listFontVariations('FontName')['slnt']['minValue'] max_val_slnt = listFontVariations('FontName')['slnt']['maxValue'] def ranLetters(): # loop over the width of the image newPage(w, h) fill(1) rect(0, 0, w, h) for x in range(0, w, s): # loop of the height of the image for y in range(0, h, s): color = pix_cols[(x, y)] if color: txt = random.choice(chars) font("FontName") fontSize(s) fontVariations(wdth = randint(min_val_wdth, max_val_wdth), wght = randint(min_val_wght, max_val_wght)) r, g, b, a = color # set the color fill(r, g, b, a) # draw some text text(txt, (x, y), align='center') for i in range(5): ranLetters() saveImage("~/Desktop/name.gif", imageResolution=144)
• 

  SOLVED Radial animation
  animation • 4 Oct 2019, 03:50 • eduairet   16 Oct 2019, 02:18

  5
  0
  Votes
  5
  Posts
  461
  Views

  16 Oct 2019, 02:18

  @gferreira wow, this is huge!!! thank you again
• 

  SOLVED Output text
  text formatting • 30 Aug 2019, 03:19 • eduairet   24 Sept 2019, 23:13

  9
  0
  Votes
  9
  Posts
  500
  Views

  24 Sept 2019, 23:13

  @gferreira thanks, it worked, I'm coming with some new exercises. Cheers.
• 

  SOLVED Grid
  grid layout • 22 Aug 2019, 04:15 • eduairet   22 Aug 2019, 23:46

  3
  0
  Votes
  3
  Posts
  327
  Views

  22 Aug 2019, 23:46

  @gferreira said in Grid: w = (width() - gutter * (cols + 1)) / cols h = (height() - gutter * (rows + 1)) / rows Thank you very much, it worked way much better, I also tried to add a margin feature that worked well so now I can design over the grid size(1000, 1000) cols = 3 rows = 3 gutter = 12 #Margin mTop = 10 - gutter mBottom = 20 - gutter mLeft = 10 - gutter mRight = 10 - gutter w = (width() - gutter * (cols + 1)) / cols - ((mRight + mLeft) / cols) h = (height() - gutter * (rows + 1)) / rows - ((mTop + mBottom) / rows) fill(None) strokeWidth(1) stroke(0, 1, 1) for col in range(cols): for row in range(rows): x = gutter + col * (w + gutter) y = gutter + row * (h + gutter) rect(x + mLeft, y + mBottom, w, h)
• 

  Python For Designers online book
  getting started • 30 Jun 2019, 16:51 • justvanrossum   30 Jun 2019, 16:51

  1
  2
  Votes
  1
  Posts
  510
  Views

  No one has replied

• 

  Here's a good tutorial for people just starting out with DrawBot
  getting started • 30 Jun 2019, 16:48 • justvanrossum   30 Jun 2019, 16:48

  1
  1
  Votes
  1
  Posts
  495
  Views

  No one has replied