Dorenal

Members
  • Content Count

    3
  • Joined

  • Last visited

About Dorenal

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Well, the rect borders are not needed, so I can remove it. Later, I'll probably need to put borders but only around certains rect. But I still don't have any clue about why the framerate is so low, I mean I didn't use any loop or redraw everything at each frame, so why ?
  2. Hello Ivan First and foremost, thanks a lot for your guidance. Pixi looks really tought for a beginner like me which has never used any graphical lib before (I mean, other than HTML/CSS) So, if I understand well, your advise is to create only one instance of PIXI.Graphics per row, and update all the row if needed, am I right ? I have tried it, and it looks really more effective. Currently, my code look like this: /** * Global defines */ const BYTE_COUNT = 4096; const BYTE_PER_LINE = 64; const BYTE_WIDTH = 20; const CANVAS_WIDTH = BYTE_WIDTH * BYTE_PER_LINE; const CANVAS_HEIGHT = parseInt(BYTE_COUNT / BYTE_PER_LINE) * BYTE_WIDTH; /** * App */ function setup() { const app = new PIXI.Application({ width: CANVAS_WIDTH, height: CANVAS_HEIGHT }); document.getElementById('ram-app').appendChild(app.view); console.log("Setting PIXI dimension to ", CANVAS_WIDTH, "x", CANVAS_HEIGHT); const bytes = initializeBytes(); const rows = initializeRows(bytes); console.log(rows); console.time('drawAll'); rows.forEach(row => { app.stage.addChild(row.renderer); row.render(); }); console.timeEnd('drawAll'); } function initializeBytes() { const bytes = []; for (let i = 0; i < BYTE_COUNT; i++) { const x = i * BYTE_WIDTH % (BYTE_PER_LINE * BYTE_WIDTH); const y = parseInt(i / BYTE_PER_LINE) * BYTE_WIDTH; const rect = new PIXI.Rectangle(x, y, BYTE_WIDTH, BYTE_WIDTH); bytes.push(rect); } return bytes; } function initializeRows(bytes) { const rows = []; for (let i = 0; i < BYTE_COUNT / BYTE_PER_LINE; i++) { const start = i * BYTE_PER_LINE; const end = start + BYTE_PER_LINE; const row = new Row(start, end, bytes) rows.push(row); } return rows; } class Row { constructor(start, end, bytes) { this.start = start; this.end = end; this.bytes = bytes; this.renderer = new PIXI.Graphics(); } render() { this.renderer.clear(); for (let i = this.start; i < this.end; i++) { const rect = this.bytes[i]; const fillColor = 0x3c40c6; // Player color this.renderer .lineStyle(1, 0xffffff) .beginFill(fillColor) .drawShape(rect) .endFill(); } } } /** * Running everything */ document.addEventListener('DOMContentLoaded', () => setup()); Everything is pretty fast, drawing all the 4096 rectangle took only 20ms. So it's much better than before, and so much better compared to p5 which take 450ms (20x more). What I don't get is that I don't have 60FPS at this point, I got only 54~57. And this is weird because all I do is drawing rectangle ONE time. Do you think I'm missing something ? See and download the full code here. Next, I was thinking about using sprites instead of graphics, because it could be really fun and more visual. I could use texture like grass, water, lava and sand to materialize each player. But let's do things in order.
  3. Hello everyone I have a school project, which is called "corewar" to do. This is about coding a virtual machine in C, and running basic programs into its memory. I want to go further and create a "visualizator", which allow anyone to see what's inside the memory during each cpu cyle. Well, might sound very abstract, so here are som few pic to illustrate how it looks: A gif A video And my first implementation (see attached video) I have tried to use p5js but it's too slow. So I'm trying pixi, but I don't know how to get started, good practices, etc... I read the code reference (the doc), which is pretty handy, but it didn't give me any advises of how to structure my code, the right way to use classes (as PIXI.Graphics for example), etc... Right now, my code looks like this: function setup() { const app = new PIXI.Application({ width: CANVAS_WIDTH, height: CANVAS_HEIGHT }); console.log("Setting PIXI dimension to ", CANVAS_WIDTH, "x", CANVAS_HEIGHT); const bytes = initializeBytes(app); // An array containing all our bytes const processes = []; // An array containing all our processes document.getElementById('ram-app').appendChild(app.view); bytes.forEach(b => b.draw()); } class Byte { /** * rect: PIXI.Rectangle instance * renderer: PIXI.Graphics instance */ constructor(rect, renderer) { this.rect = rect; this.renderer = renderer; this.color = 0xFFFFFF; } draw() { const { x, y, width, height } = this.rect; this.renderer .clear() .lineStyle(1, 0x000000, 1, 0) .beginFill(this.color) .drawRoundedRect(x, y, width, height, 3) .endFill(); } } I have 4096 bytes (so 4096 instances of PIXI.Rectangle and PIXI.Graphics), and it's already really slow. I mean, I only have 20 FPS like this. I'm pretty sure I'm missing some obvious points, so any help to improve this code, and make it run @60FPS will be really apprecated Thanks a lot! Mar-25-2019 10-35-15.mp4