Performance issues with color picker

Programming Questions

cagdas544

Performance issues with color picker

in Programming Questions • 1 year ago

Hi!

I'm new to processing and im trying to code a simple drawing thingy. But its color picker is working very slow.

Here's the code;

int k=0,pre_k=0,pickx,picky,picka;
boolean k_kontrol=true;
int ch=0,cs=0,cb=0; // secili olan renk
int kalinlik=10;
void setup(){
smooth();
colorMode(HSB,250);
size(900,600);
strokeWeight(2);
line(300,0,300,600);
ciz_renkpick(255+10,5,25,250);
}
void draw(){
ciz_renkkare(5,5,250);
renkpick_kontrol(255+10,5,25,250);
renksec(5,5,250);
ciz();
//gecici
noStroke();
fill(ch,cs,cb);
ellipse(600,300,100,100);
//gecici
}
void ciz_renkkare(int cizx,int cizy,int a){
colorMode(HSB,a);
if(pre_k!=k){
k_kontrol=true;
}
if(k_kontrol==true){
for(int i=1;i<a;i++){
for(int j=1;j<a;j++){
stroke(k,i,a-j);
point(i+cizx,j+cizy);
k_kontrol=false;
pre_k=k;
}
}
}
}
void ciz_renkpick(int cizx,int cizy,int a,int b){
colorMode(HSB,b);
for(int i=1;i<a;i++){
for(int j=1;j<b;j++){
stroke(j,b,b);
point(i+cizx,j+cizy);
}
}
}
void renkpick_kontrol(int cizx,int cizy,int a,int b){
if(mousePressed==true && cizx+a>mouseX && mouseX>cizx && cizy+b>mouseY && mouseY>cizy){
k=mouseY-cizy;
}
}
void renksec(int cizx,int cizy,int a){
int i,j;
if(mousePressed==true && cizx+a>mouseX && mouseX>cizx && cizy+a>mouseY && mouseY>cizy){
i=mouseX-cizx;
j=mouseY-cizy;
ch=k;
cs=i;
cb=a-j;
}
}
void ciz(){
if(mousePressed==true && 900>pmouseX && pmouseX>300 && 600>pmouseY && pmouseY>0
&& 900>mouseX && mouseX>300 && 600>mouseY && mouseY>0){
fill(ch,cs,cb);
stroke(ch,cs,cb);
strokeWeight(kalinlik);
line(pmouseX,pmouseY,mouseX,mouseY);
}
}

It was super-slow before i changed it a little bit. Now the square doesnt update unless the "k" variable has changed. Still its updating very slow. Can you help me out?

Also im turkish so some of the stuff is written in turkish. Here's some of the meaning of the words;

kalinlik=thickness

ciz=draw/render

kare=square

kontrol=control

renk=color

gecici=temporary

secili olan renk=current color

Thanks a lot in advance!

Replies(6)

tfguy44

Re: Performance issues with color picker

1 year ago

You should look into using the mousePressed() function.
The way you are trying to detect mouse clicks, while valid, is incredibly slow.

cagdas544

Re: Re: Performance issues with color picker

1 year ago

I tried to do that but i cant draw when i use that mousePressed() funciton. I'ts just makes dots.

Here;

