Frozen Jitter & Frozen Reach?

Hi, so I have no experience whatsoever in coding and was instructed to use this program in my class to make a simple html. I created one successfully using the objects and reach 2 examples on p5js but weeks later when I came back to check on it, the jitter and reach animation are completely frozen. I don't know what's the problem but can anyone help fix this? Please bear with me on understanding answers since I'm really new to this.

var numSegments = 10, x = [] y = [], angle = [], segLength = 26, targetX, targetY; for (var i = 0; i < numSegments; i++) { x[i] = 0; y[i] = 0; angle[i] = 0; } var bug1; // Declare objects var bug2; var bug3; var bug4; function setup() { createCanvas(710, 400); strokeWeight(20); stroke(255, 100); x[x.length-1] = width/2; // Set base x-coordinate y[x.length-1] = height; // Set base y-coordinate
bug1 = new Jitter(); bug2 = new Jitter(); bug3 = new Jitter(); bug4 = new Jitter(); } function draw() { background(1000, 200, 100); reachSegment(0, mouseX, mouseY); for(var i=1; i<numSegments; i++) { reachSegment(i, targetX, targetY); } for(var j=x.length-1; j>=1; j--) { positionSegment(j, j-1); } for(var k=0; k<x.length; k++) { segment(x[k], y[k], angle[k], (k+1)*2); }
bug1.move(); bug1.display(); bug1.fill(51); bug2.move(); bug2.display(); bug3.move(); bug3.display(); bug4.move(); bug4.display(); } function positionSegment(a, b) { x[b] = x[a] + cos(angle[a]) * segLength; y[b] = y[a] + sin(angle[a]) * segLength; } function reachSegment(i, xin, yin) { var dx = xin - x[i]; var dy = yin - y[i]; angle[i] = atan2(dy, dx); targetX = xin - cos(angle[i]) * segLength; targetY = yin - sin(angle[i]) * segLength; } function segment(x, y, a, sw) { strokeWeight(sw); push(); translate(x, y); rotate(a); line(0, 0, segLength, 0); pop(); } // Jitter class function Jitter() { this.x1 = 300; this.y1 = 50; this.diameter = random(10, 30); this.speed = 1; this.move = function() { this.x1 += random(-this.speed, this.speed); this.y1 += random(-this.speed, this.speed); }; this.display = function() { ellipse(this.x1, this.y1, this.diameter, this.diameter); }; }

Answers

  • Hello, please edit your post properly formatting the code so it's readable.

    https://forum.processing.org/two/discussion/8045/how-to-format-code-and-text#latest

  • After a bit of tidying I got the code to run:

    • you had lost a comma between x=[] y=[]
    • bug1.fill(51) throws an error since Jitter doesn't contain a fill method...

    Here's some working code with a couple of additional improvements:

    var numSegments = 10,
        x = [], 
        y = [],
        angle = [],
        // array to store arbitrary number of bugs
        bugs = [],
        numBugs = 4, // change to number of required bugs
        segLength = 26,
        targetX,
        targetY;
    
    for (var i = 0; i < numSegments; i++) {
        x[i] = 0;
        y[i] = 0;
        angle[i] = 0;
    } 
    
    function setup() {
        createCanvas(710, 400);
        strokeWeight(20);
        stroke(255, 100);
        x[x.length - 1] = width / 2; // Set base x-coordinate
        y[x.length - 1] = height; // Set base y-coordinate 
    
        // populate the bugs array
        for(var i=0; i<numBugs; i++) {
            bugs[i] = new Jitter();
            // Set a random colour using a renamed implementation of the missing fill method
            bugs[i].setColour(100 + Math.random() * 155);
        }
    }
    
    function draw() {
        // colour channels can be set from 0-255
        background(255, 200, 100);
    
        reachSegment(0, mouseX, mouseY);
        for (var i = 1; i < numSegments; i++) {
            reachSegment(i, targetX, targetY);
        }
    
        for (var j = x.length - 1; j >= 1; j--) {
            positionSegment(j, j - 1);
        }
    
        for (var k = 0; k < x.length; k++) {
            segment(x[k], y[k], angle[k], (k + 1) * 2);
        }
    
        // iterate over bugs and get them moving
        for(var i=0; i<numBugs; i++) {
            var bug = bugs[i];
            bug.move();
            bug.display();
        }
    
    }
    
    function positionSegment(a, b) {
        x[b] = x[a] + cos(angle[a]) * segLength;
        y[b] = y[a] + sin(angle[a]) * segLength;
    }
    
    function reachSegment(i, xin, yin) {
        var dx = xin - x[i];
        var dy = yin - y[i];
        angle[i] = atan2(dy, dx);
        targetX = xin - cos(angle[i]) * segLength;
        targetY = yin - sin(angle[i]) * segLength;
    }
    
    function segment(x, y, a, sw) {
        strokeWeight(sw);
        push();
        translate(x, y);
        rotate(a);
        line(0, 0, segLength, 0);
        pop();
    }
    
    // Jitter class 
    function Jitter() {
        this.x1 = 300;
        this.y1 = 50;
        this.diameter = random(10, 30);
        this.speed = 1;
        this.fillColour = 255;
    }
    
    // Jitter methods should be added to the prototype:
    Jitter.prototype.move = function() {
        this.x1 += random(-this.speed, this.speed);
        this.y1 += random(-this.speed, this.speed);
    }
    
    Jitter.prototype.display = function() {
        fill(this.fillColour);
        ellipse(this.x1, this.y1, this.diameter, this.diameter);
    }
    
    Jitter.prototype.setColour = function(newColour) {
        this.fillColour = newColour;
    }
    

    The way you had implemented Jitter functions is reasonable up to a point; but if you want to add a lot of bug objects, adding methods to Jitter.prototype is more efficient...

Sign In or Register to comment.