negen simpele visuals met hydra

negen simpele visuals met hydra. terug naar de inleiding

negen simpele visuals met hydra in fullscreen

De hydra code regels (regel 60, 63, 66, 69, 72, 75 en 76 , 79 en 80 , 81 , 83 en 84, 87 en 88) In de Hydra web editor plakken

Zo kan je met de code experimenten. zie ook de lijst van Hydra functies

In de editor de bestaande visual wissen door op het prullenbakje te klikken

De code in de editor plakken

De visual starten door op het run knopje te klikken

In de Hydra web editor moet je, na veranderen van de code, telkens op het run knopje klikken

Dit is niet nodig in de P5.LIVE editor deze werkt real time met hydra en p5.js

De code voor een p5.js hydra visual staat onder deze schets

Deze code kan je in de P5.LIVE web editor plakken

 
////aanmaken hydra canvas en init
let hc = document.createElement('canvas');
hc.width = 640;
hc.height = 360;
let hydra = new Hydra({detectAudio: false, canvas: hc});
let pg //in pg komt de hydra texture
function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
  background(0);
  pg = createGraphics(hc.width, hc.height);
  noStroke();
  buttonR = createButton('reset');
  buttonR.position(20,40);buttonR.style('width','70px');
  buttonR.mouseClicked(buttonRAction);
  button0 = createButton('visual 0');
  button0.position(20,70);button0.style('width','70px');
  button0.mouseClicked(button0Action);
  button1 = createButton('visual 1');
  button1.position(20,100);button1.style('width','70px');
  button1.mouseClicked(button1Action);
  button2 = createButton('visual 2');
  button2.position(20,130);button2.style('width','70px');
  button2.mouseClicked(button2Action);
  button3 = createButton('visual 3');
  button3.position(20,160);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  button4 = createButton('visual 4');
  button4.position(20,190);button4.style('width','70px');
  button4.mouseClicked(button4Action);
  button5 = createButton('visual 5');
  button5.position(20,220);button5.style('width','70px');
  button5.mouseClicked(button5Action);
  button6 = createButton('visual 6');
  button6.position(20,250);button6.style('width','70px');
  button6.mouseClicked(button6Action);
  button7 = createButton('visual 7');
  button7.position(20,280);button7.style('width','70px');
  button7.mouseClicked(button7Action);
  button8 = createButton('visual 8');
  button8.position(20,310);button8.style('width','70px');
  button8.mouseClicked(button8Action);
  buttonD = createButton('downloaden');
  buttonD.position(20,340);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
}
function draw(){
  pg.clear();
  pg.drawingContext.drawImage(hc, 0 ,0, pg.width, pg.height)
  texture(pg)
  plane(width, height)//zodat de hydra texture het gehele scherm vult
}
 
function buttonRAction(){setup();}
// start hydra code
src(o0).modulateHue(src(o0).scale(1.01),1)
       .layer(osc(4,0.5,2).mask(shape(8,0.5,0.001))).out(o0);
 
function button0Action(){
  osc(5,-0.126,0.514).rotate(0,0.2).kaleid().repeat().out();
}
function button1Action(){
  osc(15,-0.126,0.514).repeat(4).rotate(0,0.2).kaleid(5).out();
}
function button2Action(){
  osc(10,0.126,1.5).repeat(2).rotate(0,0.2).kaleid().pixelate(10, 10).out();
}
function button3Action(){
  gradient(1,2,0).mask(voronoi(),3,0.5).invert([0,0.01]).out(o0);
}
function button4Action(){
  osc(20,0,2.5).saturate(() => Math.sin(time)*10).rotate(()=>time%360).kaleid(5).out(o0);
}
function button5Action(){
  shape(8,0.9).mult(osc(3,0.5,1))
 .modulateRepeat(osc(10), 3.0, 3.0, 0.5, 0.5).kaleid(5).out(o0);
}
function button6Action(){
  src(o0).modulateHue(src(o0).scale(1.01),1)
 .layer(osc(4,0.5,2).mask(shape(8,0.5,0.001))).out(o0);
}
function button7Action(){
  osc([10,30,60].fast(1),0.1,1.5)
 .mask(osc(20,0.1).rotate(25)).repeatY(20).kaleid(26).out();
}
function button8Action(){
  gradient(5).repeat(50,50).kaleid([3,5,7,9].fast(0.5))
 .modulateScale(osc(4,-0.5,0).kaleid(50).scale(0.5),15,0).out(o0);
}
//stop hydra code
function buttonDAction(){save('simpele_Hydra.png');}

De code voor een p5.js hydra visual

Deze code kan je in de P5.LIVE web editor plakken.

De code kan dan real time worden verandert.

In regel 2 staat hydra-synth.js in de map includes/libs. Dit is dus de map waarin de online editor naar "hydra-synth.js zoekt.

Experimenteer met hydra's door de hydra code tussen regel 13 en 20 te vervangen door de voorbeeld code in Hydra functions

 
let libs = ['includes/libs/hydra-synth.js'];
//aanmaken hydra canvas en init
let hc = document.createElement('canvas');
hc.width = 640;
hc.height = 360;
let hydra = new Hydra({
    detectAudio: false,
    canvas: hc
  });
let pg; //in pg komt de hydra texture
//begin hydra code
gradient(5)
     .repeat(50,50)
     .kaleid([3,5,7,9]
          .fast(0.5))
.modulateScale(osc(4,-0.5,0)
          .kaleid(50)
          .scale(0.5),15,0)
.out(o0);
//eind hydra code
function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
  background(0);
  pg = createGraphics(hc.width, hc.height);
  noStroke();
}
function draw(){
//  pg.clear();
  pg.drawingContext.drawImage(hc, 0 ,0, pg.width, pg.height);
  texture(pg);
  plane(width, height);//zodat de hydra texture het gehele scherm vult
}

Flevopink