Je zult verstelt staan hoeveel je al kunt: gewoon de bekende oldschool Painter of een soortgelijk programma.

  • Een groot leeg vlak waar je kunt tekenen
  • Minstens keuze uit 5 kleuren via een buttton
  • Een gum
  • Keuze uit meerdere brush vormen. Waarom geen Unicode tekens?
  • Keuze uit meerdere brush sizes. Waarom niet met een slider?
  • Gebruik functies met parameters en / of return waardes i.p.v big chunks in de draw()
  • Gebruik de collide2D library ipv zelf checken of je ongeveer klikt.
  • Voor de 8: : Save (download). we zien het door de vingers als de toolbar meekomt in de image, maar croppen is beter. en Load. Als je niet cropt bij Save, dan heb je nu 2 toolbars 🙂
  • Voor de 9: zelf creatief geweest

Maak eerst een ontwerp

Teken eerst je design in https://svgeditoronline.com/editor/

Opzet Code

Onderstaande code mag je kopieren. Let op: werkende code CTRL-C CTRL-V van het Internet is niet de bedoeling. Write your own.

let vulkleur;
let brushsize;
let brushshape;
function setup() {
    vulkleur = "black";
    brushsize = 5;
    brushshape = "circle"
    createCanvas(windowWidth, windowHeight);
    background(120);
}
function draw() {
    noStroke()
    fill(vulkleur);
    ellipse(mouseX, mouseY, brushsize, brushsize);
}

Betere code

Die ellipse is niet zo goed, beter wordt het met een lijn tussen (pmouseX,pmouseY) en (mouseX,mouseY).

pmouseX en pmouseY zijn de previous, de vorige, van de vorige loop van draw().


function mousePressed() {
  stroke(vulkleur)
  // ellipse(mouseX, mouseY, brushsize, brushsize);
  line(pmouseX,pmouseY, mouseX,mouseY)
}