En skisse til

Hva

Vi setter opp en skisse der du kan tegne med musa. I tillegg til funksjonalitete på siden Tegning har vi lagt til funksjonalitet for å lage tegningen i json-format. Det er bare mulig å lagre en side, så hver lagring overskriver den forrige.

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.
 BakgrunnsFarge, strekFarge og strekTykkelse
 initieres ifølge status på input kontrollerne
 */
// disse to er globale:
var bakgrunnsFarge;    // papiret
var streker;        // alle strekene
// verdier
var strekTykkelse;
var strekFarge;
// den vi holder på med
var aktivStrek=null;
// grense for punktlagring (antall tegn)
var pLimit;
// melding hvis noe går galt
function visMelding(t){
    document.getElementById("message").innerHTML=t;
}
// starter med blankt ark
function setup() {
    var canvas = createCanvas(400, 400);
    canvas.parent('canvasHere'); 
     pLimit=60000;
    streker=new Array();
    frameRate(20);
    aktivStrek=null;
    // bare på canvas
    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];
    visMelding("-");
}
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();
    visMelding("-");
}
function fjernSisteStrek(){
  streker.pop();
  aktivStrek=null;
  visMelding("-");
}
//------------------------------
// farger og tykkelse
    // disse kalles fra web-siden ved oppstart
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:

// en strek med:
// tykkelse, farge og en array med punkter(PVector)
function strek(pwidth,pcolor) {
    this.pwidth=pwidth;
   this.pcolor=pcolor;
   this.pts=new Array();
  // legg til et punkt 
  this.leggTilPunkt=function(p) {
    if( (this.pts.length ==0)||
         (p.x != this.pts[this.pts.length-1].x) || 
         (p.y != this.pts[this.pts.length-1].y))
         this.pts.push(p);     
  }
  // tegn streken
  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);
        }
        
    }
}

Json handteringen er slik:

// lagrer/henter fila: result.json
// bruker globale: 
// streker, bakgrunnsFarge,pLimit og visMelding()
var JO; //jsonobject når vi laster inn og parser
var adr="https://borres.hiof.no/wep/proc/p5js/sketching2/";
//-----------------------------------
// håndlager json fil og lagrer den
function lagJson(){
    if(streker.length ==0){
        visMelding("tom skisse");
        return;
    }
    var result='{\n';
    result+='"papir":"'+bakgrunnsFarge+'",\n"streker":[';
    for(var s=0; s<streker.length;s++){
    result+='{"pwidth":'+streker[s].pwidth+','+
        '"pcolor":"'+streker[s].pcolor+'",'+
          '\n"pts":';
        result+=lagStrek(streker[s].pts)+'},';
    }
    result=result.substring(0,result.length-1);
    result+=']}';
    if(result.length > pLimit)
        visMelding("for mange/lange streker");
    else
        send(result,adr+"lagre.py");
}
function lagStrek(punktList){
    var ps="[";
    for(var p=0;p< punktList.length; p++){
        ps+='{"x":'+int(punktList[p].x)+',"y":'+int(punktList[p].y)+'},';
    }
    return ps.substring(0,ps.length-1)+']';
}
// bruker jquery-ajax for å sende fila
function send(value,ad){
    $.ajax({
        url:ad,
        data:"json="+value,
        type:'POST',
         success:function(data,status,xhr)
     { visMelding("ok");},
         error:function(data)
         { visMelding("det oppsto en feil");     }
        })
}    
//-----------------------------------
// laster json fil og etablerer ny strekliste:
// global  streker
function brukJson(){
    fetch(adr+"hent.py");
}
function fetch(ad){
    $.ajax({
        url:ad,
        type:'POST',
         success:function(data,status,xhr)
         { 
            visMelding("ok");
            JO=JSON.parse(data);
            setupJson();            
         },
         error:function(data)
         { visMelding("det oppsto en feil");     }
        })
}
function setupJson(){
    bakgrunnsFarge=JO.papir;
    var str=JO.streker;
    streker=new Array();
    for(var i=0;i < str.length; i++){
        var nystr=new strek(str[i].pwidth,str[i].pcolor);
        var p=str[i].pts;
        for(var j=0; j < p.length; j++){
            nystr.leggTilPunkt(createVector(p[j].x, p[j].y));
        }
        streker.push(nystr);
    }
}

Python koden som tar i mot tegingen er slik:

#! /usr/bin/python3
"""
tar imot en json-string og lagrer den på fila result.json
"""
import cgi
import cgitb; cgitb.enable()
def storeTextFile(filename,txt):
    try:
        file=open(filename,'w',encoding='utf-8')
        file.write(txt)
        file.close()
    except:
        print ('Trouble writing to: ',filename)
form=cgi.FieldStorage()
print ('Content-type: text/html\n')
try:
   jsonv=form['json'].value
   storeTextFile("result.json",jsonv);
except:
   print('sorry')

og denne pythonfila leverer denforrige

#! /usr/bin/python3
"""
henter en json-string fra fila result.json
"""
def getTextFile(filename):
    try:
        file=open(filename,'r',encoding='utf-8')
        res=file.read()
        file.close()
        return res
    except:
        print ('Trouble reading: ',filename)
        return None
print('Content-type: text/html; charset=utf-8\n')
t=getTextFile('result.json')
print(t)

Du kan inspisere denne strukturen på denne siden:
sketch.html https://borres.hiof.no/wep/proc/p5js/sketching2/sketch.html

Referanser

Processing.js Processing.js JavaScript interpretator for Processing processingjs.org/ 01-04-2014