// ======== sketch.js ======== // p5.js only — no HTML, no CSS. const CONFIG = { ui: { pad: 16, barH: 70, corner: 12, accent: [40,120,255], bg: [255,255,255,220], shadow: [0,0,0,30], text: [25,25,25], subtle: [90,90,90,150], }, colors: { x: [40,120,255], y: [230,70,70], point: [0], hover: [120,120,120,160], }, defaults: { quadrant: 1, maxX: 10, maxY: 10 }, }; // ---- state let selectedQuadrant, maxXVal, maxYVal; let currentPoint = null; let showCoord = true; // toggle: Vis koordinat let hoverPt = null; let ui; // slider drag state let draggingSlider = null; // 'maxX' | 'maxY' | null // ---- setup function setup(){ createCanvas(windowWidth, windowHeight); textFont("sans-serif"); selectedQuadrant = CONFIG.defaults.quadrant; maxXVal = CONFIG.defaults.maxX; maxYVal = CONFIG.defaults.maxY; ui = buildUI(); layoutUI(); noLoop(); } function windowResized(){ resizeCanvas(windowWidth,windowHeight); layoutUI(); redraw(); } // ---- UI model function buildUI(){ return { rect:{x:CONFIG.ui.pad,y:CONFIG.ui.pad,w:width-CONFIG.ui.pad*2,h:CONFIG.ui.barH}, q:{label:"Kvadrant",vals:[1,2,4],names:["1","2","4"],sel:0}, maxX:{label:"Maks x",val:CONFIG.defaults.maxX, hit:{}}, maxY:{label:"Maks y",val:CONFIG.defaults.maxY, hit:{}}, toggle:{label:"Vis koordinat",on:true} }; } function layoutUI(){ ui.rect={x:CONFIG.ui.pad,y:CONFIG.ui.pad,w:width-CONFIG.ui.pad*2,h:CONFIG.ui.barH}; redraw(); } // ---- draw function draw(){ background(245); drawUI(); drawPlot(); if(hoverPt) drawHover(hoverPt); if(currentPoint) drawPoint(currentPoint); } // ---- UI drawing function drawUI(){ const r=ui.rect; noStroke(); fill(CONFIG.ui.shadow); rect(r.x+2,r.y+4,r.w,r.h,CONFIG.ui.corner); stroke(200); fill(CONFIG.ui.bg); rect(r.x,r.y,r.w,r.h,CONFIG.ui.corner); fill(CONFIG.ui.text); textSize(14); textAlign(LEFT,TOP); let x=r.x+12, y=r.y+10, colW=r.w/4-10; // quadrant (segmented) text(ui.q.label,x,y); let bx=x,by=y+20,bw=colW-20,bh=30,each=(bw-6)/3; for(let i=0;i<3;i++){ const sel=(i===ui.q.sel); fill(sel?CONFIG.ui.accent:255); stroke(150); rect(bx+i*(each+3),by,each, bh,8); fill(sel?255:CONFIG.ui.text); noStroke(); textAlign(CENTER,CENTER); text(ui.q.names[i],bx+i*(each+3)+each/2,by+bh/2); } x+=colW+20; // sliders drawSlider(ui.maxX,x,y,colW,(v)=>{maxXVal=v; currentPoint=null; redraw();}); x+=colW+20; drawSlider(ui.maxY,x,y,colW,(v)=>{maxYVal=v; currentPoint=null; redraw();}); x+=colW+20; // toggle drawToggle(ui.toggle,x,y,colW,(on)=>{showCoord=on; redraw();}); } // ---- slider (track style, int 5..40) function drawSlider(model, x, y, w, onChange){ // Layout const labelY = y; // label row const trackY = y + 30; // slider row const trackH = 6; const trackW = w - 20; const min = 5, max = 40; const tx = x + 10, ty = trackY; // Ensure model has a sane value model.val = constrain(round(model.val), min, max); // Persist hitbox for drag handling model.hit = { tx, ty, trackW, min, max }; // Compute position const ratio = (model.val - min) / (max - min); const thumbX = tx + ratio * trackW; // --- Track & thumb (draw first, under text) --- stroke(200); strokeWeight(trackH); line(tx, ty, tx + trackW, ty); noStroke(); fill(CONFIG.ui.accent); circle(thumbX, ty, trackH * 2.2); // Reset stroke weight so later drawings stay thin strokeWeight(1); // --- Value (right of track) --- fill(CONFIG.ui.text); noStroke(); textAlign(LEFT, CENTER); text(model.val, tx + trackW + 8, ty); // --- Label (draw LAST so it never disappears) --- textAlign(LEFT, TOP); text(model.label, x, labelY); // If this slider is actively dragging, update value continuously if (draggingSlider && ((draggingSlider==='maxX' && model===ui.maxX) || (draggingSlider==='maxY' && model===ui.maxY))) { const r = constrain((mouseX - tx) / trackW, 0, 1); const val = round(min + r * (max - min)); if (val !== model.val) { model.val = val; onChange(val); // also clears the current point } } } // ---- toggle function drawToggle(model,x,y,w,onChange){ text(model.label,x,y); const yb=y+22, w2=60,h=28; fill(model.on?CONFIG.ui.accent:220); noStroke(); rect(x,yb,w2,h,15); fill(255); circle(x+(model.on?w2-h/2:h/2), yb+h/2, h-6); fill(CONFIG.ui.text); textAlign(LEFT,CENTER); text(model.on?"Til":"Fra", x+w2+10,yb+h/2); } // ---- coordinate system draw function drawPlot(){ const top = ui.rect.y + ui.rect.h + CONFIG.ui.pad; const pad = CONFIG.ui.pad; const w = width - pad*2; const h = height - top - pad; const plot={x:pad,y:top,w,h}; fill(255); stroke(220); rect(plot.x,plot.y,plot.w,plot.h,12); stroke(200); noFill(); rect(plot.x,plot.y,plot.w,plot.h,12); // range let rangeX,rangeY; if(selectedQuadrant===1){ rangeX={min:0,max:maxXVal}; rangeY={min:0,max:maxYVal}; } else if(selectedQuadrant===2){ rangeX={min:-maxXVal,max:maxXVal}; rangeY={min:0,max:maxYVal}; } else { //4 rangeX={min:-maxXVal,max:maxXVal}; rangeY={min:-maxYVal,max:maxYVal}; } const sX=(plot.w-60)/(rangeX.max-rangeX.min); const sY=(plot.h-60)/(rangeY.max-rangeY.min); const s=min(sX,sY); const effW=s*(rangeX.max-rangeX.min); const effH=s*(rangeY.max-rangeY.min); const effX=plot.x+(plot.w-effW)/2; const effY=plot.y+(plot.h-effH)/2; const originX=map(0,rangeX.min,rangeX.max,effX,effX+effW); const originY=map(0,rangeY.max,rangeY.min,effY,effY+effH); // grid (thin) stroke(230); strokeWeight(1); for(let i=ceil(rangeX.min); i<=floor(rangeX.max); i++){ const x=originX+(i*s); if(x>=effX && x<=effX+effW) line(x,effY, x, effY+effH); } for(let j=ceil(rangeY.min); j<=floor(rangeY.max); j++){ const y=originY-(j*s); if(y>=effY && y<=effY+effH) line(effX,y,effX+effW,y); } // axes stroke(0); strokeWeight(2); line(effX,originY,effX+effW,originY); line(originX,effY,originX,effY+effH); drawArrow(effX+effW-8,originY,effX+effW,originY); drawArrow(originX,effY+8,originX,effY); // labels noStroke(); fill(0); textAlign(RIGHT,BOTTOM); text("x",effX+effW-5,originY-5); textAlign(LEFT,TOP); text("y",originX+5,effY+5); // ticks textAlign(CENTER,TOP); textSize(12); fill(80); for(let i=ceil(rangeX.min);i<=floor(rangeX.max);i++){ const x=originX+(i*s); if(x>effX+15 && xeffY+10 && y= 0, else below. let labelY; if (selectedQuadrant === 4) { labelY = sy + (pt.y >= 0 ? -20 : 10); } else { labelY = sy - 20; // quadrants 1 & 2 } // ---- label drawing: ( black ) with blue x and red y ---- textSize(16); const parts = ['(', String(pt.x), ';', String(pt.y), ')']; const colors = [0, CONFIG.colors.x, 0, CONFIG.colors.y, 0]; noStroke(); textAlign(LEFT, TOP); let totalW = 0; for (const p of parts) totalW += textWidth(p); let xStart = sx - totalW/2; for (let i = 0; i < parts.length; i++) { fill(colors[i]); text(parts[i], xStart, labelY); xStart += textWidth(parts[i]); } } } function drawHover(pt){ const {origin,s}=PLOT; const sx=origin.x+pt.x*s; const sy=origin.y-pt.y*s; noStroke(); fill(CONFIG.colors.hover); circle(sx,sy,6); } // ---- mapping function mapScreenToWorld(mx,my){ const {rangeX,rangeY,origin,s}=PLOT; const x=(mx-origin.x)/s; const y=(origin.y-my)/s; const cx=constrain(Math.round(x),rangeX.min,rangeX.max); const cy=constrain(Math.round(y),rangeY.min,rangeY.max); return {x:cx,y:cy}; } // ---- interaction function mouseMoved(){ if(PLOT && mouseX>PLOT.effX && mouseXPLOT.effY && mouseYrx&&mouseXry&&mouseYtx&&mouseXty&&mouseY ty-10 && mouseY < ty+10 && mouseX > tx && mouseX < tx+trackW; if (on) { // update immediately on press const r=constrain((mouseX-tx)/trackW,0,1); const val=round(h.min + r*(h.max-h.min)); if (model === ui.maxX) { if (val!==ui.maxX.val){ ui.maxX.val=val; maxXVal=val; currentPoint=null; } } else { if (val!==ui.maxY.val){ ui.maxY.val=val; maxYVal=val; currentPoint=null; } } redraw(); } return on; }

Velkommen til MegaMatematik.dk (under udarbejdelse!)

Isometrisk papir (1 cm)