Eindopdracht Yin en Yang symbool + extra

In dit bericht laat ik het eindresultaat zien van de eindopdracht. Ik heb meerdere resultaten en die laat hier allemaal zien.

---

Yin en Yang 1

Mijn eerste resultaat is het eerste Yin en Yang symbool dat ik heb gemaakt. Deze heeft een verkleurende achtergrond. Daarom is het niet mogelijk om hier alle kleuren te bekijken. Hieronder staat een kopje met de link.

Het symbool is via de link hieronder te bekijken:

https://editor.p5js.org/Cynicallama7/full/ukXrjsD3B

Hieronder staat de code die ik gebruikt heb voor het symbool:

let dim;

function setup() {
  createCanvas(710, 400);
  dim = width / 2;
  background(0);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  ellipseMode(RADIUS);
  frameRate(1);
}

function draw() {
  background(175);
  for (let x = 0; x <= width; x += dim) {
    drawGradient(x, height / 2);
  }
}


function drawGradient(x, y) {
  let radius = dim / 2;
  let h = random(0, 360);
  for (let r = radius; r > 0; --r) {
    fill(h, 90, 90);
    ellipse(355, 200, 200, 200);
    h = (h + 1) % 360;
  }
  
//White half circle//  
fill(255);
arc(355, 200, 100, 100, PI+HALF_PI , HALF_PI);

//Black half circle//
fill(0);
arc(355, 200, 100, 100, HALF_PI, PI+HALF_PI);
  
  
c = color(`white`);
fill(c);
noStroke();
ellipse(355,150,50);

c = color('Black');
fill(c);
noStroke();  
ellipse(355,250,50);

c = color('Black');
fill(c);
noStroke();  
ellipse(355,250,50);
  
c = color('Black');
fill(c);
noStroke();  
ellipse(355,150,10);
  
c = color('white');
fill(c);
noStroke();  
ellipse(355, 250,10);
}

---

Yin en Yang 2

Het tweede design dat ik heb gemaakt met een Yin en Yang symbool is interactief. Je kan de achtergrond veranderen door met je muis heen en weer te gaan. Daardoor komen er telkens andere plaatjes uit zoals deze:

Er zijn nog veel meer combinaties mogelijk. Je kan het zelf ook proberen via de volgende link:

https://editor.p5js.org/Cynicallama7/full/9t18jMez1

Dit is de code van dit Yin en Yang logo:

const barWidth = 20;
let lastBar = -1;

function setup() {
  createCanvas(720, 400);
  colorMode(HSB, height, height, height);
  noStroke();
  background(`grey`);
}

function draw() {
  let whichBar = mouseX / barWidth;
  if (whichBar !== lastBar) {
    let barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }

//White half circle//  
fill(`white`);
arc(360, 200, 200, 200, PI+HALF_PI , HALF_PI);

//Black half circle//
fill(0);
arc(360, 200, 200, 200, HALF_PI, PI+HALF_PI);
  
  
c = color(`white`);
fill(c);
noStroke();
ellipse(360,150,100);

c = color('Black');
fill(c);
noStroke();  
ellipse(360,250,100);

c = color('Black');
fill(c);
noStroke();  
ellipse(360,250,100);
  
c = color('Black');
fill(c);
noStroke();  
ellipse(360,150,20);
  
c = color('white');
fill(c);
noStroke();  
ellipse(360, 250,20);
}

---

Extra

Als extra heb ik zelf nog 2 symbolen gemaakt. Bij mij vond ik het WIFI symbool wel erg toepasselijk dus dat heb ik na proberen te maken en ik denk dat het erg goed gelukt is. Daarnaast heb ik ook een slotje gemaakt. Het past niet echt bij me maar het leek me lastig om te maken. Zo ziet het eruit:

Dit is de code:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
//WIFI Symbool//
fill(`black`)
arc(200,200, 200,200, 22.6 ,12 );

noStroke()
fill(220)
arc(200,210, 175,175, 22.6 ,12 );

fill(`black`)
arc(200,200, 130,130, 22.6 ,12 );

noStroke()
fill(220)
arc(200,200, 90,90, 22.6 ,12 );
  
fill(`black`)
arc(200,200, 60,60, 22.6 ,12 );
  
//Slotje//
fill(`black`)
arc(200,260, 85,85, 22.6 ,12 );

fill(220)
arc(200,260, 63,63, 22.6 ,12 );

fill(`black`)
rect(165,235,11, 30);

fill(`black`)
rect(225,235,10.5, 30);
  
rect(145, 265, 110, 80, 20);

fill(220)
ellipse(200, 300, 20,20);

fill(220)
triangle(200,305, 190,320, 210, 320);

fill(220)
rect(176, 240, 49, 25);
}

---

Extra 2

Dit is iets extra’s dat ik heb toegevoegd bij de extra symbolen. Het is interactief maar dat kan ik hier niet laten zien.

Kijk via deze link:

https://editor.p5js.org/Cynicallama7/full/yTd2jKG6m

Dit is de code:

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  fill(random(255),random(255),random(255))
  ellipse(mouseY, mouseX,50,50);

  
fill(220)
rect(80, 80, 250, 290, 20);
//WIFI Symbool//
fill(`black`)
arc(200,200, 200,200, 22.6 ,12 );

noStroke()
fill(220)
arc(200,210, 175,175, 22.6 ,12 );

fill(`black`)
arc(200,200, 130,130, 22.6 ,12 );

noStroke()
fill(220)
arc(200,200, 90,90, 22.6 ,12 );
  
fill(`black`)
arc(200,200, 60,60, 22.6 ,12 );
  
//Slotje//
fill(`black`)
arc(200,260, 85,85, 22.6 ,12 );

fill(220)
arc(200,260, 63,63, 22.6 ,12 );

fill(`black`)
rect(165,235,11, 30);

fill(`black`)
rect(225,235,10.5, 30);
  
rect(145, 265, 110, 80, 20);

fill(220)
ellipse(200, 300, 20,20);

fill(220)
triangle(200,305, 190,320, 210, 320);

fill(220)
rect(176, 240, 49, 25);
  

}