Skip to content

Commit

Permalink
merging PR Chaosthebot#517: Chaos canvas: fix high resolutions and fr…
Browse files Browse the repository at this point in the history
…amerates

Chaosthebot#517: Chaos canvas: fix high resolutions and framerates

Description:
Fixes Chaosthebot#482

✅ PR passed with a vote of 7 for and 0 against, a weighted total of 7.0 and a threshold of 6.5, and a current meritocracy review.

Vote record:
@PlasmaPower: 1
@andrewda: 1
@flibustier: 1
@JustynC7: 1
@mark-i-m: 1
@phil-r: 1
@rhengles: 1
  • Loading branch information
PlasmaPower authored and chaosbot committed Jun 5, 2017
1 parent e830ab1 commit 07d79cf
Showing 1 changed file with 12 additions and 5 deletions.
17 changes: 12 additions & 5 deletions server/static/js/chaos.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const fg = "#f3482d";
const speed = 0.005;

canvas.width = 400;
canvas.height = 200;
Expand All @@ -13,13 +14,15 @@ ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("CHAOS", canvas.width / 2, canvas.height / 2);

const blockSize = 2 * (window.devicePixelRatio || 1);

const charLocation = [];
const pixLocation = [];
let lastX = -1;
let lastY = -1;

for (let x = 0; x < canvas.width; x += 2) {
for (let y = 0; y < canvas.height; y += 2) {
for (let x = 0; x < canvas.width; x += blockSize) {
for (let y = 0; y < canvas.height; y += blockSize) {
if (ctx.getImageData(x, y, 1, 1).data[3] !== 0) {
charLocation.push([x, y]);
pixLocation.push([0, 0]);
Expand All @@ -32,12 +35,16 @@ canvas.onmousemove = (e) => {
lastY = e.offsetY;
};

let prevTime;
function loop() {
const newTime = new Date().getTime();
const delta = newTime - (prevTime || newTime);
prevTime = newTime;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = fg;
for (let x = 0; x < pixLocation.length; x += 1) {
const xPos = pixLocation[x][0] + 0.1 * (charLocation[x][0] - pixLocation[x][0]);
let yPos = pixLocation[x][1] + 0.1 * (charLocation[x][1] - pixLocation[x][1]);
const xPos = pixLocation[x][0] + speed * delta * (charLocation[x][0] - pixLocation[x][0]);
let yPos = pixLocation[x][1] + speed * delta * (charLocation[x][1] - pixLocation[x][1]);
if (lastX > 0 && lastY > 0) {
const dx = pixLocation[x][0] - lastX;
const dy = pixLocation[x][1] - lastY;
Expand All @@ -46,7 +53,7 @@ function loop() {
}
}
pixLocation[x] = [xPos, yPos];
ctx.fillRect(pixLocation[x][0], pixLocation[x][1], 2, 2);
ctx.fillRect(pixLocation[x][0], pixLocation[x][1], blockSize, blockSize);
}
lastX = -1;
lastY = -1;
Expand Down

0 comments on commit 07d79cf

Please sign in to comment.