You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Below I have copy and pasted the code for 6 files of the test project.
You just have to copy and paste them into new files with the correct extensions
Put them all in the same folder and add the latest version of p5.js
Run the project using a local server
On windows you should see a flashing white on the screen but on the latest version of Safari on MacOSX it wont work
That is due to the setUniform not updating the shader beyond the first call.
Imporant, the test code works on the latest version of safari if we use version 1.5 of p5js so something must have changed between that version and the current p5js version related to setUniform. So far I haven't been able to find it in the code though.
Snippet:
// Paste your code here :)//////////////////////////////////////////////////////////////////////////vs.vert///////////////////////////////////////////////////////////////////////////////
#ifdefGL_ESprecisionmediumpfloat;
#endifattributevec3aPosition;attributevec2aTexCoord;varyingvec2vTexCoord;voidmain(){vTexCoord=aTexCoord;vec4positionVec4=vec4(aPosition,1.0);// scale the rect by two, and move it to the center of the screenpositionVec4.xy=positionVec4.xy*2.0-1.0;gl_Position=positionVec4;}//////////////////////////////////////////////////////////////////////////fs.frag////////////////////////////////////////////////////////////////////////////precisionmediumpfloat;uniformvec3myColor;varyingvec2vTexCoord;uniformvec2iResolution;uniformfloatiTime;uniformsampler2DiChannel0;uniformsampler2DiChannel1;uniformvec3iMouse;uniformvec2prevMouse;uniformvec4paintColor;//helpful function to match shadertoy
#definetexturetexture2D
#definefragColorgl_FragColor
#definefragCoord(vec2(vTexCoord.x,1.-vTexCoord.y)*iResolution)vec2mouse;constfloatspeed=.01;constfloatscale=0.8;constfloatfalloff=2.;//END OF NOISE STUFFvoidmain(){// coordinatesfragColor=vec4(0.0);vec2uv=(fragCoord.xy-iResolution.xy/2.)/iResolution.y;mouse=(iMouse.xy-iResolution.xy*0.5)/iResolution.y;//You have to do the same thing to previous mouse//as you do to mouse!floatx=fract(iTime*0.01);fragColor=vec4(vec3(x),1);}//////////////////////////////////////////////////////////////////////////////////////////vs2.vert//////////////////////////////////////////////////////////////////////////////////////////
#ifdefGL_ESprecisionmediumpfloat;
#endifattributevec3aPosition;attributevec2aTexCoord;varyingvec2vTexCoord;voidmain(){vTexCoord=aTexCoord;vec4positionVec4=vec4(aPosition,1.0);// scale the rect by two, and move it to the center of the screenpositionVec4.xy=positionVec4.xy*2.0-1.0;gl_Position=positionVec4;}//////////////////////////////////////////////////////////////////////////////////////////fs2.frag//////////////////////////////////////////////////////////////////////////////////////////precisionmediumpfloat;uniformvec3myColor;varyingvec2vTexCoord;uniformvec2iResolution;uniformfloatiTime;uniformsampler2DiChannel0;
#definetexturetexture2D
#definefragColorgl_FragColor
#definefragCoord(vTexCoord*iResolution)
#defineT(uv)texture(iChannel0,uv).a//needs to be a nowvoidmain(){vec3 color =vec3(.0);// coordinatesvec2uv=fragCoord.xy/iResolution.xy;// vec3 dither = texture(iChannel1, fragCoord.xy / 1024.).rgb;// fragColor = vec4(color, 1);fragColor=vec4(texture(iChannel0,vTexCoord).rgb,1);}///////////////////////////////////////////////////////////////////////////////////////////sketch.js///////////////////////////////////////////////////////////////////////////////////////////this variable will hold our shader objectletshader1;letshader2;letbuffer;letfeedbackBuffer;letimgBuffer;letimg;letpicker;letmousePressed;functionpreload(){// a shader is composed of two parts, a vertex shader, and a fragment shader// the vertex shader prepares the vertices and geometry to be drawn// the fragment shader renders the actual pixel colors// loadShader() is asynchronous so it needs to be in preload// loadShader() first takes the filename of a vertex shader, and then a frag shader// these file types are usually .vert and .frag, but you can actually use anything. .glsl is another common oneshader1=loadShader('vs.vert','fs.frag');shader2=loadShader('vs2.vert','fs2.frag');// img = loadImage('assets/noiseTextureColor.png');}functionsetup(){// shaders require WEBGL mode to workcreateCanvas(windowWidth,windowHeight,WEBGL);buffer=createGraphics(windowWidth,windowHeight,WEBGL);imgBuffer=createGraphics(windowWidth,windowHeight,WEBGL);feedbackBuffer=createGraphics(windowWidth,windowHeight);picker=createColorPicker('deeppink');picker.position(width-220,height-120);picker.size(200,100);picker.mouseOver(disablePaint);picker.draggable();noStroke();}functiondraw(){//"shader"without any prefix is the main image's shaderwidth=windowWidth;height=windowHeight;if(mouseIsPressed==true){mousePressed=1.;}else{mousePressed=0.;}letc=picker.color().levels;buffer.clear();buffer.shader(shader1);shader1.setUniform('iResolution',[width,height]);shader1.setUniform('iTime',frameCount);shader1.setUniform('iChannel0',feedbackBuffer);shader1.setUniform('paintColor',c);shader1.setUniform('iMouse',[mouseX,height-mouseY,mousePressed]);shader1.setUniform('prevMouse',[pmouseX,height-pmouseY]);buffer.rect(0,0,width,height);feedbackBuffer.clear();feedbackBuffer.image(buffer,0,0,width,height);shader(shader2);shader2.setUniform('iResolution',[width,height]);shader2.setUniform('iTime',frameCount*0.05);shader2.setUniform('iChannel0',buffer);rect(0,0,width,height);}functionwindowResized(){resizeCanvas(windowWidth,windowHeight);}functiondisablePaint(){mousePressed=0;}//////////////////////////////////////////////////////////////////////////////////////////////////////index.html/////////////////////////////////////////////////////////////////////////////////////////////////////////<!DOCTYPEhtml><htmllang="en"><head><!--Includep5.jslibrary--><scriptsrc="p5.js"></script><scriptsrc="sketch.js"></script><metacharset="utf-8"/></head><body></body></html>
The text was updated successfully, but these errors were encountered:
Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!
I just checked on safari 17.2.1 (an earlier version, I haven't updated my OS in a few months) and it seems to work there. I'll try to update when I get some time, but in the mean time, do you see any WebGL errors or warnings in the developer console when you run this?
I just checked on safari 17.2.1 (an earlier version, I haven't updated my OS in a few months) and it seems to work there. I'll try to update when I get some time, but in the mean time, do you see any WebGL errors or warnings in the developer console when you run this?
Hi thanks for looking into this and for more data. To answer your question no we didn't see any webGL errors.
Not yet unfortunately! Things have been pretty busy for me with work so I haven't had the time to update my mac (and deal with the possible package issues that comes with that haha.)
In the mean time, some next steps could maybe be to try to find a minimal example that reproduces the behaviour? e.g. if you have a simple shader with just one custom uniform, does that also still not update in the draw function?
Most appropriate sub-area of p5.js?
p5.js version
v1.9.3
Web browser and version
Safari 17.4.1
Operating system
MacOSX
Steps to reproduce this
Steps:
Snippet:
The text was updated successfully, but these errors were encountered: