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.
-
@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
-
@stephen yes, but no so easy, one language more to learn , I become too old for this stuff π’
-
@stephen You only π need to (find a tool to) convert SVG into GLSL language of Shader
-
@cvp
never too old π ive been tryingbto familierise myself with as many as i can. so far i have worked with:- C# .net
- C
- C++
- java
- java script
- unreal script (language died)
- html
- css
- php
- sourceScript (Wraps C++ for source engine by valve)
- python
and currently objc, first through objc_utils then ObjC its self.
next will be gfx shadersc# i got pretty well in tuned with but the rest i could use some more learning. i did notice they all, for the most part, are extremly close to eachother just dif rules
-
@stephen I've worked during 40 years at IBM, mainly on main frame, thus a lot of languages but not the same as you, like Assembler, FORTRAN, COBOL, PL/1, APL, ... before Basic, VB, C, C++ and I surely forget some...
-
@cvp thats awesome! all my study has been for recreational game development. mever had career writing