visual met box en buizen. terug naar de inleiding
toets functies: "d" = downloaden van een afbeelding, toets "r" ' reset
visual met box en buizen in fullscreen
Om veranderingen in de code aan te brengen, de code in de P5LIVE webeditor plakken
De hydra code begint altijd met een Source functie , hier src() (regel 13) hierna volgen de div functies zoals Geometry, Color enz
De functies worden gescheiden met een punt. De laatste functie is altijd .out() (regel 17) zie verder Hydra functies
De buizen hebben de kleuren blauw , rood en groen dit is de normalMaterial() zie regel 38.
Dankzij orbitControls(5) (regel 33) kan je de kubus met de muis roteren en met het muiswiel inzoomen
In p5.js worden mbv translate de 3D primitieven gepositioneerd.
Hier staan translate en de primitieven niet tussen push(0 en pop() dus het middelpunt van het assenstelsel wordt niet naar (0,0) terug gezet
let libs = ['includes/libs/hydra-synth.js'];
//aanmaken hydra canvas en init
let n;
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
//Hydra begin
src(o0)
.layer(src(s0))
//.repeat(3)
.rotate(2)
.out(o0)
render(o0)
//Hydra eind
function setup(){
createCanvas(windowWidth, windowHeight, WEBGL);
n = height/5;
pg = createGraphics(300,300);
s0.init({src:drawingContext.canvas});
// background('rgba(255,255,255, 0)');
background(255,100,0,100);
// background(0);
}
function draw(){
// background('rgba(255)');
pg.drawingContext.drawImage(hc, 0 ,0, pg.width, pg.height);
fill(255);
texture(pg);
orbitControl(5);
rotateY(-radians(frameCount/2));
box(2.5*n,2.5*n,2.5*n,10,10);
normalMaterial();
translate(2*n,0);
torus(n/4);
rotateX(radians(frameCount));
translate(0,-2*n);
sphere(n/3);
rotateZ(radians(-frameCount*2));
translate(0,2*n);
sphere(n/6);
}
function keyPressed() {
if (key == 'd' || key == 'D') {
save('box_visual.png');
}
if (key == 'r' || key == 'R') {
setup();
}
}