Skip to content

Commit

Permalink
Merge pull request #2 from TheMcMurder/tabs
Browse files Browse the repository at this point in the history 
no tabs
  • Loading branch information
@TheMcMurder
TheMcMurder authored Aug 28, 2019
2 parents 03fca60 + fb53140 commit 1b0b510
Showing 1 changed file with 80 additions and 80 deletions.
160 changes: 80 additions & 80 deletions imperial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,94 +11,94 @@ export function imperialBackground(options = {}) {
canvasWrapper.appendChild(canvas);
document.body.appendChild(canvasWrapper);

var context = canvas.getContext("gl") || canvas.getContext("2d"),
scaleFactor = 2.5, // Noise size
samples = [],
sampleIndex = 0,
scanOffsetY = 0,
scanSize = 0,
FPS = 50,
scanSpeed = FPS * 15, // 15 seconds from top to bottom
SAMPLE_COUNT = 10;

window.onresize = function() {
canvas.width = canvas.offsetWidth / scaleFactor;
canvas.height = canvas.width / (canvas.offsetWidth / canvas.offsetHeight);
scanSize = (canvas.offsetHeight / scaleFactor) / 3;

samples = []
for(var i = 0; i < SAMPLE_COUNT; i++)
samples.push(generateRandomSample(context, canvas.width, canvas.height));
var context = canvas.getContext("gl") || canvas.getContext("2d"),
scaleFactor = 2.5, // Noise size
samples = [],
sampleIndex = 0,
scanOffsetY = 0,
scanSize = 0,
FPS = 50,
scanSpeed = FPS * 15, // 15 seconds from top to bottom
SAMPLE_COUNT = 10;

window.onresize = function() {
canvas.width = canvas.offsetWidth / scaleFactor;
canvas.height = canvas.width / (canvas.offsetWidth / canvas.offsetHeight);
scanSize = (canvas.offsetHeight / scaleFactor) / 3;

samples = []
for(var i = 0; i < SAMPLE_COUNT; i++)
samples.push(generateRandomSample(context, canvas.width, canvas.height));

if (!animate) {
window.requestAnimationFrame(render);
}
};

function interpolate(x, x0, y0, x1, y1) {
return y0 + (y1 - y0)*((x - x0)/(x1 - x0));
}


function generateRandomSample(context, w, h) {
var intensity = [];
var random = 0;
var factor = h / 50;
var trans = 1 - Math.random() * 0.05;

var intensityCurve = [];
for(var i = 0; i < Math.floor(h / factor) + factor; i++)
intensityCurve.push(Math.floor(Math.random() * 15));

for(var i = 0; i < h; i++) {
var value = interpolate((i/factor), Math.floor(i / factor), intensityCurve[Math.floor(i / factor)], Math.floor(i / factor) + 1, intensityCurve[Math.floor(i / factor) + 1]);
intensity.push(value);
}

var imageData = context.createImageData(w, h);
for(var i = 0; i < (w * h); i++) {
var k = i * 4;
var color = Math.floor(36 * Math.random());
// Optional: add an intensity curve to try to simulate scan lines
color += intensity[Math.floor(i / w)];
imageData.data[k] = imageData.data[k + 1] = imageData.data[k + 2] = color;
imageData.data[k + 3] = Math.round(255 * trans);
}
return imageData;
}

function render() {
context.putImageData(samples[Math.floor(sampleIndex)], 0, 0);

sampleIndex += 20 / FPS; // 1/FPS == 1 second
if(sampleIndex >= samples.length) sampleIndex = 0;

var grd = context.createLinearGradient(0, scanOffsetY, 0, scanSize + scanOffsetY);

grd.addColorStop(0, 'rgba(255,255,255,0)');
grd.addColorStop(0.1, 'rgba(255,255,255,0)');
grd.addColorStop(0.2, 'rgba(255,255,255,0.2)');
grd.addColorStop(0.3, 'rgba(255,255,255,0.0)');
grd.addColorStop(0.45, 'rgba(255,255,255,0.1)');
grd.addColorStop(0.5, 'rgba(255,255,255,1.0)');
grd.addColorStop(0.55, 'rgba(255,255,255,0.55)');
grd.addColorStop(0.6, 'rgba(255,255,255,0.25)');
//grd.addColorStop(0.8, 'rgba(255,255,255,0.15)');
grd.addColorStop(1, 'rgba(255,255,255,0)');

context.fillStyle = grd;
context.fillRect(0, scanOffsetY, canvas.width, scanSize + scanOffsetY);
context.globalCompositeOperation = "lighter";

scanOffsetY += (canvas.height / scanSpeed);
if(scanOffsetY > canvas.height) scanOffsetY = -(scanSize / 2);
};

function interpolate(x, x0, y0, x1, y1) {
return y0 + (y1 - y0)*((x - x0)/(x1 - x0));
}


function generateRandomSample(context, w, h) {
var intensity = [];
var random = 0;
var factor = h / 50;
var trans = 1 - Math.random() * 0.05;

var intensityCurve = [];
for(var i = 0; i < Math.floor(h / factor) + factor; i++)
intensityCurve.push(Math.floor(Math.random() * 15));

for(var i = 0; i < h; i++) {
var value = interpolate((i/factor), Math.floor(i / factor), intensityCurve[Math.floor(i / factor)], Math.floor(i / factor) + 1, intensityCurve[Math.floor(i / factor) + 1]);
intensity.push(value);
}

var imageData = context.createImageData(w, h);
for(var i = 0; i < (w * h); i++) {
var k = i * 4;
var color = Math.floor(36 * Math.random());
// Optional: add an intensity curve to try to simulate scan lines
color += intensity[Math.floor(i / w)];
imageData.data[k] = imageData.data[k + 1] = imageData.data[k + 2] = color;
imageData.data[k + 3] = Math.round(255 * trans);
}
return imageData;
}

function render() {
context.putImageData(samples[Math.floor(sampleIndex)], 0, 0);

sampleIndex += 20 / FPS; // 1/FPS == 1 second
if(sampleIndex >= samples.length) sampleIndex = 0;

var grd = context.createLinearGradient(0, scanOffsetY, 0, scanSize + scanOffsetY);

grd.addColorStop(0, 'rgba(255,255,255,0)');
grd.addColorStop(0.1, 'rgba(255,255,255,0)');
grd.addColorStop(0.2, 'rgba(255,255,255,0.2)');
grd.addColorStop(0.3, 'rgba(255,255,255,0.0)');
grd.addColorStop(0.45, 'rgba(255,255,255,0.1)');
grd.addColorStop(0.5, 'rgba(255,255,255,1.0)');
grd.addColorStop(0.55, 'rgba(255,255,255,0.55)');
grd.addColorStop(0.6, 'rgba(255,255,255,0.25)');
//grd.addColorStop(0.8, 'rgba(255,255,255,0.15)');
grd.addColorStop(1, 'rgba(255,255,255,0)');

context.fillStyle = grd;
context.fillRect(0, scanOffsetY, canvas.width, scanSize + scanOffsetY);
context.globalCompositeOperation = "lighter";

scanOffsetY += (canvas.height / scanSpeed);
if(scanOffsetY > canvas.height) scanOffsetY = -(scanSize / 2);

if (animate) {
window.requestAnimationFrame(render);
}
}
window.onresize();
window.requestAnimationFrame(render);
}
window.onresize();
window.requestAnimationFrame(render);
}

export function characterMorph(jQuery) {
Expand Down

0 comments on commit 1b0b510

Please sign in to comment.