brush-alpha.js

/* title: Raw Brush categories: brush raw files: ../point_src/math.js ../point_src/core/head.js ../point_src/pointpen.js ../point_src/pointdraw.js ../point_src/point-content.js ../point_src/pointlist.js ../point_src/point.js ../point_src/events.js ../point_src/automouse.js ../point_src/stage.js ../point_src/extras.js ../point_src/random.js ../point_src/functions/clamp.js ../point_src/distances.js ../point_src/split.js ../point_src/gradient.js --- */ ;(()=>{ // brushSize simply is the thikness of the brush stroke let mouseX, mouseY; let brushSize = 10; let f = 0.5; let spring = 0.4; let friction = 0.45; let v = 0.5; let r = 0; let vx = 0; let vy = 0; let splitNum = 100; let diff = 2; function brushDraw(ctx, mouseIsPressed) { let strokeWeight = (v)=>ctx.lineWidth=v; let line = function(x1, y1, x2, y2){ ctx.beginPath(); // Start a new path ctx.moveTo(x1, y1); // Move the pen to (30, 50) ctx.lineTo(x2, y2); // Draw a line to (150, 100) ctx.stroke(); // Render the path } if(mouseIsPressed) { if(!f) { f = true; x = mouseX; y = mouseY; } vx += ( mouseX - x ) * spring; vy += ( mouseY - y ) * spring; vx *= friction; vy *= friction; v += Math.sqrt( vx*vx + vy*vy ) - v; v *= 0.6; oldR = r; r = brushSize - v; for( let i = 0; i < splitNum; ++i ) { oldX = x; oldY = y; x += vx / splitNum; y += vy / splitNum; oldR += ( r - oldR ) / splitNum; if(oldR < 1) { oldR = 1; } strokeWeight( oldR+diff ); // AMEND: oldR -> oldR+diff line( x, y, oldX, oldY ); strokeWeight( oldR ); // ADD line( x+diff*1.5, y+diff*2, oldX+diff*2, oldY+diff*2 ); // ADD line( x-diff, y-diff, oldX-diff, oldY-diff ); // ADD } } else if(f) { vx = vy = 0; f = false; } } class MainStage extends Stage { canvas='playspace' // live=false live = true mounted(){ let c = this.center.copy().update({ radius: this.center.radius + 40 , color:"hsl(299deg 62% 44%)" }) let g = this.g = (new Gradient).linear(this.center.update({radius: 200})) g.addStops({ 0: "hsl(299deg 62% 44%)", 1: "hsl(244deg 71% 56%)" }) let grad = g.linear() } firstDraw(ctx) { let grad = this.g.getObject(ctx) this.ctx.strokeStyle = grad// 'green' this.ctx.fillStyle = grad// 'green' } draw(ctx){ // this.clear(ctx) let pos = this.mouse.position brushDraw(ctx, this.mouse.isDown(0)) mouseX = pos.x mouseY = pos.y } } ;stage = MainStage.go(); })()