naar de zelf gemaakte functie mixen in fulscreen
met muisbewegingen en muiswiel kan je de boxen verplaatsen
naar de shader "mixen" als data-fragment string in een html bestand
stappenplan
1) In glslEditor de fragment shader schets gemaakt en getest. Zie ook de shader als datafragment string in een html bestand.
2) De shader omgezet naar een hydra functie de code komt dus in SetFunction te staan
3) De hydra functie in de Hydra web editor geplaatst en getest
setFunction natuurlijk weglaten. De hydra functie moet onder regel 2165, "module.exports = () => [" , komen te staan.
5) De functie, die nu in hydra-synth.js, staat uitgetest in P5LIVE-OFLINE
Deze mixfactor bijv 10 maken geeft ook ,voor mij, onbegrijpelijke effecten.
//aanmaken hydra canvas en init
let libs = ['includes/libs/hydra-synth.js'];
let hc = document.createElement('canvas');
hc.width = 640; hc.height = 360;
let hydra = new Hydra({detectAudio: false,canvas: hc});
let n;
let pg; //in pg komt de hydra texture
//begin hydra code
mixen(30,11.)
.kaleid(5,3,5)
.out()
//eind hydra code
function setup(){
createCanvas(windowWidth, windowHeight, WEBGL);
buttonD = createButton('d');
buttonD.position(20,20);buttonD.style('width','20px');
buttonD.mouseClicked(buttonDAction);
n = height/10;
pg = createGraphics(hc.width, hc.height);
noStroke();
}
function draw(){
// pg.clear();
pg.drawingContext.drawImage(hc, 0 ,0, pg.width, pg.height);
orbitControl(5);
push();
translate(4*n,0);
rotateX(radians(frameCount));
rotateY(radians(frameCount));
box(5*n);
pop();
push();
translate(-4*n,0);
rotateX(radians(frameCount));
rotateY(radians(frameCount));
box(5*n);
pop();
texture(pg);
plane(width, height);//zodat de hydra texture het gehele scherm vult
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function buttonDAction(){save('mixen_boxen.png');}
setFunction({
name: 'mixen', type: 'src',
inputs:[
{
type: 'float',
name: 'freq',
default: 20.,
},
{
type: 'float',
name: 'mixxy',
default: 0.5,
}
],
glsl:
'vec3 colorA = sin((_st.x+time*vec3(0.100,-0.100,0.100))*freq);'+
'vec3 colorB =sin((_st.y+time*vec3(0.100, 0.100,-0.100))*freq);'+
'vec3 color = vec3(0.0);color = mix(colorA,colorB,mixxy);'+
'return vec4(color,1.);'})
mixen(20,0.5).kaleid(10,3.5).out()
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 colorA = sin((st.x+u_time*vec3(0.100,-0.100,0.100))*20.);
vec3 colorB = sin((st.y+u_time*vec3(0.100, 0.100,-0.100))*20.);
vec3 color = vec3(0.0);
color = mix(colorA, colorB ,0.580);
gl_FragColor = vec4(color,1.0);
}
<html>
<script type="text/javascript" src="../lib/GlslCanvas.js"></script>
<body>
<canvas class="glslCanvas" data-fragment="
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 colorA = sin((st.x+u_time*vec3(0.100,-0.100,0.100))*20.);
vec3 colorB = sin((st.y+u_time*vec3(0.100, 0.100,-0.100))*20.);
vec3 color = vec3(0.0);
color = mix(colorA, colorB ,10.0);
gl_FragColor = vec4(color,1.0);
}
"
width="600" height="600"> </canvas>
</body>
</html>