lines-multi-examples.js

/* categories: lines curve files: ../point_src/core/head.js ../point_src/pointpen.js ../point_src/pointdraw.js ../point_src/math.js ../point_src/point-content.js pointlist ../point_src/point.js mouse dragging ../point_src/setunset.js ../point_src/stroke.js ../point_src/stage.js # ../others/curve_src/curve.js # ../point_src/line.js # ../point_src/extras.js ../point_src/catenary-curve.js ../point_src/curve-extras.js */ var superV = 0 class MainStage extends Stage { canvas = 'playspace' mounted(){ this.points = this.pointPair() this.linePoints = this.pointPair() this.curvePoints = this.pointPair(150) this.cantenaryPoints = this.pointPair(300) this.line = new Line(...this.linePoints, 'green', 2) /*this.line = new Line(...this.points, 'green', 2)*/ this.curvyLine = new BezierCurve(...this.curvePoints) this.cantenary = this.setupCantenary(this.cantenaryPoints) /* this.cantenary = this.setupCantenary(this.pointPair(40)) */ this.tick = 0 this.setupDragging() } setupCantenary(points) { let c = new CantenaryCurve(...points) // this.cantenary.sine = 30 c.restLength = 430 c.bounceRate = .08 c.reductionRate = .999 c.swingDegrees = 20 c.elasticity = .09 return c } setupDragging() { this.dis = new Dragging this.dis.initDragging(this) // this.dis.onDragMove = this.onDragMove.bind(this) // this.dis.onDragEnd = this.onDragEnd.bind(this) this.dis.addPoints( ...this.linePoints , ...this.curvePoints , ...this.cantenaryPoints ) } pointPair(yOffset=0) { let cumX = 0 , cumOffset = 200 , globalY = 100 , offset = ()=> cumX+=cumOffset , c = this.compass ; let ps = new PointList( new Point({ name: "a" , rotation: c.right , x: offset() , y: globalY + yOffset , radius: 60 }) , new Point({ name: "b" , rotation: c.left // RIGHT_DEG , x: offset() , y: globalY + 50 + yOffset , radius: 70 }) ) return ps; } draw(ctx){ this.clear(ctx) this.line.render(ctx) this.drawCantenary(ctx) this.curvyLine.points.pen.indicators(ctx, {line: {color: '#999', width: 1}}) this.curvyLine.render(ctx, {width: 3, color: '#990088'}) let p = this.dis.getPoint(); if(p) { p.pen.circle(ctx) } this.tick += 1 } drawCantenary(ctx) { let cantenary = this.cantenary; cantenary.render(ctx) let tick = this.tick if(tick % 1 == 0) { cantenary.update(ctx, tick) cantenary.updateSwing(ctx, tick) } } } stage = MainStage.go(/*{ loop: true }*/)