Eindopdracht 2 p5js

Ik heb besloten om een ridder te maken. Daarbij heb ik nog allerlei dingen toegevoegd.

Dit is de code:

var input;
var button;

function setup() {
  createCanvas(400, 300);
  background(50);

  createCanvas(400, 400);
  input = createInput();
  input.position(30, 20);
  button = createButton("submit");
  button.position(160, 20);
  button.mousePressed(drawName);

  let button1 = createButton("Click me!");
  button1.mousePressed(randomEllipse);

  let button2 = createButton("Clear");
  button2.mousePressed(clearEverything);

  background(100);
  text("Laat hem wat zeggen.", 30, 15);
}

function draw() {}

function randomEllipse() {
  fill(`red`);
  ellipse(random(width), random(height), random(10), random(10));
}

function drawName() {
  textSize(30);
  var name = input.value();
  for (var i = 0; i < 30; i++) {
    fill(random(255));
    text(name, random(width), random(height));
  }

  fill(`white`);
  rect(50, 50, 300, 300);

  fill(`grey`);
  ellipse(205, 195, 160, 165);

  fill(250, 175, 10);
  ellipse(200, 200, 150, 150);

  fill(`blue`);
  ellipse(200, 200, 12.5, 12.5);
  ellipse(160, 200, 12.5, 12.5);

  fill(`black`);
  ellipse(200, 200, 7.5, 7.5);
  ellipse(160, 200, 7.5, 7.5);

  fill(`white`);
  ellipse(200, 200, 25, 40);
  ellipse(160, 200, 25, 40);

  fill(`blue`);
  ellipse(200, 200, 12.5, 12.5);
  ellipse(160, 200, 12.5, 12.5);

  fill(`black`);
  triangle(260, 220, 295, 255, 220, 255);
  triangle(260, 300, 295, 255, 220, 255);

  fill(`red`);
  arc(190, 235, 40, 40, 0, PI);

  fill(`grey`);
  arc(200, 185, 145, 125, PI, 0);

  fill(`grey`);
  arc(200, 185, 145, 20, 0, PI);

  fill(`grey`);
  ellipse(270, 185, 20, 20);

  //helm//
  fill(`black`);
  ellipse(170, 163, 15, 40);

  fill(`black`);
  ellipse(195, 160, 15, 50);

  fill(`black`);
  ellipse(220, 163, 15, 40);

  fill(`black`);
  ellipse(244, 166, 10, 30);

  fill(`black`);
  ellipse(146, 166, 10, 30);

  fill(`grey`);
  ellipse(128, 185, 10, 20);

  //zwaard//
  fill(`grey`);
  rect(65, 300, 165, 10);

  fill(`grey`);
  triangle(55, 305, 65, 300, 65, 310);

  fill(`brown`);
  rect(215, 300, 40, 10, 20);

  fill(`brown`);
  rect(215, 285, 10, 40, 20);

  line(55, 305, 215, 305);

  ellipse(220, 290, 5, 5);
  ellipse(220, 320, 5, 5);

  ellipse(250, 305, 5, 5);
  ellipse(230, 305, 5, 5);
  line(230, 305, 250, 305);
  line(220, 290, 220, 320);

  fill(`red`);
  ellipse(random(100, 150), random(290, 310), 10, 10);
  ellipse(random(75, 100), random(290, 310), 12, 12);
  //Einde code zwaard//
}

function clearEverything() {
  background(100);

  fill(`black`);
  textSize(12);
  text("Laat hem wat zeggen.", 30, 15);
}

Via de link hieronder kan kan je het bekijken:

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

Uitleg:

Om te beginnen kan je tekst op de achtergrond zetten van wat de emoij zegt. Bijvoorbeeld hoi. Hoe vaker je op de submit knop klikt hoe vaker er hoi in beeld komt. Het is random. Je kan verschillende woorden tegelijk in beeld zetten. Je kan ook cijfer in beeld zetten en hij is ook hoofdletter gevoelig. Als je de tekst niet meer in beeld wilt kan je op clear klikken. Dan verdwijnt alles uit beeld op de knoppen en de uitleg van de submit knop na.

Met een andere knop die linksonder in beeld staat kan je bloedspetter in beeld toevoegen. De grote en de locatie zijn random. Dit kan je ook verwijderen met de clear knop.

De bloedspetters die er al waren kan je verplaatsen van plek.