Canvas alternating shapes with gravity

I have this canvas function. The task: To get the shapes to alternate between circle and triangle.

I tried just changing the Draw method to show me falling triangles but I can only get a plain black triangle to show up. But no gravity is applied to it. Just one static triangle. But the same code, before I edit the draw function, gives me many circles dropping at random and at random speeds. I can't seem to figure out why gravity is not being applied to the triangle as well. I find it very strange that if I add a ctx.arc nin the draw method it will display circles falling again. I'm not sure what the difference is with the triangle.

Codepen: https://codepen.io/stefanomartinengo/pen/XVqapL

The code:

var canvas, ctx;
class SuralinkApplicationFX
{    
constructor()
{
    this._frame = 0;
    this._canvasInitted = false;
    this._shapes = [];
    this.InitCanvas();
    this.Render();
}

InitCanvas()
{
    this._canvasInitted = true;
    canvas = document.getElementById('theCanvas'),
    ctx = canvas.getContext('2d');
    canvas.setAttribute('width', window.innerWidth);

    this.DropShapes();

    window.requestAnimationFrame(() => this.Render());
}

DropShapes()
{
    if(this._shapes.length <= 0) window.requestAnimationFrame(() => 
this.Render());

    var howManyToDrop = getRandomInt(1,12);

    for(var xIt=1; xIt<=howManyToDrop; xIt++)
    {
        var shape = new Circle(
             getRandomInt(0,parseInt(canvas.getAttribute('width'))),
             0,randomColors(),
             randomNumFrom(0.15,0.65),randomNumFrom(0.05,1.45),
             randomNumFrom(2,20));
        this._shapes.push(shape);

    }

    setTimeout(() => this.DropShapes(),getRandomInt(350,950));
}

Render()
{

    if(this._canvasInitted == true)
    {

        this._frame++;
        this._can_w = parseInt(canvas.getAttribute('width')),
        this._can_h = parseInt(canvas.getAttribute('height')),

        ctx.clearRect(0, 0, this._can_w, this._can_h);

        this.UpdateShapes();
        this.DrawShapes();
    }

    if(this._shapes.length > 0) window.requestAnimationFrame(() => 
this.Render());
}

DrawShapes()
{
    this._shapes.forEach(function(shape){
  shape.Draw();
    },this);
}

UpdateShapes()
{
    this._shapes.forEach(function(shape,idx){
        shape.ApplyGravity();
    },this);
}
}

class Shape
{
constructor(type,x,y,color,alpha,gravity)
{
    this._type = type;
    this._x = x;
    this._y = y;
    this._color = color;
this._gravity = gravity;
    this._alpha = alpha;
}

get type() { return this._type; }
get x() { return this._x; }
get y() { return this._y; }

ApplyGravity()
{
    this._y += this._gravity;
}

Draw() { 
}
}

class Circle extends Shape
{
constructor(x,y,color,alpha,gravity,radius)
{
    super("circle",x,y,color,alpha,gravity);
    this._radius = radius;      
 }

 Draw()
 {
  ctx.fillStyle = 'rgba('+this._color+','+this._alpha+')';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this._radius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
}
}

function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomNumFrom(min, max)
{
return Math.random()*(max - min) + min;
}

function randomColors() {
return 

`${Math.round(randomNumFrom(0,255))},
 ${Math.round(randomNumFrom(0,255))},
 ${Math.round(randomNumFrom(0,255))}`
 }

var suralinkAppFx = new SuralinkApplicationFX();

What I tried:

 class Circle extends Shape
{
   constructor(x,y,color,alpha,gravity,radius)
{
    super("circle",x,y,color,alpha,gravity);
    this._radius = radius;      
}
 DrawT() {
  ctx.beginPath();
  ctx.moveTo(75, 50);
  ctx.lineTo(100, 75);
  ctx.lineTo(100, 25);
  ctx.fill();
}
}

1 answer

  • answered 2018-01-13 18:29 Blindman67

    You are not using the shapes position. Simple fix as follows

      DrawT() {
        // set position via transform
        ctx.setTransform(1,0,0,1,this._x,this._y);
        ctx.beginPath();
        ctx.moveTo(-12, 0);
        ctx.lineTo(13, 25);
        ctx.lineTo(13, -25);
        ctx.fill();
        // reset the transform (or better yet after all drawn)
        ctx.setTransform(1,0,0,1,0,0);
      }
    

    You also have many problems in the code style that is effecting overall performance. Without proper testing it feels like its 10 times too slow.