8 roterende spiralen afgeleid van een driehoek

acht roterende spiralen afgeleid van driehoeken code in p5.js. terug naar de inleiding

toets "s" stoppen van de rotaties met iedere ander toets starten de rotaties weer.

Met de tweede slider stel je alfa in je zie de instelling door op de random kleur knop te klikken

roterende spiralen in fullscreen

De schets maakt gebruik van objecten van de class "Spiraal_8gdt_gk" en de superclass "Vormen"

 

vorm = []; sliderAan = true; let alfa; let y; let n;
function setup() {
  buttonR = createButton('reset');
  buttonR.position(20,40);buttonR.style('width','70px');
  buttonR.mouseClicked(buttonRAction);
  button1 = createButton('y +-n');
  button1.position(20,80);button1.style('width','100px');
  button1.mouseClicked(button1Action);
  button2 = createButton('y');
  button2.position(20,120);button2.style('width','100px');
  button2.mouseClicked(button2Action);
  buttonC = createButton('random kleur');
  buttonC.position(20,160);buttonC.style('width','100px');
  buttonC.mouseClicked(buttonCAction);
 
if (sliderAan) {
  slidersw = createSlider(2, 50, 1, 2);
  slidersw.position(20,200);
  slidersw.style('width', '80px');
  sliderAlfa = createSlider(50, 250, 100, 2);
  sliderAlfa.position(20,240);
  sliderAlfa.style('width', '80px');
  sliderAan = false;
}
 
  buttonD = createButton('downloaden');
  buttonD.position(20,280);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight);
   let x = width/2; y = height/2; n = height/5; let sw = n/100;
   let c = color(0);
  vorm[0] = new Spiraal_8gdt_gk(n, 0, 8, x+n, y, 0, sw, c);
  vorm[1] = new Spiraal_8gdt_gk(n, 1, 8, x-n, y, 0, sw, c);
  vorm[2] = new Spiraal_8gdt_gk(n, 1, 8, x+n, y, 0, sw, c);
  vorm[3] = new Spiraal_8gdt_gk(n, 0, 8, x-n, y, 0, sw, c);
  vorm[4] = new Spiraal_8gdt_gk(n, 1, 8, x+n, y, 90,sw, c);
  vorm[5] = new Spiraal_8gdt_gk(n, 0, 8, x-n, y,-90,sw, c);
  vorm[6] = new Spiraal_8gdt_gk(n, 1, 8, x+n, y,-90,sw, c);
  vorm[7] = new Spiraal_8gdt_gk(n, 0, 8, x-n, y, 90,sw, c);
}
function draw() {
  clear()
  background('rgba(255,255,255, 0)')
 
  lijndikte()
   for (let i = 0; i < 8; i++)
  {
    vorm[i].display()
  }
 
  if (key == 's' || key == 'S') { }
  else {
  vorm[0].dpRotLi(vorm[0]); vorm[1].dpRotRe(vorm[1]);
  vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
  vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
  vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
  }
}
 
function buttonRAction(){setup();}
function buttonCAction()
  {for (let i=0; i<8; i++) {alfa = sliderAlfa.value();
   vorm[i].c = color(random(0,200),random(0,200),random(0,250),alfa)}}
function button1Action()
  {vorm[0].y=y+n; vorm[1].y=y+n; vorm[2].y=y-n; vorm[3].y=y-n;}
function button2Action()
  {vorm[0].y=y; vorm[1].y=y; vorm[2].y=y; vorm[3].y=y;}
function lijndikte(){let slider = slidersw.value();
  for (let i=0; i<8; i++){vorm[i].sw = slider}};
function buttonDAction(){save('acht_spiralen.png');}

Flevopink