negen hydra webcam animaties. terug naar de inleiding
de negen hydra webcam animaties in fullscreen
Het kaleidoscopisch effect kan je met de sliders veranderen. De veranderingen worden actief na klikken op het knopje.
Webcam animatie "8" is de start animatie.
Onder deze schets staat een webcam animatie zonder de knopjes
Deze animatie 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 n;
let k1; let slider1; let mk3; let slider3;
let k6; let slider6; let k7; let slider7;
let mr5; let slider5; let bAan = true; let sAan = false;
let hydra = new Hydra({detectAudio: false, canvas: hc});
let pg //in pg komt de hydra texture
function setup(){
createCanvas(windowWidth, windowHeight, WEBGL);
n = height/10;
background(0);
noStroke();
pg = createGraphics(hc.width, hc.height);
//start hydra code
s0.initCam(); src(s0) .modulateRepeat(voronoi(10,0.3,0.5).scrollX(1,0.03),0.4)
.modulateScale(osc(1,0.5),0.7).repeat(2,2).kaleid(3).colorama(0.01)
.blend(s0,0.5).saturate( () => Math.sin(time) * 10) .out(o2)
render(o2)
//einde hydra code
slider1 = createSlider(2, 20, 2, 1);
slider1.position(40, 100);
slider1.style('width', '40px');
slider3 = createSlider(2, 20, 5, 1);
slider3.position(40, 160);
slider3.style('width', '40px');
slider5 = createSlider(2, 20, 5, 1);
slider5.position(40, 220);
slider5.style('width', '40px');
slider6 = createSlider(1, 10, 5, 1);
slider6.position(40, 250);
slider6.style('width', '40px');
slider7 = createSlider(1, 10, 5, 1);
slider7.position(40, 280);
slider7.style('width', '40px');
button0 = createButton('0');
button0.position(20,70);button0.style('width','20px');
button0.mouseClicked(button0Action);
button1 = createButton('1');
button1.position(20,100);button1.style('width','20px');
button1.mouseClicked(button1Action);
button2 = createButton('2');
button2.position(20,130);button2.style('width','20px');
button2.mouseClicked(button2Action);
button3 = createButton('3');
button3.position(20,160);button3.style('width','20px');
button3.mouseClicked(button3Action);
button4 = createButton('4');
button4.position(20,190);button4.style('width','20px');
button4.mouseClicked(button4Action);
button5 = createButton('5');
button5.position(20,220);button5.style('width','20px');
button5.mouseClicked(button5Action);
button6 = createButton('6');
button6.position(20,250);button6.style('width','20px');
button6.mouseClicked(button6Action);
button7 = createButton('7');
button7.position(20,280);button7.style('width','20px');
button7.mouseClicked(button7Action);
button8 = createButton('8');
button8.position(20,310);button8.style('width','20px');
button8.mouseClicked(button8Action);
buttonB = createButton('box aan/uit');
buttonB.position(20,340);buttonB.style('width','110px');
buttonB.mouseClicked(buttonBAction);
buttonS = createButton('sphere aan/uit');
buttonS.position(20,370);buttonS.style('width','110px');
buttonS.mouseClicked(buttonSAction);
buttonD = createButton('Download');
buttonD.position(20,400);buttonD.style('width','110px');
buttonD.mouseClicked(buttonDAction);
}
function draw(){
k1 = slider1.value();
mk3 = slider3.value();
mr5 = slider5.value();
k6 = slider6.value();
k7 = slider7.value();
if (sAan) {sphere(4*n)} else { };
if (bAan) {box(5*n)} else { };
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 button0Action(){
s0.initCam(); src(s0) .colorama(1).out(o2)
render(o2)
}
function button1Action(){
s0.initCam(); src(s0) .kaleid(k1).out(o2)
render(o2)
}
function button2Action(){
s0.initCam(); src(s0) .modulate(osc(20,0.1,0.5),0.4).out(o2)
render(o2)
}
function button3Action(){
s0.initCam(); src(s0) .modulateKaleid(osc(3,0.1,0.5),mk3).out(o2)
render(o2)
}
function button4Action(){
s0.initCam(); src(s0) .pixelate(() => (Math.sin(time/2.)*200),(Math.sin(time/2) * 200)).out(o2)
render(o2)
}
function button5Action(){
s0.initCam(); src(s0) .modulateRepeat(voronoi(mr5,0.3,0.5),2.4).out(o2)
render(o2)
}
function button6Action(){
s0.initCam(); src(s0). modulateRepeat(voronoi(20,0.3,0.5).scrollX(1,0.03),1.4)
.modulateScale(osc(1,0.5),0.7).repeat(2,2).kaleid(k6).colorama(0.05).out(o2)
render(o2)
}
function button7Action(){
s0.initCam(); src(s0) .modulateRepeat(src(s0).scrollX(1,0.03),0.4)
.modulateScale(osc(1,0.5),2.7).repeat(2,2).kaleid(k7).colorama(0.01)
.add(s0,1.5).saturate( () => Math.sin(time) * 10) .out(o2)
render(o2)
}
function button8Action(){
s0.initCam(); src(s0) .modulateRepeat(voronoi(10,0.3,0.5).scrollX(1,0.03),0.4)
.modulateScale(osc(1,0.5),0.7).repeat(2,2).kaleid(3).colorama(0.01)
.blend(s0,0.5).saturate( () => Math.sin(time) * 10) .out(o2)
render(o2)
}
//stop hydra code
function buttonSAction() {if (sAan) {sAan = false} else {sAan = true};}
function buttonBAction() {if (bAan) {bAan = false} else {bAan = true};}
function buttonDAction(){save('webcam_animatie.png');}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
om in de P5.LIVE web editor van Ted Davis te plakken om zo realtime met de code te experimenteren
let libs = ['includes/libs/hydra-synth.js'];
//aanmaken hydra canvas en init
let hc = document.createElement('canvas');
hc.width = 640;
hc.height = 360;
let n;
let hydra = new Hydra({
detectAudio: false,
canvas: hc
});
let pg; //in pg komt de hydra texture
//begin hydra code
s0.initCam(); src(s0) .modulateRepeat(voronoi(10,0.3,0.5).scrollX(1,0.03),0.4)
.modulateScale(osc(1,0.5),0.7).repeat(2,2).kaleid(3).colorama(0.01)
.blend(s0,0.5).saturate( () => Math.sin(time) * 10) .out(o2)
render(o2)
//eind hydra code
function setup(){
createCanvas(windowWidth, windowHeight, WEBGL);
background(0);
n = height/10;
pg = createGraphics(hc.width, hc.height);
noStroke();
}
function draw(){
orbitControl(5);
push();
translate(-3*n,0,0);
sphere(3*n);
pop();
push();
translate(3*n,0,0);
rotateY(-radians(frameCount/2));
rotateX(radians(frameCount*2));
box(4*n);
pop();
pg.drawingContext.drawImage(hc, 0 ,0, pg.width, pg.height);
texture(pg);
plane(width, height);//zodat de hydra texture het gehele scherm vult
}