Processing following control - processing

Processing code as below:
int maxCircle = 200;
float minDistance=2;
float distance;
Circle [] circles= new Circle[maxCircle];
void setup(){
size(800,800);
smooth();
for(int i=0;i<maxCircle;i++){
circles[i] = new Circle(random(width),random(height),random(2,20));
}
}
void draw(){
background(255,255);
for(int i=0;i<maxCircle;i++){
circles[i].update(width,height);
for(int j=0;j<maxCircle;j++){
distance = dist(circles[i].x,circles[i].y,circles[j].x,circles[j].y);
if(distance<minDistance){
stroke(0,50);
noFill();
line(circles[i].x,circles[i].y,circles[j].x,circles[j].y);}}
circles[i].display();
}
}
void mouseMoved(){
for(int i = 0; i<maxCircle;i++){
circles[i].x+=(mouseX-circles[i].x)*.2;
circles[i].y+=(mouseX-circles[i].y)*.2;}}
class Circle{
float x,y,vx,vy,r,speed;
Circle(float tempx, float tempy, float tempr){
x=tempx;
y=tempy;
vx=random(-1,1);
vy=random(-1,1);
r=tempr;
}
void update(int w,int h){
x+=vx;
y+=vy;
if(x<r || x>w-r){
vx*=-1;};
if(y<r || y>h-r){
vy*=-1;};
}
void display(){
fill(0,50);
noStroke();
ellipse(x,y,r,r);
}
}
Two questions:
Why doesn't the line function work?
How can i make circles move smoothly(respectively) following my mouse instead of squeezing into one point abruptly?

Looks like Casey's work -- are you at UCLA?
Anyway -- the line() function does work. Try increasing your minDistance to something more like 20, and you'll see lines.
Re: mouse following, you're telling every circle to move 20% of the distance to the mouse, every frame. I'm not sure exactly what you want here; do you want only circles near the mouse to move with the mouse? If so, apply a distance check to the mouse for each circle and only move the circle toward the mouse if it's within that distance. Something like:
void mouseMoved() {
float distance;
for(int i = 0; i<maxCircle;i++){
float mouseDist = dist(circles[i].x,circles[i].y,mouseX,mouseY);
// move toward mouse only if < 100px from mouse
if (mouseDist < 100) {
circles[i].x+=(mouseX-circles[i].x)*.05;
circles[i].y+=(mouseY-circles[i].y)*.05;
}
}
}

Related

How can I create points, display them and store them in some sort of Array

I want to create points and then store them in an array. I'm doing this to put a linear regression through my data points afterwards. So I need to be able to cycle through all my points.
I could not find anything like that on the web for processing and as I was not really able to do it, I need your help. Here is my approach, but it doesn't seem to work:
ArrayList<dataPoint> dataPoints = new ArrayList<dataPoint>();
void setup(){
size(1000, 1000);
background(255);
}
void draw(){
for (int i = 1; i == dataPoints.size(); i++) {
// An ArrayList doesn't know what it is storing so we have to cast the object coming out
dataPoint Point = dataPoints.get(i);
Point.display();
}
}
void mousePressed() {
dataPoints.add(new dataPoint(mouseX, mouseY));
}
class dataPoint {
float x;
float y;
dataPoint(int tempX, int tempY) {
x = tempX;
y = tempY;
}
void display() {
strokeWeight(10);
stroke(255,0,0);
point(x,y);
}
}
I would like to have a program to create points and store them in an array (or something similar, that you can cycle through).
Most of your code makes sense, there are only two gotchas I could spot that may prevent you from cycling through all your points and visualising them:
your condition is will go to an array index out of bounds: try for (int i = 0; i < dataPoints.size(); i++)
remember to clear the frame, otherwise you're drawing on top of the same dots over and over again
Remember array indices start at 0 in Processing/Java (and likewise the last index will not be the size() of your array, but the 1 less, hence the < in the for condition)
Here is your code with the above tweaks:
ArrayList<dataPoint> dataPoints = new ArrayList<dataPoint>();
void setup(){
size(1000, 1000);
}
void draw(){
background(255);
for (int i = 0; i < dataPoints.size(); i++) {
// An ArrayList doesn't know what it is storing so we have to cast the object coming out
dataPoint Point = dataPoints.get(i);
Point.display();
}
}
void mousePressed() {
dataPoints.add(new dataPoint(mouseX, mouseY));
}
class dataPoint {
float x;
float y;
dataPoint(int tempX, int tempY) {
x = tempX;
y = tempY;
}
void display() {
strokeWeight(10);
stroke(255,0,0);
point(x,y);
}
}
Note that Processing has a handy PVector class (which has x,y properties) so you could do something like this:
ArrayList<PVector> dataPoints = new ArrayList<PVector>();
void setup(){
size(1000, 1000);
strokeWeight(10);
stroke(255,0,0);
noFill();
}
void draw(){
background(255);
beginShape();
for (int i = 0; i < dataPoints.size(); i++) {
PVector point = dataPoints.get(i);
vertex(point.x,point.y);
}
endShape();
}
void mousePressed() {
dataPoints.add(new PVector(mouseX, mouseY));
}
This a bit of a detail, but I recommend to following Java Naming Convention to keep the code consistent. (For example: renaming the dataPoint class to DataPoint and renaming the Point instance to point)

