From 0400358f7fb28a483ac2a93b0e83c2e0f74e31f8 Mon Sep 17 00:00:00 2001 From: JerwuQu Date: Wed, 22 Nov 2017 08:31:18 +0100 Subject: [PATCH] Add vertical slicing (#30) * Add vertical slicing * New slice drawing; allows horizontal and vertical slicing --- src/js/HuesCanvas.js | 96 +++++++++++++++++++++++++++++++------------- src/js/HuesCore.js | 12 +++++- src/js/HuesInfo.js | 8 +++- 3 files changed, 83 insertions(+), 33 deletions(-) diff --git a/src/js/HuesCanvas.js b/src/js/HuesCanvas.js index 12b37b3..671abd5 100644 --- a/src/js/HuesCanvas.js +++ b/src/js/HuesCanvas.js @@ -59,12 +59,12 @@ class HuesCanvas { this.xBlur = false; this.yBlur = false; - this.sliceAvgSegments = 15; - this.sliceCount = 0; - this.sliceSegments = []; - this.sliceDistances = []; this.sliceDistance = 0; this.sliceStart = 0; + this.slices = { + x : this.makeSliceObj(25), + y : this.makeSliceObj(15) + }; // trippy mode this.trippyStart = [0, 0]; // x, y @@ -104,6 +104,15 @@ class HuesCanvas { window.addEventListener('resize', this.resize.bind(this)); this.resize(); } + + makeSliceObj(avgSegments) { + return { + count : 0, + avgSegments : avgSegments, + segments : [], + distances : [] + }; + } setInvert(invert) { this.invert = invert; @@ -232,20 +241,35 @@ class HuesCanvas { drawSlice(bitmap, drawWidth, drawHeight, width, height) { this.offContext.clearRect(0,0,width,height); - - let bitmapoffset = 0; - let drawOffset = 0; - for(let i = 0; i < this.sliceCount; i++) { - let segment = this.sliceSegments[i]; - let segmentBitmapHeight = Math.round(segment * bitmap.height); - let segmentDrawHeight = Math.round(segment * drawHeight); - this.offContext.drawImage(bitmap, - 0 , bitmapoffset, // subsection x, y - bitmap.width, segmentBitmapHeight, // sub w/h - this.sliceDistances[i] * this.sliceDistance, drawOffset, // drawn section x, y - drawWidth, segmentDrawHeight); // drawn w/h - bitmapoffset += segmentBitmapHeight; - drawOffset += segmentDrawHeight; + + let bitmapXOffset = 0; + let drawXOffset = 0; + for (let i = 0; i < this.slices.x.count; i++) { + let xSegment = this.slices.x.segments[i]; + let sliceXDistance = this.slices.x.distances[i] * this.sliceDistance; + let segmentBitmapWidth = Math.round(xSegment * bitmap.width); + let segmentDrawWidth = Math.round(xSegment * drawWidth); + + let bitmapYOffset = 0; + let drawYOffset = 0; + for (let j = 0; j < this.slices.y.count; j++) { + let ySegment = this.slices.y.segments[j]; + let sliceYDistance = this.slices.y.distances[j] * this.sliceDistance; + let segmentBitmapHeight = Math.round(ySegment * bitmap.height); + let segmentDrawHeight = Math.round(ySegment * drawHeight); + + this.offContext.drawImage(bitmap, + bitmapXOffset, bitmapYOffset, // subsection x, y + segmentBitmapWidth, segmentBitmapHeight, // subsection w, h + drawXOffset + sliceYDistance, drawYOffset + sliceXDistance, // drawn x, y + segmentDrawWidth, segmentDrawHeight); // drawn w, h + + bitmapYOffset += segmentBitmapHeight; + drawYOffset += segmentDrawHeight; + } + + bitmapXOffset += segmentBitmapWidth; + drawXOffset += segmentDrawWidth; } return this.offCanvas; @@ -573,7 +597,7 @@ class HuesCanvas { this.trippyOn = saveTrippy; } - doSlice(beatLength, beatCount) { + doSlice(beatLength, beatCount, sliceX, sliceY) { let transitionTime = Math.min(0.06, beatLength); this.sliceStart = this.audio.currentTime; @@ -581,30 +605,44 @@ class HuesCanvas { this.sliceRampDown = this.sliceStart + (beatLength * beatCount) - transitionTime; this.sliceTransitionTime = transitionTime; - this.generateSliceSegments(); + if (sliceX) + this.generateSliceSegments('x'); + else + this.resetSliceSegments('x'); + if (sliceY) + this.generateSliceSegments('y'); + else + this.resetSliceSegments('y'); + this.needsRedraw = true; } - generateSliceSegments() { - let even = 1.0 / this.sliceAvgSegments; + generateSliceSegments(direction) { + let even = 1.0 / this.slices[direction].avgSegments; let spread = even / 2; let total = 0; let i; for(i = 0; ; i++) { - let deviation = Math.random() * spread*2 - spread; - let rando = even + deviation; - this.sliceSegments[i] = rando; - total += this.sliceSegments[i]; + let rando = even + Math.random() * spread * 2 - spread; + this.slices[direction].segments[i] = rando; + total += rando; - this.sliceDistances[i] = Math.random() * this.blurAmount - this.blurAmount/2; + this.slices[direction].distances[i] = + Math.random() * this.blurAmount - this.blurAmount / 2; if(total > 1.0) { - this.sliceSegments[i] -= total - 1.0; + this.slices[direction].segments[i] -= total - 1.0; break; } } - this.sliceCount = i+1; + this.slices[direction].count = i + 1; + } + + resetSliceSegments(direction) { + this.slices[direction].count = 1; + this.slices[direction].segments[0] = 1; + this.slices[direction].distances[0] = 0; } setBlurDecay(decay) { diff --git a/src/js/HuesCore.js b/src/js/HuesCore.js index 046bdcc..58fd0bb 100644 --- a/src/js/HuesCore.js +++ b/src/js/HuesCore.js @@ -795,7 +795,15 @@ class HuesCore { break; case 'S': case 's': - this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat()); + this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat(), false, true); + break; + case 'V': + case 'v': + this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat(), true, false); + break; + case '@': + case '#': + this.renderer.doSlice(this.getBeatLength(), this.charsToNextBeat(), true, true); break; case 'I': if (this.isFullAuto) { @@ -809,7 +817,7 @@ class HuesCore { if ([".", "+", "|", "¤"].indexOf(beat) == -1) { this.renderer.clearBlackout(); } - if([".", "+", "¤", ":", "*", "X", "O", "~", "=", "i", "I", "s"].indexOf(beat) == -1) { + if([".", "+", "¤", ":", "*", "X", "O", "~", "=", "i", "I", "s", "v", "#"].indexOf(beat) == -1) { this.randomColour(); if (this.isFullAuto) { this.randomImage(); diff --git a/src/js/HuesInfo.js b/src/js/HuesInfo.js index 9a1de3d..5f2a31f 100644 --- a/src/js/HuesInfo.js +++ b/src/js/HuesInfo.js @@ -43,8 +43,12 @@ const beatGlossary = [ "= Fade and change image", "i Invert all colours", "I Invert & change image", - "s Slice", - "S Slice and change image" + "s Horizontal slice", + "S Horizontal slice and change image", + "v Vertical slice", + "V Vertical slice and change image", + "# Double slice", + "@ Double slice and change image" ]; const shortcuts = [