3d pijlen, sphere, torus en box.                  terug naar de inleiding

                                                                                                  de 3d pijlen en primitieven in fullscreen

 
let vorm = []; let n; bs = false; 
//let libs = ['includes/libs/hydra-synth.js']; 
//aanmaken hydra canvas hc en hydra object 
let hc = document.createElement('canvas'); 
hc.width = window.innerWidth; 
hc.height = window.innerHeight; 
let hydra = new Hydra({detectAudio: false, canvas: hc}); 
let pg //in pg komt de hydra texture 
//start hydra begin 
noise(() => 40*Math.sin(0.02*time)).color(-8, -2,1).colorama().kaleid(8).scale(10.5).out(o0) 
//start hydra end 
let dp1 = 0; let dp2 = 7; 
function setup() { 
 
  button0 = createButton('0'); 
  button0.position(20,30);button0.style('width','20px'); 
  button0.mouseClicked(button0Action); 
 
  button1 = createButton('1'); 
  button1.position(20,60);button1.style('width','20px'); 
  button1.mouseClicked(button1Action); 
 
  buttonBS = createButton('Box <==> Sphere'); 
  buttonBS.position(20,90);buttonBS.style('width','160px'); 
  buttonBS.mouseClicked(buttonBSAction); 
 
  buttonD = createButton('download'); 
  buttonD.position(20,120);buttonD.style('width','80px'); 
  buttonD.mouseClicked(buttonDAction); 
 
  pg = createGraphics(windowWidth, windowHeight); 
//  pg = createGraphics(300,300); 
  s0.init({src:drawingContext.canvas}); 
  createCanvas(windowWidth, windowHeight, WEBGL); 
  n = height/11; 
  let alfa =100; let sw = n/150; let sc = color(0); let z = height/10; let mode = 2; 
 //  constructor argumenten: 
 //  1) n = lengte korte diagonaal, 2) h1 = lengte top naar korte diagonaal, 3) h2 = lengte punt naar korte diagonaal 
 //  4) d = draaipunt, 5) x positie, 6) y positie, 7) z, 
 //  8) mode 9) hoek  x as 10) hoek, 11) kleur, 12) lijndikte sw, 13) Lijnkleur sc 
 //                     1   2   3    4    5   6    7   8    9   10             11           12  13 
 vorm[0] = new Vlieger3d(4*n,-n, 2*n, dp1,-6*n, 0,  z, 4, 0,-90, color(242,105,117,alfa),sw,sc); 
 vorm[1] = new Vlieger3d(4*n,-n, 2*n, dp2, 0,  -3*n,z, 3, 0,  0, color(37,229,224,alfa),sw,sc); 
 vorm[2] = new Vlieger3d(4*n,-n, 2*n, dp1, 6*n, 0,  z, 4, 0, 90, color(94,189,154,alfa),sw,sc); 
 vorm[3] = new Vlieger3d(4*n,n, -2*n, dp2, 0,   3*n,z, 3, 0, 0,  color(90,150,100,alfa),sw,sc); 
} 
 
function draw() { 
for (let i = 0; i < 4; i++) {vorm[i].display();} 
  vorm[0].dpRotLiS(vorm[0]);vorm[1].dpRotReS(vorm[1]);vorm[2].dpRotLiS(vorm[2]); vorm[3].dpRotReS(vorm[3]); 
  pg.drawingContext.drawImage(hc, 0 ,0, pg.width, pg.height); 
  texture(pg); orbitControl(5); 
 
  push(); 
  rotateY(radians(frameCount/2));translate(-8*n, 0 ,0); 
  cone(2*n,2*n); pop(); 
 
if (bs) {push();rotateY(radians(-frameCount)); 
  translate(-4*n,0);sphere(2*n);pop();} 
 
  else {push();rotateX(radians(-frameCount)); 
    translate(0,-4*n);box(2*n);pop();} 
 
  push(); translate(4*n,0,n); torus(2*n,n,5); pop(); 
  push(); translate(-4*n,0,n); torus(2*n,n,5);pop(); 
} 
 
function windowResized() {resizeCanvas(windowWidth, windowHeight);} 
function button0Action() {rectpalet(0.5,0.58,0.5,0.61).kaleid(2).out(o0);} 
function button1Action() {osc(30,0.02,6).colorama(0.09).kaleid(88).kaleid(4).kaleid(10).out(o0);} 
function buttonBSAction(){if(bs){bs = false;} else {bs = true;}} 
function buttonDAction() {save('pijlen_primitieven.png');}