How to fix this Solar System model on processing?

I am trying to build a solar system model (only with the Earth, the Sun and the Moon) on Processing (version 3.4), using the Java Mode. I am new to processing and I have only used Java in this context (hence, I am also new to Java).
I have something which is partially working:
That's my code. First tab:
Planet sun;
void setup() {
size(900, 1200);
sun = new Planet(100, 10, 0);
sun.spawnMoons(1,2);
}
void draw() {
background(0);
translate(750, 900/2);
sun.show();
sun.orbit();
}
Second tab:
class Planet {
float radius;
float distance;
Planet[] planets;
float angle;
float orbitspeed;
Planet(float r, float d, float o) {
radius = r;
distance = 400;
angle = PI;
orbitspeed = o;
}
void orbit() {
angle = angle + orbitspeed;
if (planets != null) {
for (int i = 0; i < planets.length; i++) {
planets[i].orbit();
}
}
}
void spawnMoons(int total, int level) {
planets = new Planet[total];
for (int i = 0; i < planets.length; i++) {
float r = radius/(level*2);
float d = distance/(level*4);
float o = 0.01;
planets[i] = new Planet(r, d/(level*8), o);
if (level < 3) {
int num = 2;
planets[i].spawnMoons(num, level+1);
}
}
}
void show() {
pushMatrix();
fill(255, 100);
rotate(angle);
translate(distance, 0);
ellipse(0, 0, radius*2, radius*2);
if (planets != null) {
for (int i = 0; i < planets.length; i++) {
planets[i].show();
}
}
popMatrix();
}
}
However, my "Moon" is too far from my "Earth". I am trying to fix it, but I can't. Considering the way I built it, if I change the value on 11st line (second tab), it won't solve the problem:
distance = 10;
Considering the way I built it, the distance between the Earth and the Sun it is the same as the distance between the Earth and its moon.
I was able to make the radius of each object proportional to each other. Nonetheless, I am failing to do the same with the distance between them. The line bellow was supposed to keep the proportionality on distance but it fails:
float d = distance/(level*4);
How do I fix this?
Thanks.
This is the error:
Planet(float r, float d, float o) {
radius = r;
distance = 400; //<== here
angle = PI;
orbitspeed = o;
}
In the constructor the distance for each new planet is set at 400, so the logic in spawnMoons() does nothing.
If you apply the changes below, it will work as you want and you can start tweaking ;)
//in setup()
sun = new Planet(100, 400, 0);
//in the planet constructor
distance = d;
//in spawnMoons()
float d = distance/level;
planets[i] = new Planet(r, d, o);

How to return value from a class, derived from an array in Processing