int k=0,pre_k=0;
boolean k_kontrol=true;
int ch=0,cs=0,cb=0; // secili olan renk
int kalinlik=10;
void setup(){
smooth();
colorMode(HSB,250);
size(900,600);
fill(0,0,250);
noStroke();
rect(300,0,600,600);
strokeWeight(2);
line(300,0,300,600);
ciz_renkpick(255+10,5,25,250);
}
void draw(){
ciz_renkkare(5,5,250);
//gecici
noStroke();
fill(ch,cs,cb);
ellipse(600,300,100,100);
//gecici
}
void mousePressed(){
renkpick_kontrol(255+10,5,25,250);
renksec(5,5,250);
ciz();
}
void ciz_renkkare(int cizx,int cizy,int a){
colorMode(HSB,a);
if(pre_k!=k){
k_kontrol=true;
}
if(k_kontrol==true){
for(int i=1;i<a;i++){
for(int j=1;j<a;j++){
stroke(k,i,a-j);
point(i+cizx,j+cizy);
k_kontrol=false;
pre_k=k;
}
}
}
}
void ciz_renkpick(int cizx,int cizy,int a,int b){
colorMode(HSB,b);
for(int i=1;i<a;i++){
for(int j=1;j<b;j++){
stroke(j,b,b);
point(i+cizx,j+cizy);
}
}
}
void renkpick_kontrol(int cizx,int cizy,int a,int b){
if(cizx+a>mouseX && mouseX>cizx && cizy+b>mouseY && mouseY>cizy){
k=mouseY-cizy;
}
}
void renksec(int cizx,int cizy,int a){
int i,j;
if(cizx+a>mouseX && mouseX>cizx && cizy+a>mouseY && mouseY>cizy){
i=mouseX-cizx;
j=mouseY-cizy;
ch=k;
cs=i;
cb=a-j;
}
}
void ciz(){
if(900>pmouseX && pmouseX>300 && 600>pmouseY && pmouseY>0
&& 900>mouseX && mouseX>300 && 600>mouseY && mouseY>0){
fill(ch,cs,cb);
stroke(ch,cs,cb);
strokeWeight(kalinlik);
line(pmouseX,pmouseY,mouseX,mouseY);
}
}

Whats wrong?

Edit: And the color picker is still very slow. I kinda want it to be like this; http://www.colorpicker.com/

How can i do that?

Thanks!

Edit 2: I changed this part;

if(k_kontrol==true){
for(int i=1;i<a;i++){
for(int j=1;j<a;j++){
stroke(k,i,a-j);
point(i+cizx,j+cizy);
k_kontrol=false;
pre_k=k;
}
}
}
}

To this;

if(k_kontrol==true){
for(int i=1;i<a;i++){
for(int j=1;j<a;j++){
stroke(k,i,a-j);
point(i+cizx,j+cizy);
}
}
k_kontrol=false;
pre_k=k;
}
}

Now its little faster then before but still not that good. I cant understand what im doing wrong here.

v.k.

Re: Performance issues with color picker

1 year ago

mousePressed(), the method, is true at the moment mouse is clicked, than it returns to false, in a moment. The variable "mousePressed" though, stays true while mouse is pressed, and returns to false on mouse release. You can make any boolean behaves like this using mouseReleased() together with mousePressed(). There is also mouseDragged(), that is true if mouse is pressed and moving. If you use that in line 24 you will be able to draw. It is funny how difficult is to read code in a language you don't know... Here a little test on mouse stuff

int x;
void setup ()
{
size(400,400);
}
void draw()
{
fill(120,30);
rect(0,0,width,height);
if (mousePressed) // magenta
{
fill(120,30,140);
ellipse(x,height-100,40,40);
}
}
void mouseReleased()
{
x= (x + 40) % width;
fill(0,255*0.8,255*0.8); //cyan
ellipse(x,height-150,40,40);
}
void mousePressed() // green
{
x= (x + 40) % width;
fill(0,255*0.8,255*0.4);
ellipse(x,height-50,40,40);
}
void mouseMoved() // red
{
x= (x + 40) % width;
fill(255*0.8,255*0.4,255*0.4);
ellipse(x,height-300,40,40);
}
void mouseDragged()// blue
{
x= (x + 40) % width;
fill(30,30,140);
ellipse(x,height-200,40,40);
}

cagdas544

Re: Re: Performance issues with color picker

1 year ago

Firstly thanks for your reply!

And second i changed to mouseDragged and copied it below the mousePressed function so the user can make dots. I understand how they work now.

But still i can solve my performance issue. I have no idea how to make it faster.

PhiLho

Re: Performance issues with color picker

1 year ago

" its color picker is working very slow"
I tried the code of the original post and while it takes one second or two to display a color picker of another color, it wasn't shocking. Perhaps it is more annoying on a slower computer.
Is that the issue you report?

As v.k. said, it is hard to read your code because the function names are meaningless for us...

