1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
| import { ref, watch } from 'vue'; const wave = ref('') const canvasWidth = ref(1920) const canvasHeight = ref(800)
class Line { constructor (a, b, c, d, z, start, end, gap) { this.a = a this.b = b this.c = c this.d = d this.z = z this.start = start this.end = end this.gap = gap this.pointList = [] this.computePointList() } computePointList () { this.pointList = [] for (let i = this.start; i <= this.end; i = i + this.gap) { let x = i let y = this.a * Math.sin((this.b * x + this.c) / 180 * Math.PI) + this.d let offset = i this.pointList.push({ x, y, z: this.z, originX: x, offset }) } } } const lineList = [ new Line(20, 2, 0, 0, -390, -300, 300, 10), new Line(20, 2, 0, 0, -360, -300, 300, 10), new Line(20, 2, 0, 0, -330, -300, 300, 10), new Line(20, 2, 0, 0, -300, -300, 300, 10), new Line(20, 2, 0, 0, -270, -300, 300, 10), new Line(20, 2, 0, 0, -240, -300, 300, 10), new Line(20, 2, 0, 0, -210, -300, 300, 10), new Line(20, 2, 0, 0, -180, -300, 300, 10), new Line(20, 2, 0, 0, -150, -300, 300, 10), new Line(20, 2, 0, 0, -120, -300, 300, 10), new Line(20, 2, 0, 0, -90, -300, 300, 10), new Line(20, 2, 0, 0, -60, -300, 300, 10), new Line(20, 2, 0, 0, -30, -300, 300, 10), new Line(20, 2, 0, 0, 0, -300, 300, 10), new Line(20, 2, 0, 0, 30, -300, 300, 10), new Line(20, 2, 0, 0, 60, -300, 300, 10), new Line(20, 2, 0, 0, 90, -300, 300, 10), new Line(20, 2, 0, 0, 120, -300, 300, 10), new Line(20, 2, 0, 0, 150, -300, 300, 10), new Line(20, 2, 0, 0, 180, -300, 300, 10), new Line(20, 2, 0, 0, 210, -300, 300, 10), new Line(20, 2, 0, 0, 240, -300, 300, 10), new Line(20, 2, 0, 0, 270, -300, 300, 10), new Line(20, 2, 0, 0, 300, -300, 300, 10), ]
const draw = (visual) => { const context = wave.value.getContext("2d"); context.clearRect(0, 0, canvasWidth.value, canvasHeight.value) lineList.forEach(line => { line.pointList.forEach(item => { const pointSize = 1.5 * visual.z / (visual.z - item.z) context.beginPath() context.arc(item.canvasX + canvasWidth.value / 2, item.canvasY + canvasHeight.value / 2, pointSize, 0, 2 * Math.PI) context.closePath() context.fill() }) }) } const updatePointList = (rotationAngleSpeed, visual) => { lineList.forEach(line => { line.pointList.forEach(item => { let x = item.x let z = item.z item.x = x * Math.cos(rotationAngleSpeed / 180 * Math.PI) - z * Math.sin(rotationAngleSpeed / 180 * Math.PI) item.z = z * Math.cos(rotationAngleSpeed / 180 * Math.PI) + x * Math.sin(rotationAngleSpeed / 180 * Math.PI) item.y = line.a * Math.sin((line.b * item.originX + line.c + item.offset) / 180 * Math.PI) + line.d item.canvasX = (item.x - visual.x) * visual.z / (visual.z - z) item.canvasY = (item.y - visual.y) * visual.z / (visual.z - z) }) }) }
const animationFrame = (visual) => { window.requestAnimationFrame(() => { lineList.forEach((line,index) => { line.pointList.forEach(item => { line.c = item.offset + index * 30 item.offset = item.offset + 1 }) updatePointList(.003,visual) }) draw(visual) animationFrame(visual) }) }
watch(wave, (newValue, oldValue) => { const visual = { x: 0, y: -70, z: 500 } draw(visual); animationFrame(visual) })
|