I'm new to Processing. I want to learn how to graph some modelling I am doing so I'm using gwoptics to do it. They have an example called RollingGraph. This basically plots out whatever you want along a time dependent scrolling x axis.
The problem is that I don't quite understand how I get it to plot what I want.
I have an array, let's say which plots ellipses randomly on a canvas and these rotate randomly every frame. How can I get the Rolling Graph to plot the sum of all the rotations, which could be circle.rot?
So far I have the best MCVE I could get:
import org.gwoptics.graphics.graph2D.Graph2D;
import org.gwoptics.graphics.graph2D.traces.ILine2DEquation;
import org.gwoptics.graphics.graph2D.traces.RollingLine2DTrace;
class eq implements ILine2DEquation{
public double computePoint(double x,int pos) {
return mouseX; //////HOW DO I GET THIS TO RETURN THE SUM OF circle.rot??????
}
}
class eq2 implements ILine2DEquation{
public double computePoint(double x,int pos) {
return mouseY;
}
}
class eq3 implements ILine2DEquation{
public double computePoint(double x,int pos) {
if(mousePressed)
return 400;
else
return 0;
}
}
RollingLine2DTrace roll,roll2,roll3;
Graph2D g;
class Circle{
public float x1;
public float y1;
public float x2;
public float y2;
public color cB;
public float rot;
public float authority;
public float fert = 1;
public float r = x1; //radius
public Circle(float x1, float y1, float x2, float y2, color tempcB, float rot, float authority, float fert){
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.cB = tempcB;
this.authority = random(255);
this.fert = random(1);
this.rot= random(360);
}
}
public ArrayList<Circle> circles = new ArrayList<Circle>();
void setup(){
size(1000, 1000);
frameRate(6);
rectMode(CENTER);
ellipseMode(CENTER);
int sec = second();
roll = new RollingLine2DTrace(new eq() ,100,0.01f);
roll.setTraceColour(0, 255, 0);
roll2 = new RollingLine2DTrace(new eq2(),100,0.01f);
roll2.setTraceColour(255, 0, 0);
roll3 = new RollingLine2DTrace(new eq3(),100,0.05f);
roll3.setTraceColour(255, 255, 255);
g = new Graph2D(this, 400, 200, false);
g.setYAxisMax(600);
g.addTrace(roll);
g.addTrace(roll2);
g.addTrace(roll3);
g.position.y = 50;
g.position.x = 100;
g.setYAxisTickSpacing(100);
g.setXAxisMax(5f);
smooth();
background(204);
noStroke();
fill(255, 204,100);
for(int i = 1; i < 48; i++){
float r = random(100,height-200);
float s = random(100,width-200);
float t = 20;
float u = 20;
circles.add(new Circle(r,s,t,u,color(100,14,14),random(360),color(100,14,14),random(10)));
}
}
void draw() {
background(204);
g.draw();
for(Circle circle : circles){
pushMatrix();
translate(circle.x1, circle.y1);
rotate(random(360));
translate(-circle.x1, -circle.y1);
fill(circle.authority);
strokeWeight(0);
stroke(100,0,0);
rect(circle.x1, circle.y1, 24, 36,0, 0, 12, 18);
popMatrix();
}
}
If I understand your question, all you have to do is iterate over the instances and calculate the total.
First, you're going to need a data structure that holds all of your instances. You've said you're using an array, so it sounds like you've go that covered. You have to make sure that this array is in scope for the next step, so this probably means declaring it at the sketch level (not inside a function or class).
Secondly, you're going to need a for loop that iterates over the instances in the data structure. You can use a variable to add up the total. Something like this:
float total = 0;
for(Circle c : yourCircleArray){
total += c.rot;
}
You might put that into a function so that you can call it whenever you want.
Edit: Looking at your code more closely, you actually have an ArrayList, not an array. It looks like it's already initialized at the sketch level, so all you need to do is this:
public double computePoint() {
float total = 0;
for(Circle c : circles){
total += c.rot;
}
return total;
}
If you can't get that working, try creating an MCVE by eliminating your dependencies on whatever library you're importing at the top of your sketch. Remember that an MCVE is supposed to narrow it down to one specific problem (how to get a total from an array), not do your whole end goal.

How to make a sliding member in Processing with particle systems

