tien visals met een box en drie buizen. terug naar de inleiding
tien visuals met box en buizen in fullscreen
Als start visual (regel 87) is gekozen voor visual 9 met de hydra functie palet
In p5.js worden mbv translate de primitieven gepositioneerd
Translate voor de torus staat tussen push() en pop(). De twee sphere's staan niet tussen push() en pop()
Zo starten de twee sphere's in de punten (0,-2*n) (regel 78) en (0,-n) want -2*n+n = -n (regel 79)
Dankzij orbitControl(5) kan je de kubus met de muis roteren en met het muiswiel inzoomen.
De torus() (regel 75) is hier een vijfhoek want het tweede argumen tuberRadius = 5
//aanmaken hydra canvas en init
let n; let kubus = true; let xrot = false;
let hc = document.createElement('canvas');
hc.width = window.innerWidth;
hc.height = window.innerHeight;
//document.body.appendChild(hc)
let hydra = new Hydra({detectAudio: false, canvas: hc});
let pg //in pg komt de hydra texture
function setup(){
createCanvas(windowWidth, windowHeight, WEBGL);
n = height/5;
pg = createGraphics(300,300);
s0.init({src:drawingContext.canvas});
background('rgba(255,255,255, 0)');
buttonR = createButton('reset en clear');
buttonR.position(20,20);buttonR.style('width','100px');
buttonR.mouseClicked(buttonRAction);
button0 = createButton('0');
button0.position(20,50);button0.style('width','20px');
button0.mouseClicked(button0Action);
button1 = createButton('1');
button1.position(20,80);button1.style('width','20px');
button1.mouseClicked(button1Action);
button2 = createButton('2');
button2.position(20,110);button2.style('width','20px');
button2.mouseClicked(button2Action);
button3 = createButton('3');
button3.position(20,140);button3.style('width','20px');
button3.mouseClicked(button3Action);
button4 = createButton('4');
button4.position(20,170);button4.style('width','20px');
button4.mouseClicked(button4Action);
button5 = createButton('5');
button5.position(20,200);button5.style('width','20px');
button5.mouseClicked(button5Action);
button6 = createButton('6');
button6.position(20,230);button6.style('width','20px');
button6.mouseClicked(button6Action);
button7 = createButton('7');
button7.position(20,260);button7.style('width','20px');
button7.mouseClicked(button7Action);
button8 = createButton('8');
button8.position(20,290);button8.style('width','20px');
button8.mouseClicked(button8Action);
button9 = createButton('9');
button9.position(20,320);button9.style('width','20px');
button9.mouseClicked(button9Action);
buttonbox = createButton('box klein/groot');
buttonbox.position(20,350);buttonbox.style('width','110px');
buttonbox.mouseClicked(buttonboxAction);
buttonboxX = createButton('X rot aan/uit');
buttonboxX.position(20,380);buttonboxX.style('width','110px');
buttonboxX.mouseClicked(buttonboxXAction);
buttonD = createButton('downloaden');
buttonD.position(20,410);buttonD.style('width','110px');
buttonD.mouseClicked(buttonDAction);
}
function draw(){
// background('rgba(255,255,255, 0)');
pg.drawingContext.drawImage(hc, 0 ,0, pg.width, pg.height);
fill(255);
texture(pg);
orbitControl(5);
rotateY(-radians(frameCount/2));
if (xrot) {rotateX(-radians(frameCount/2))}
else { }
if (kubus) {box(2.5*n,2.5*n,2.5*n,10,10);}
else {box(1.5*n,1.5*n,1.5*n,10,10);}
rotateY(-radians(frameCount/2));
rotateX(radians(frameCount*2));
push();
translate(2*n,0,5,5);
torus(n/2,5,5,5);
pop();
rotateX(radians(frameCount*2));
translate(0,-2*n);
sphere(n/3,5,5);
rotateY(radians(frameCount*2));
rotateZ(radians(-frameCount*2));
translate(0,n);
sphere(n/6,5,5);
}
function buttonRAction(){setup();clear();}
// start hydra code
palet(0.2,2.,10.).kaleid(2).out(o0);//is de code van button9
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);
}
function button9Action(){
palet(0.2,2.,10.).kaleid(2).out(o0);
}
//stop hydra code
function buttonboxAction(){if(kubus){kubus=false;}else{kubus=true;}}
function buttonboxXAction(){if(xrot){xrot=false;}else{xrot=true;}}
function buttonDAction(){save('visual_box_buizen.png');}
