translate Point object using ControlP5 slider

Fabripod

translate Point object using ControlP5 slider

in Contributed Library Questions • 1 year ago

Not sure if this is the correct forum for this topic, maybe in programming? I'm attempting a simple proof of concept and will extend to more complex designs once i get my head around how to do it: I'd like to control the x & y location of a point with a slider. Please take a look at my code and tell me why the point does not move? (totally confused noob here)

Thanks to st33d for the base code which I modified ( http://processing.org/discourse/yabb2/YaBB.pl?num=1218148740)

import processing.opengl.*;

// Magic expanding array declared here

ArrayList points;

// To operate on an item in an ArrayList we need a dummy object

Point tempPoint;

import controlP5.*;

ControlP5 controlP5;

int sliderValue = 100;

// Read tin

void setup(){

size(200, 200);

background(255);

controlP5 = new ControlP5(this);

controlP5.addSlider("sliderValue",0,width,sliderValue,0,(height-10),width,10);

points = new ArrayList();

points.add(new Point(sliderValue, sliderValue));

}

// Loop

void draw(){

//print sliderValue to test if variable is changing

println(sliderValue);

// use the dummy object to look inside the ArrayList and modify x,y

tempPoint = (Point)points.get(0);

tempPoint.x = sliderValue;

tempPoint.y = sliderValue;

//render point

point(tempPoint.x, tempPoint.y);

}

// Generic little class

class Point{

float x, y;

Point(float x, float y){

this.x = x;

this.y = y;

}

Thanks so much for the help!

Replies(4)

amnon.owed

Re: translate Point object using ControlP5 slider

1 year ago

Your question requires and is about a contributed library, so yes this is the correct forum section.

Your point moves, the problem is not in the controls or the changing of the points's x and y. But it's in your display of that point. In the example below, I've made a few changes that make the movement better visible.

Adapted Code

import processing.opengl.*;
import controlP5.*;
ControlP5 controlP5;
ArrayList <Point> points = new ArrayList <Point> ();
int sliderValue = 100;
void setup() {
size(200, 200);
controlP5 = new ControlP5(this);
controlP5.addSlider("sliderValue", 0, width, sliderValue, 0, (height-10), width, 10);
points.add(new Point(sliderValue, sliderValue));
smooth();
}
void draw() {
background(255);
println(sliderValue);
Point tempPoint = points.get(0);
tempPoint.x = sliderValue;
tempPoint.y = sliderValue;
fill(0);
ellipse(tempPoint.x, tempPoint.y, 10, 10);
}
class Point {
float x, y;
Point(float x, float y) {
this.x = x;
this.y = y;
}
}

Fabripod

Re: translate Point object using ControlP5 slider

1 year ago

Thanks, that solves it!

I'm curious as to why point() doesn't show up and ellipse() does. For example: in the code below, if I comment ellipse() and de-comment point() in the void render() method below: why wouldn't they be treated the same way by the processing environment. Is this just a quirky thing about points in processing?

Thanks for your help!

import controlP5.*;
ControlP5 controlP5;
ArrayList <Point> points = new ArrayList <Point> ();
float sliderValue= 100;
void setup() {
size(200, 200);
controlP5 = new ControlP5(this);
controlP5.addSlider("sliderValue", 0, width, sliderValue, 0, (height-10), width, 10);
points.add(new Point(sliderValue, sliderValue));
points.add(new Point(sliderValue, sliderValue));
smooth();
}
void draw() {
background(255);
Point tempPoint = points.get(0);
points.get(0).x = sliderValue;
points.get(0).y = sliderValue;
points.get(0).render();
points.get(1).x = sliderValue*1.25;
points.get(1).y = sliderValue+50;
points.get(1).render();
stroke(1);
//line(points.get(1).x,points.get(1).y,points.get(0).x,points.get(0).y);
}
class Point {
float x, y;
Point(float x, float y) {
this.x = x;
this.y = y;
}
void render(){
fill(255,0,0);
ellipse(this.x, this.y, 10, 10);
//point(this.x,this.y);
}
}

amnon.owed

Re: translate Point object using ControlP5 slider

1 year ago

The reason those points don't show up is because points are colored by the last stroke color (not fill color). Second, a point is one pixel, so even when you have the correct color, it's still pretty small. Similary to the previous remark, it's size is determined by the last strokeWeight. Try out the below render function and it will look similar to a 10-pixel ellipse.

void render(){
strokeWeight(10);
stroke(255,0,0);
point(x,y);
}

Fabripod

Re: translate Point object using ControlP5 slider

1 year ago

Great, I thought there was probably a reasonable answer.

Thanks amnon.owed!

Top Reply