I am simulating particle system in Processing. Based on Daniel Shiffman’s Nature of Code book, I did a spring and then I started experimenting with sliders to do one that has longer or shorter length based on a slider.
Now, I am trying to make one that slides by the slider, the two particles move to the same direction of the two particles.
I did it with the PVector add, finding the new position and drawing the node, but it doesn’t work when I have multiple members and one is affected by the others.
I need to apply a force to do this: see applyForce() function.
void update(float distance) {
PVector force = PVector.sub(b.location, a.location);
float d = force.mag();
float x = d - distance;
//direction of the force
force.normalize();
force.mult(-1 * k* x/mass);
//apply to one node
b.applyForce(force);
force.mult(-1);
//apply opposite to the other node
a.applyForce(force);
}
//Newton's law: F = M * A
void applyForce(PVector force) {
PVector f = force.get();
f.div(mass);
acceleration.add(f);
}
Check the diagram below:
(a) is what I want to have, (b) is how it's doing it now.
In the first example the length is the same and the members slides (both particles).
In the second the length is bigger and does not slide
Please let me know if you know how to apply a force that slides the member.
Thank you
If I understood correctly, you're trying to do a few things:
change the spring's length
translate the spring's endpoints in the spring's direction
control the above parameters using sliders
The first part is trivial since the Spring object has a len property.
The second involves a bit of vector math:
the direction of a line is the subtraction of it's two end points
a vector can be scaled easily to any length by normalising it first (reducing it so it's length is equal to 1.0) and then multiplying by a scalar value.
A vector can be translated by simply adding another vector to itself
Here is a commented sketch implementing the points above:
//sliders to control spring rest length and translation
Slider rlength = new Slider("rest length", 5, 5, 200, 20, 50, 250, 100, false);
Slider translate = new Slider("translate", 5, 30, 200, 20, -10, 10, 0, false);
Spring spring = new Spring(new Bob(75,350),new Bob(350,75),(int)rlength.value);
void setup(){
size(400,400);
spring.k = 0.01;//tweak elasticity
}
void draw(){
// update
//update sliders
rlength.update(mouseX,mouseY,mousePressed);
translate.update(mouseX,mouseY,mousePressed);
//update spring
spring.a.update();
spring.b.update();
spring.update();
//make both points draggable
spring.a.drag(mouseX, mouseY);
spring.b.drag(mouseX, mouseY);
//draw
background(255);
rlength.draw();
translate.draw();
spring.display();
}
//handle mouse events for spring points dragging
void mousePressed() {
spring.a.clicked(mouseX, mouseY);
spring.b.clicked(mouseX, mouseY);
}
void mouseReleased() {
spring.a.stopDragging();
spring.b.stopDragging();
}
//handle slider events
void onSliderUpdate(Slider s){
if(s == rlength) spring.len = rlength.value;
if(s == translate){
//compute the direction of the spring by subtracting the two points
PVector direction = PVector.sub(spring.a.location,spring.b.location);
//normalize the vector -> it will not have a length/magnitude of 1.0, but will still point in the line direction
direction.normalize();
//scale or multiply the normalized vector to the translation amount
direction.mult(translate.value);
//finally, add the result to each spring point, essentially offsetting/translating
spring.a.location.add(direction);
spring.b.location.add(direction);
}
}
//Slider
class GUIElement{
float w,h,x,y;//width, height and position
color bg = color(200);//background colour
color fg = color(0);//foreground colour
String label;
GUIElement(String label,float x,float y,float w,float h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.label = label;
}
void update(int mx,int my,boolean md){}
void draw(){}
}
class Slider extends GUIElement{
float min,max,value,pvalue;//slider values: minimum, maximum and current
float cx,pw = 20;//current slider picker position, picker width
boolean updating,liveDrag = true,isInt = false;
//label to display on slider, it's position(x,y), size(w,h) and values(min, max and default/current)
Slider(String label,float x,float y,float w,float h,float min,float max,float value,boolean isInt){
super(label,x,y,w,h);
this.min = min;
this.max = max;
this.value = value;
this.isInt = isInt;
cx = map(value,min,max,x,x+w);
}
void update(int mx,int my,boolean md){
if(md){
if((mx >= x && mx <= (x+w)) &&
(my >= y && my <= (y+h))){
cx = mx;
value = map(cx,x,x+w,min,max);
updating = true;
if(liveDrag){
boolean updated = (isInt ? ((int)value != (int)pvalue) : (value != pvalue));
if(updated){
pvalue = value;
onSliderUpdate(this);
}
}
}else updating = false;
}else{
if(updating){
updating = false;
onSliderUpdate(this);
}
}
}
void draw(){
pushStyle();
noStroke();
fill(bg);
rect(x,y,w,h);
fill(fg,64);
rect(x,y,cx-x,h);//this displays a rect that stretches based on the value
fill(0);
text(label+": "+(isInt ? (int)value : value),x+pw,y+h*.75);
popStyle();
}
String toString(){
return label + ":" + value;
}
}
// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com
// Bob class, just like our regular Mover (location, velocity, acceleration, mass)
class Bob {
PVector location;
PVector velocity;
PVector acceleration;
float mass = 12;
// Arbitrary damping to simulate friction / drag
float damping = 0.95;
// For mouse interaction
PVector dragOffset;
boolean dragging = false;
// Constructor
Bob(float x, float y) {
location = new PVector(x,y);
velocity = new PVector();
acceleration = new PVector();
dragOffset = new PVector();
}
// Standard Euler integration
void update() {
velocity.add(acceleration);
velocity.mult(damping);
location.add(velocity);
acceleration.mult(0);
}
// Newton's law: F = M * A
void applyForce(PVector force) {
PVector f = force.get();
f.div(mass);
acceleration.add(f);
}
// Draw the bob
void display() {
stroke(0);
strokeWeight(2);
fill(175);
if (dragging) {
fill(50);
}
ellipse(location.x,location.y,mass*2,mass*2);
}
// The methods below are for mouse interaction
// This checks to see if we clicked on the mover
void clicked(int mx, int my) {
float d = dist(mx,my,location.x,location.y);
if (d < mass) {
dragging = true;
dragOffset.x = location.x-mx;
dragOffset.y = location.y-my;
}
}
void stopDragging() {
dragging = false;
}
void drag(int mx, int my) {
if (dragging) {
location.x = mx + dragOffset.x;
location.y = my + dragOffset.y;
}
}
}
// Nature of Code 2011
// Daniel Shiffman
// Chapter 3: Oscillation
// Class to describe an anchor point that can connect to "Bob" objects via a spring
// Thank you: http://www.myphysicslab.com/spring2d.html
class Spring {
// Location
PVector anchor;
// Rest length and spring constant
float len;
float k = 0.2;
Bob a;
Bob b;
// Constructor
Spring(Bob a_, Bob b_, int l) {
a = a_;
b = b_;
len = l;
}
// Calculate spring force
void update() {
// Vector pointing from anchor to bob location
PVector force = PVector.sub(a.location, b.location);
// What is distance
float d = force.mag();
// Stretch is difference between current distance and rest length
float stretch = d - len;
// Calculate force according to Hooke's Law
// F = k * stretch
force.normalize();
force.mult(-1 * k * stretch);
a.applyForce(force);
force.mult(-1);
b.applyForce(force);
}
void display() {
strokeWeight(3);
stroke(0);
line(a.location.x, a.location.y, b.location.x, b.location.y);
ellipse(a.location.x, a.location.y,10,10);
ellipse(b.location.x, b.location.y,10,10);
}
}

Processing Point Management

I'm making a simple Processing program that creates a certain amount of points that randomly move and then when the mouse is clicked the points move to the mouse's location.
I made the points as ellipses so they'd be easier to see.
//number of points
int ptnum=2;
//list of points
Point[] points=new Point[ptnum];
//class to create points
class Point
{
float xpos;
float ypos;
//constructor
Point(float x, float y){
xpos=x;
ypos=y;
}
//return x-coordinate
float ptx(){
return xpos;
}
//return y-coordinate
float pty(){
return ypos;
}
//points randomly moving
void randMove(){
xpos+=random(-2,2);
ypos+=random(-2,2);
}
//display points
void display(){
fill(0);
ellipse(xpos,ypos,2,2);
}
//move points to mouse
void move(){
if(xpos>mouseX){
xpos-=1;
}
if(ypos>mouseY){
ypos-=1;
}
if(ypos<mouseY){
ypos+=1;
}
if(xpos<mouseX){
xpos+=1;
}
}
}
void setup(){
size(640,360);
//create ptnum of points
for(int i=0; i<ptnum; i++){
points[i]=new Point(random(1,width-1),random(1,height-1));
}
}
//each point to random move
void randomMovement(){
for(int i=0; i<ptnum; i++){
points[i].randMove();
}
}
//each point to display
void ptDisplay(){
for(int i=0; i<ptnum; i++){
points[i].display();
}
}
//each point to move
void ptMove(){
for(int i=0; i<ptnum; i++){
points[i].move();
}
}
void draw(){
//start
background(255,255,255);
noFill();
ptDisplay();
//==========
//if mouse clicked, move points to mouse XandY, if not-randommove
if(mousePressed){
ptMove();
}
else{
randomMovement();
}
}
I'm trying to make it so that the points can also interact with each other, for instance, they can't touch each other. Could someone help me figure this out? I'm having a bit a brain fart on this one. And if anyone has suggestions for the code, I'd be happy to hear them.
Thanks so much for the help, its appreciated.
Just calculate each point's location inside draw function.
Then, run a for loop to see if you have any collisions.
Since draw function is running many times per second, the result will be good enough.
When you have a collision, you can change each point's direction by 180 degrees.

Resources