How to make object function interactive and change color (p5.js)

emmjah · October 2017

I'm struggling with my interactive code.

My goal is to have the "arm" (aka segments) change the color of the circle each time it passes through it, however i'm not sure how to go about writing the for/if statement to do this.

In addition, I'm not sure if my variables are declared correctly as multiple rings of circles are being displayed and I only want 8 ellipses to circle around the "arm".

Is it possible someone could help me de-bug this and maybe provide insight as to how I can go about making the ellipses change color?

Thanks in advance! (Below is my code)

JS:

var numSegments = 10, x = [], y = [], angle = [], segLength = 28, targetX, targetY;

for (var i = 0; i < numSegments; i++) { x[i] = 0; y[i] = 0; angle[i] = 0; }

let move = 0;

var ball1; var ball2; var ball3; var ball4; var ball5; var ball6; var ball7; var ball8;

function setup() { createCanvas(800,800); angleMode(DEGREES); strokeWeight(20); stroke(255, 100);

ball1 = new Ball(); ball2 = new Ball(); ball3 = new Ball(); ball4 = new Ball(); ball5 = new Ball(); ball6 = new Ball(); ball7 = new Ball(); ball8 = new Ball();

x[x.length-1] = width/2; // Set base x-coordinate y[x.length-1] = height/2; // Set base y-coordinate

}

ball1.move(); ball1.display();

ball2.move(); ball2.display();

// ball3.move(); // ball3.display();

// ball4.move(); // ball4.display();

// ball5.move(); // ball5.display();

// ball6.move(); // ball6.display();

// ball7.move(); // ball7.display();

// ball8.move(); // ball8.display(); }

function Ball(){ this.x = x; this.y = y; this.r = 20; this.col = color(255);

this.changeColor = function(){ this.col = color(random(255), random(255), random(255)); }

this.intersects = function(other) { var d = dist(this.x, this.y, other.x, other.y); if (d < this.r + other.r) { return true; } else { return false; } }

this.move= function(){ translate(400,400); rotate(move); move= move + 1;

};

this.display=function(){ pop();

// noFill();
strokeWeight(20);
// ellipse(0,0,550,550);

fill(255);

ellipse(205,185,20,20);
ellipse(-205,-185,20,20);

ellipse(-205,185,20,20);
ellipse(205,-185,20,20);


ellipse(0,275,20,20);
ellipse(0,-275,20,20);

ellipse(-275,0,20,20);
ellipse(275,0,20,20);

};

}

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); //the inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2. targetX = xin - cos(angle[i]) * segLength; //calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. targetY = yin - sin(angle[i]) * segLength; //calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1. }

function segment(x, y, a, sw) { strokeWeight(sw); push(); translate(x, y); //x = left/right translation, y = up/down translation, translations are cumulative and apply to everything that happens after rotate(a); //rotate(angle, [axis])....rotates a shape the amount specified by the angle parameter. //rotate multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop(). line(0, 0, segLength, 0); //sets all coordinates to 0, except for the x-coodinate of the second point pop(); }

// function windowResized() { // resizeCanvas(windowWidth, windowHeight); // }

HTML: <!DOCTYPE html> Midterm

body {padding: 0; margin: 0;}

Howdy, Stranger!

Categories

How to make object function interactive and change color (p5.js)