Frozen Jitter & Frozen Reach?

skyxdreamer

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); }; }

_vk

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

blindfish

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...