Du finner et objekt, strek, som tar vare på alle punktene som lages ved en mousedrag.
PVector er brukt til å lage x- og y-verdier.
Det er en liten hake ved å handtere musebegivenheter i p5js. p5js plukker opp musebegivenheter i hele browservinduet,
og det betyr i dette tilfellet at museklikk og dragging hvor som helst på siden vil bli registrert.
Vi kan unngå dette med følgende konstruksjon i skissen.
function setup() {
var canvas = createCanvas(400, 400);
canvas.parent('canvasHere');
...
canvas.mousePressed(mousePressedOnCanvas);
}
...
function mousePressedOnCanvas() {
...
}
Vi må også avgrense hvilke punkter vi skal bry oss om når vi dragger, ellers vil vi lta vare på lange og uinteressante streker
hvis vi dragger utenfor canvas. Sketchen i sin helhet er slik:
/*
Tegn streker med tykkelse og farge
Strekene bruker PVector for hvert punkt.
*/
// verdier
var strekTykkelse;
var strekFarge;
var bakgrunnsFarge;
// alle strekene
var streker;
// den vi holder på med
var aktivStrek=null;
function setup() {
var canvas = createCanvas(400, 400);
canvas.parent('canvasHere');
streker=new Array();
frameRate(20);
aktivStrek=null;
// mousing on canvas only
canvas.mousePressed(mousePressedOnCanvas);
}
function draw() {
background(bakgrunnsFarge);
for(var i=0; i< streker.length;i++){
streker[i].tegnStrek();
}
}
//-------------------------------------
// musebevegivenheter
function mouseIsOnSketch(){
if((mouseX > width)||(mouseX <0))
return false;
if((mouseY > height)||(mouseY <0))
return false;
return true;
}
function mousePressedOnCanvas() {
leggTilStrek(strekTykkelse, strekFarge);
aktivStrek=streker[streker.length-1];
}
function mouseDragged() {
if ( (aktivStrek!=null)&& mouseIsOnSketch()){
aktivStrek.leggTilPunkt(createVector(mouseX, mouseY));
}
}
function mouseReleased() {
aktivStrek=null;
}
//----------------------------------
// streker
function leggTilStrek(strekTykkelse,strekFarge) {
aktivStrek=new strek(strekTykkelse, strekFarge);
streker.push(aktivStrek);
}
function nyTegning(){
streker=new Array();
streker.pop();
}
function fjernSisteStrek(){
streker.pop();
aktivStrek=null;
}
//------------------------------
// farger og tykkelse
function settPennFarge(){
var c=document.forms['colorform']['color1'].value;
strekFarge=c;
}
function setPennTykkelse(){
var w=document.forms['colorform']['penwidth'].value;
strekTykkelse=w;
}
function settPapirFarge(){
var c=document.forms['colorform']['color2'].value;
bakgrunnsFarge=c;
}
En strek er beskrevet slik:
// hold a stroke with:
// color, width and a series of points (PVector)
function strek(pwidth,pcolor) {
this.pwidth=pwidth;
this.pcolor=pcolor;
this.pts=new Array();
// add a point
this.leggTilPunkt=function(p) {
this.pts.push(p);
}
// draw this stroke
this.tegnStrek=function () {
push();
strokeWeight(this.pwidth);
stroke(this.pcolor);
for(var i=1; i< this.pts.length; i++){
line(this.pts[i-1].x, this.pts[i-1].y,
this.pts[i].x, this.pts[i].y);
}
pop();
}
}
Du kan inspisere denne strukturen på denne siden:
sketch.html
https://borres.hiof.no/wep/proc/p5js/sketching/sketch.html