I see where you create the color picker now.
There are two ways to improve the speed:
- First, learn to draw in a PGraphics. It is easy, it is exactly like drawing in the sketch, but you must prefix all functions with nameOfPGraphics. Then, on each frame, instead of painstakingly draw each pixel, you just use image() with the PGraphics to get instant drawing.
- Second, you can gain time in drawing it: instead of stroke() & point() calls, you can directly draw by using loadPixels(), pixels[] assignment of the color, then updatePixels().

Side note: usually, we start loops at index 0.

cagdas544

Re: Re: Performance issues with color picker

1 year ago

Here's the full translation if that helps.

int k=0,pre_k=0; //k=hue
boolean k_control=true; //true if k has changed since the last render
int ch=0,cs=0,cb=0; // choosen color HSB
int thickness=10;
void setup(){
smooth();
colorMode(HSB,250);
size(900,600);
fill(0,0,250);
noStroke();
rect(300,0,600,600);
strokeWeight(2);
line(300,0,300,600);
draw_pickhue(255+10,5,25,250);
}
void draw(){
draw_pickSB(5,5,250);
//temp.
noStroke();
fill(ch,cs,cb);
ellipse(600,300,100,100);
//temp.
}
void mousePressed(){
pickhue_color(255+10,5,25,250);
pick_color(5,5,250);
draw_();
}
void mouseDragged(){
pickhue_color(255+10,5,25,250);
pick_color(5,5,250);
draw_();
}
void draw_pickSB(int drawx,int drawy,int a){
colorMode(HSB,a);
if(pre_k!=k){
k_control=true;
}
if(k_control==true){
for(int i=1;i<a;i++){
for(int j=1;j<a;j++){
stroke(k,i,a-j);
point(i+drawx,j+drawy);
}
}
k_control=false;
pre_k=k;
}
}
void draw_pickhue(int drawx,int drawy,int a,int b){
colorMode(HSB,b);
for(int i=1;i<a;i++){
for(int j=1;j<b;j++){
stroke(j,b,b);
point(i+drawx,j+drawy);
}
}
}
void pickhue_color(int drawx,int drawy,int a,int b){
if(drawx+a>mouseX && mouseX>drawx && drawy+b>mouseY && mouseY>drawy){
k=mouseY-drawy;
}
}
void pick_color(int drawx,int drawy,int a){
int i,j;
if(drawx+a>mouseX && mouseX>drawx && drawy+a>mouseY && mouseY>drawy){
i=mouseX-drawx;
j=mouseY-drawy;
ch=k;
cs=i;
cb=a-j;
}
}
void draw_(){
if(900>pmouseX && pmouseX>300 && 600>pmouseY && pmouseY>0
&& 900>mouseX && mouseX>300 && 600>mouseY && mouseY>0){
fill(ch,cs,cb);
stroke(ch,cs,cb);
strokeWeight(thickness);
line(pmouseX,pmouseY,mouseX,mouseY);
}
}

Like i said isnt it possiblle to have it like this? its very smooth on that site. i'll go check the stuff you said now.

Edit: " Then, on each frame, instead of painstakingly draw each pixel, you just use image() with the PGraphics to get instant drawing." does that mean that i have to draw the square for all 255 k values and store it before opening the program?

Edit2: i tried to do the rendering outside the program with this little code;

int k=0;
void setup(){
size(250,250);
colorMode(HSB,250);
}
void draw(){
if(k<250){
for(int i=1;i<250;i++){
for(int j=1;j<250;j++){
stroke(k,i,250-j);
point(i,j);
}
}
k++;
saveFrame("###.png");
}
else noLoop();
}

So the program dont have to render every time even if i use the buffer thing. But the total size of png files are 20mb. i dont think that'll be fast either.

im stuck.

edit3: And i cant find any good info about the loadPixels() function. i cant understand how to use it.

edit4: BAM! Now its smooth as hell. i pre-rendered 250 image files as jpg(total size 700kb) and when the code starts running it preloads those images. Very smooth. Just as i wanted it to be. Here; http://www.qfpost.com/file/d?g=bX1FCdYoQ

Thanks to all who helped out!

Top Reply