How to mirror/flip a object?
-
Hello World, i have a struggle on a very simple task - how can i mirror/flip a bezier path object (or a text) horizontal and vertical?
thanks in advance
-
My goal is to draw a shadow, so I have to mirror the letter. (i achieved scaling, skewing, but not flipping)
newPage(1000, 1000) font('Skia') fontSize(600) fill(0.79, 0.52, 0.67) text('A', (300, 200)) fill(0) scale(x=1, y=0.05) text('A', (300, 800))
-
Did you test something like negative scaling?
scale(-1)
scale(1, 1/3)
-
Hello @ricardov Yes, i tried negative scaling, but it gives no result. It gives no error, but there is also nothing happening...
-
the mirrored drawing is probably happening outside your canvas. keep in mind that every transformation (scale, skew, rotation, etc) is always starting from the origin. so a mirroring from the default origin (left, bottom corner) will be to the left or below your canvas. see the example below with a shifted origin.
pw = 1000 ph = 400 txt = "SHADE" newPage(pw, ph) translate(0, 160) # shift the origin up a bit fontSize(300) text(txt, (pw/2, 0), align = 'center') scale(x=1, y=-.5) # the mirroring text(txt, (pw/2, 0), align = 'center')
-
Hey @jo - thank you very much! That was the issue - damn, i am still in trouble with the the basics. Actually i am pretty stoked to have you here responding, because i am messing around with your code... i`d love to ad different lissajous curves to my blobbish letters, and i hoped changing the numbers (a = 2 # 2, 3, 4 are decent values) would do the trick - but it does not really change that much - sometimes even the loop is not longer working. Would you mind having a look at my codemess? (i mean, your code - and my mess )
-
# -------------------------- # imports import sys sys.path.append("..") from helper_functions import * # -------------------------- # settings p_w, p_h = 1000, 1000 margin = 40 dia = 4 steps = 600 # lissajous values a = 2 # 2, 3, 4 are decent values b = a + 1 delta = 0 # pi/2, pi/3, pi/4 f_name = "habaroll8" axes = ['wght', 'wdth'] # -------- axis1_min = listFontVariations(f_name)[axes[0]]['minValue'] axis1_def = listFontVariations(f_name)[axes[0]]['defaultValue'] axis1_max = listFontVariations(f_name)[axes[0]]['maxValue'] axis2_min = listFontVariations(f_name)[axes[1]]['minValue'] axis2_def = listFontVariations(f_name)[axes[1]]['defaultValue'] axis2_max = listFontVariations(f_name)[axes[1]]['maxValue'] axis_w = p_w - 2 * margin axis_h = p_h - 2 * margin def_x = map_val(axis1_def, axis1_min, axis1_max, 0, axis_w) def_y = map_val(axis2_def, axis2_min, axis2_max, 0, axis_h) # -------------------------- # functions def a_page(): newPage(p_w,p_h) fill(1) rect(0, 0, p_w, p_h) translate(margin, margin) fill(0.92, 0.90, 0.87) rect(0, 0, axis_w, axis_h) font(f_name) fontSize(820 ) # -------------------------- # Drawings pts = [] for st in range(steps): # newDrawing() a_page() angle = 2 * pi / steps * st x = .5 + .5 * sin( a * angle + delta ) y = .5 + .5 * sin( b * angle ) curr_axis1 = ip(axis1_min + 20, axis1_max - 20, x) curr_axis2 = ip(axis2_min + 20, axis2_max - 20, y) var_values = { axes[0] : curr_axis1, axes[1] : curr_axis2 } fontVariations(**var_values) #black ring to avoid the background "bleed through" fill(None) stroke(0) strokeWidth(60) oval(125, 95, 700, 700) # the black part (fake 3D) stroke(0) strokeWidth(4) fill(0) text('A', (axis_w/2, axis_h/8), align = 'center') # the pink blob letter stroke(None) fill(0.79, 0.52, 0.67) scale(x=1.25, y=1.25) translate(x=-95, y=-80) text('A', (axis_w/2, axis_h/8), align = 'center') # the blob shadow (would be great to have the shadow behind the pink blob!) fill(0) translate(-120, 110) scale(x=0.9, y=-.05) skew(25, 0) rotate(-3) text('A', (axis_w/2, axis_h/8), align = 'center') saveImage('lissajous_var_test12.gif')
-
@habakuk nice to read that you can use some of the code!
about the lissajous: I am not sure what exactly you want to achieve. the german wiki entry has vizualisations for a few values. you might want to change the value for
a
andb
and alsodelta
, eg:a = 1 b = 3 delta = pi/4
I do not have your variable font so I cannot test this but I was wondering why you added the plus and minus 20 here:
curr_axis1 = ip(axis1_min + 20, axis1_max - 20, x) curr_axis2 = ip(axis2_min + 20, axis2_max - 20, y)
lastly if you want to draw the shadow in the back, just put the lines of code before you call the pink drawing. you might then use the
savedState()
so draw it without the mirroring.good luck, jo!
-
Hallo @jo thanks alot - at the moment i use the lissajus only to create different nice looking loops. I changed the values as you suggested and of course it is working now and delivers a new nice looking loop.
I`d love to make some more loops with more "natural, subtle and slow" movements. I saw your great visualisations of the different variable font movements and hoped to create a custom path to do so - but i failed...if you like to play around with my very first 5 letter variable font (HABKU) you are very welcome. http://habaland.ch/images/habaroll8GX.ttf
i added the the plus and minus to avoid the font doing the whole move to the min and max, because the backgraound would be visible then. (but most likely i created only a mess ) and by the way, i hate the black circle i had to ad "behind the scene" - id love o have a cleaner solution.
...at the moment i am trying to figure out where to append the savedState() without messing everything up...
greetings from Bern