Welcome!
This is the community forum for my apps Pythonista and Editorial.
For individual support questions, you can also send an email. If you have a very short question or just want to say hello β I'm @olemoritz on Twitter.
need some criticized input please.
-
@Drizzel said:
Did you draw them on an iOS device? If yes, which app did you use? I'm rather intrigued because Vectornator (what I'm using) is good, but certainly not perfect.
on iPad Air2
sketch
Draw
vectornatormost of it is hand painted and with Draw you can use brushes to draw vectors but vectornator give beter control of the vertices.. and the export scaling helps alot
y process for drawing usually goes...
Adobe Sketch β AdobeDraw
for base structure
Adobe Draw β Adobe Sketch
for detailing
Adobe Sketch β Vectornator
for finalizing and export.you can also save to creative cloud on vectornator to combine all three for pretty good workflow
-
@stephen said:
dos this preserve alpha?
No idea at all. I just thought a little time to find a solution svg -> ui.Image
-
@cvp thank you! when i get back to the animation system ill rewrite the texture cache and see if i can get that to work
-
@cvp said:
@stephen said:
my problem with that is i need them to be scene.Textures..
You can convert a sgv to an ui.Image via
import os import ui w = ui.WebView() fpath = os.path.expanduser('~/Documents/test.svg') w.load_url('file://'+fpath) w.present('sheet') with ui.ImageContext(w.width, w.height) as ctx: w.draw_snapshot() ui_image = ctx.get_image() ui_image.show()
all i get is a white rect from this π
-
@stephen For me it is ok for a static svg but white rectangle if animated svg, what you did not yet ask at this moment π
-
-
-
@stephen increase the frame and it is ok
import os import ui w = ui.WebView() w.frame = (0,0,500,500) fpath = os.path.expanduser('~/Documents/svg-test.svg') #fpath = os.path.expanduser('~/Documents/test.svg') w.load_url('file://'+fpath) w.present('sheet') with ui.ImageContext(w.width, w.height) as ctx: w.draw_snapshot() ui_image = ctx.get_image() ui_image.show()
-
awesome didnt think about the frame. but sadely i seem to lose the alpha transparency. im sure i can go through the process of adding one but at that point id have to change format and then i lose the perks of vector graphics. plus id have to run the add alpha process to a library of images for the game and that seemsnlike a bad idea lol. thank you tho for checking it out for me π
-
@stephen transparency works
import os import ui v = ui.View() v.frame = (0,0,500,250) v.name = 'with or without opacity=0' w1 = ui.WebView() w1.frame = (0,0,250,250) html = ''' <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="304" height="290"> <path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z" fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round"/> </svg> ''' w1.load_html(html) v.add_subview(w1) w2 = ui.WebView() w2.frame = (250,0,250,250) html = ''' <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="304" height="290"> <path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z" fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round" fill-opacity="0"/> </svg> ''' w2.load_html(html) v.add_subview(w2) v.present('sheet') #with ui.ImageContext(w.width, w.height) as ctx: # w.draw_snapshot() # ui_image = ctx.get_image() # ui_image.show()
-
@cvp ya you are creating the opacity programaticaly (if thats the right term here lol ) where in my image it is solid where it should have a 50% alpha that i set in third party editor.
-
@stephen I don't know anything about it but it is only to show that WebView supports opacity in static svg...
-
@stephen how are sure that your file test-svg.svg is half transparent?
-
gotcha thank you @cvp π
-
@stephen sorry, I don't understand What you mean
-
@cvp
its ok buddy i had done some research before (you probably know by now how i love research lol) and i couldnt find a way to use svg in scene. im sure there is an objc way but im not familier enough there lol -
@stephen I just found that WebView supports animated svg, try this
import os import ui w = ui.WebView() w.frame = (0,0,500,500) #fpath = os.path.expanduser('~/Documents/svg-test.svg') #w.load_url('file://'+fpath) html = ''' <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300"> <rect class="mouse" x="0" y="0" width="800" height="300"/> <polygon class="diamondTu tulip" points="400, 280, 310, 150, 400, 20, 490, 150"/> <style> .mouse { fill: #E5E4E3; } .tulip { fill: #CC2954; } .diamondTu { animation-name: diamondTurns; animation-duration: 4s; animation-iteration-count: infinite; transform-origin: 50% 50%; } @keyframes diamondTurns { 0% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } </style> </svg ''' w.load_html(html) w.present('sheet') #with ui.ImageContext(w.width, w.height) as ctx: # w.draw_snapshot() # ui_image = ctx.get_image() # ui_image.show()
-
@stephen said:
i couldnt find a way to use svg in scene. im sure there is an objc way
I think that I had read that SKTexture does not support svg π’
-
@stephen Perhpas could you use Shader, as here (try it)
Γdit: sorry, it needs a/your test.jpg in the folder of the script
# shader example from Pythonista doc about Scene.Shader from scene import * import os # RIPPLE GLSL shader program ripple_shader1 = ''' precision highp float; varying vec2 v_tex_coord; // texture coordinate // These uniforms are set automatically: uniform sampler2D u_texture; // input image uniform float u_time; // timer uniform vec2 u_sprite_size; // This uniform is set in response to touch events: uniform vec2 u_offset; void main(void) { vec2 p = -1.0 + 2.0 * v_tex_coord + (u_offset / u_sprite_size * 2.0); float len = length(p); vec2 uv = v_tex_coord + (p/len) * 1.5 * cos(len*50.0 - u_time*10.0) * 0.03; gl_FragColor = texture2D(u_texture,uv); // fragment shader color } ''' # SPHERE EFFECT GLSL shader program ripple_shader2 = ''' precision highp float; varying vec2 v_tex_coord; // texture coordinate uniform float u_time; // time in seconds uniform sampler2D tex0; // scene buffer void main(void) { vec2 tc = v_tex_coord; vec2 p = -1.0 + 2.0 * tc; float r = dot(p,p); if (r > 1.0) discard; float f = (1.0-sqrt(1.0-r))/(r); vec2 uv; uv.x = p.x*f + u_time; uv.y = p.y*f + u_time; gl_FragColor = vec4(texture2D(tex0,uv).xyz, 1.0); } ''' # EDGE DETECTION shader program ripple_shader3 = ''' precision highp float; varying vec2 v_tex_coord; // texture coordinate uniform vec2 imageResolution; uniform sampler2D u_texture; void main() { vec2 pos = vec2(v_tex_coord.x, 1.0 - v_tex_coord.y); vec2 onePixel = vec2(1, 1) / imageResolution; vec4 color = vec4(0); mat3 edgeDetectionKernel = mat3( -1, -1, -1, -1, 8, -1, -1, -1, -1 ); for(int i = 0; i < 3; i++) { for(int j = 0; j < 3; j++) { vec2 samplePos = pos + vec2(i - 1 , j - 1) * onePixel; vec4 sampleColor = texture2D(u_texture, samplePos); sampleColor *= edgeDetectionKernel[i][j]; color += sampleColor; } } color.a = 1.0; gl_FragColor = color; } ''' # EMBOSS shader program ripple_shader4 = ''' precision highp float; varying vec2 v_tex_coord; uniform sampler2D u_texture; uniform float u_time; // time in seconds void main() { // 2 vec2 onePixel = vec2(1.0 / 480.0, 1.0 / 320.0); // 3 vec2 texCoord = v_tex_coord; // 4 vec4 color; color.rgb = vec3(0.5); color -= texture2D(u_texture, texCoord - onePixel) * 5.0; //*u_time; color += texture2D(u_texture, texCoord + onePixel) * 5.0; // 5 color.rgb = vec3((color.r + color.g + color.b) / 3.0); gl_FragColor = vec4(color.rgb, 1); } ''' # MIRROR EFFECT GLSL shader program ripple_shader5 = ''' precision highp float; varying vec2 v_tex_coord; uniform sampler2D texture; uniform vec2 u_sprite_size; uniform float u_time; // time in seconds void main() { vec2 uv = v_tex_coord; float sepoffset = 0.005*cos(u_time*3.0); if (uv.y > 0.5)// + sepoffset)// is air - no reflection or effect { gl_FragColor = texture2D(texture, vec2(uv.x, uv.y)); } else { // Compute the mirror effect. float xoffset = 0.005*cos(u_time*3.0+200.0*uv.y); float yoffset = ((0.3 - uv.y)/0.3) * 0.05*(1.0+cos(u_time*3.0+50.0*uv.y)); vec4 color = texture2D(texture, vec2(uv.x+xoffset , 1.0 - uv.y+ yoffset)); gl_FragColor = color; } } ''' class MyScene (Scene): def setup(self): self.sprite = SpriteNode('test.jpg', parent=self) self.sprite.shader = Shader(ripple_shader1) self.did_change_size() def did_change_size(self): # Center the image: self.sprite.position = self.size/2 def touch_began(self, touch): self.set_ripple_center(touch) def touch_moved(self, touch): self.set_ripple_center(touch) def set_ripple_center(self, touch): # Center the ripple effect on the touch location by setting the `u_offset` shader uniform: dx, dy = self.sprite.position - touch.location self.sprite.shader.set_uniform('u_offset', (dx, dy)) run(MyScene())
-
@cvp haha thats pretty awesome! i should look into shaders im sure some post processing will do some good haha