Class Crashed in JavaScript in Particle function

Question

Sameer_8 0 Newbie Poster

6 Years Ago

Hello I have java Script code was working but it crash in line 44 it says:

437anxious.html:44 Uncaught ReferenceError: Particle is not defined at animate (anxious.html:44)

My questions is " Particle is not define !! why it war defined and was working fine!! but i tried to play with it and i couldn't make it run ><
Can someone fix it please or till me how i can fix it!!
Here is my code:

<html>

<head>
    <title>Anxious</title>
    <style>
        body {
            background-color: rgb(0, 0, 0);
            margin: 0;
            display: flex;
            justify-content: center;
            align-content: center;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="toto.js"></script>
    <script>
        var canvas;
        var ctx;
        var particles = [];
        var particleIndex = 0;
        var particleNum = 15;
        //jquery init
        $(document).ready(function() {
            canvas = document.getElementById('myCanvas');
            ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            setInterval(animate, 30);
        });

        function animate() {
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            this.x = canvas.width / 2;
            this.y = canvas.height / 2;
            this.vx = Math.random() * 10 - 5;
            this.vy = Math.random() * 10 - 5;
            this.gravity = 0.3;
            particleIndex++;
            particles[particleIndex] = this;
            this.id = particleIndex;
            this.life = 0;
            this.maxLife = Math.random() * 30 + 60;
            this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
            Particle.prototype.draw = function() {
                this.x += this.vx;
                this.y += this.vy;
                if (Math.random() < 0.1) {
                    this.vx = Math.random() * 10 - 5;
                    this.vy = Math.random() * 10 - 5;
                }
                this.life++;
                if (this.life >= this.maxLife) {
                    delete particles[this.id];
                }
                ctx.fillStyle = this.color;
                //c.fillRect(this.x, this.y, 5, 10);
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2.5, degToRad(0), degToRad(360));
                ctx.fill();

            setInterval(function() {
                //normal setting before drawing over canvas w/ black background
                ctx.globalCompositeOperation = "source-over";
                ctx.fillStyle = "rgba(0,0,0,0.5)";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                for (var i = 0; i < particleNum; i++) {
                    new Particle();
                }
                // c.globalCompositeOperation = "darken";
                for (var i in particles) {
                    particles[i].draw();
                }
            });
            }
        }
    </script>
</head>

<body>
    <canvas id="myCanvas"></canvas>
</body>

</html>

and here is the library

function degToRad(deg) {
            var radians = (deg * Math.PI / 180) - Math.PI / 2;
            return radians;
        }

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

        /**
         * Returns a random integer between min (inclusive) and max (inclusive)
         * Using Math.round() will give you a non-uniform distribution!
         */
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

javascript

2 Contributors
3 Replies
402 Views
5 Hours Discussion Span
Latest Post 6 Years Ago Latest Post by Sameer_8

alan.davies 185 What's this?

6 Years Ago

I can't see Particle defined anywhere
Are you missing a library or is it defined in toto?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Sameer_8 0 Newbie Poster · Answer 1 · 2018-09-27T00:55:33+00:00

It was defined in toto but i moved it to the actuall code >< mybe this is my problem!

am going to redo the library and see what i come up with

Sameer_8 0 Newbie Poster · Answer 2 · 2018-09-27T02:09:30+00:00

Ok i deleted the library toto and i add the code to the core one but still it says runParticle is not defin >< please code someone help me !! i quit using the library but the code it does want to run why runParticle is not define!? i called but still!?

<html>

<head>
    <title>My canvas</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-content: center;
            background-color: black;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--    <script src="convergis.js"></script>-->

    <script>
        var canvas;
        var ctx;

        // jquery init
        $(document).ready(function runParticles() {
            canvas = document.getElementById('myCanvas');
            ctx = canvas.getContext('2d');
            var m = {x: canvas.width / 2,y: canvas.height / 2};
            // set canvas size
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            setInterval(Particle, 33);

            function Particle() {
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                this.x = m.x;
                this.y = m.y;
                this.vx = Math.random() * 10 - 5;
                this.vy = Math.random * 10 - 5;
                this.gravity = 0.3;
                var particles = {};
                var particleIndex = 0;
                var particleNum = 8;
                particleIndex++;
                particles[particleIndex] = this;
                this.id = particleIndex;
                this.life = 0;
                this.maxLife = Math.random() * 30 + 60;
                this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
            }
            particles.prototype.draw = function() {
                this.x += this.vx;
                this.y += this.vy;

                if (Math.random() < 0.1) {
                    this.vx = Math.random() * 10 - 5;
                    this.vy = Math.random() * 10 - 5;
                }
                this.life++;
                if (this.life <= this.maxLife) {
                    delete particles[this.id];
                }
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2.5, degToRad(0), degToRad(360));
                ctx.fill();
            };

            function Draw() {
                window.requestAnimationFrame(Draw);
                ctx.globalCompositeOperation = "source-over";
                ctx.fillStyle = "rgba(0,0,0,0.5)";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                for (var i = 0; i < particleNum; i++) {
                    new particles();
                }
                for (var i in particles) {
                    particles[i].draw();
                }
            }
            Draw();
            canvas.addEventListener("mousemove", (evt) => {
                m = oMoousePos(canvas, evt);
            })
            canvas.addEventListener("mouseleave", (evt) => {
                m = {x: canvas.width / 2, y: canvas.height / 2};
            })
            function degToRad(deg){
                var radians = (deg * Math.PI / 180) - Math.PI /2;
                return radians;
            }
            runParticles();
            function oMousePos(canvas,evt){
                var ClientRect = canvas.getBoundingClientRect();
                return{
                    x:Math.round(evt.clientX - ClientRect.left), y:Math.round(evt.clientY - ClientRect.top)
                }
            }

        });
    </script>

</head>

<body>

    <canvas id="myCanvas"> </canvas>

</body>

</html>