Issues with image float and also image draw

Programming Questions

k8u888

Issues with image float and also image draw

in Programming Questions • 1 year ago

Hi Everyone, I have two issues in my below coding.

Firstly If I wanted to stop Image1 from appearing and then only have image 2 appear when the mouse is pressed does anyone know what code i'm missing?

Also when image 2 appears i want it to float on the screen the exact same as Image1, but at this point it doesn't - it just stays there motionless.

Sorry very new to processing.

PImage image2;

PImage image1;

float easing = 0.05; float offset = 0;

void setup()

{

size(1024, 768);

image1 = loadImage("HIPPO.png");

image2 = loadImage("HIPPOBD.png");

}

void draw() {

float targetOffset = map(mouseY, 0, height, -40, 40); offset += (targetOffset - offset) * easing;

image(image1, 85 + offset,65);

}

void mousePressed() {

float targetOffset = map(mouseY, 0, height, -30, 40); offset += (targetOffset - offset) * easing;

image(image2, 85 + offset,65);

}

Replies(3)

Jonny Stu..

Re: Issues with image float and also image draw

1 year ago

Hi,

One way is to use a global variable to record whether the mouse has been pressed and then change what you draw based on that. You shouldn't be doing drawing in the mousePressed() function which is why your code doesn't work like you expect it to. I've also added a call to background in the code below (line 13) to clear up at the beginning of each drawing pass.

PImage image2;
PImage image1;
// A global variable to record whether a mouse press has occurred
boolean mouseHasBeenPressed = false;
float easing = 0.05; float offset = 0;
void setup()
{
size(1024, 768);
image1 = loadImage("HIPPO.png");
image2 = loadImage("HIPPOBD.png");
}
void draw() {
background(0);
float targetOffset = map(mouseY, 0, height, -40, 40); offset += (targetOffset - offset) * easing;
// If mouseHasBeenPressed is false draw HIPPO.png otherwise draw HIPPOBD
if (mouseHasBeenPressed == false) {
image(image1, 85 + offset,65);
} else {
image(image2, 85 + offset,65);
}
}
void mousePressed() {
// Set mouseHasBeenPressed to true when mousePressed() is called
mouseHasBeenPressed = true;
}

k8u888

Re: Issues with image float and also image draw

1 year ago

Great thankyou so much this helps me out a lot!

One last thing - I also have a Starry night Sky code for the background.

Currently it runs the whole way through. Is there any way to link it to MousePressed so that it changes from a standard light blue sky into the Starry night with Image 2 with the mouse is clicked?

I currently now have the below (thanks to you!) but once again not sure if its even possible to do the above?

int[] starX = new int[1000];

int[] starY = new int[1000];

color[] starColor = new color[1000];

int starSize = 3;

int[] shootX = new int[30];

int[] shootY = new int[30];

int METEOR_SIZE = 10;

float meteorSize = METEOR_SIZE;

float ssDeltaX, ssDeltaY;

int ssTimer = -1;

int startX, startY;

PImage landscape;

PImage image2;

PImage image1;

boolean mouseHasBeenPressed = false;

float easing = 0.05; float offset = 0;

void setup() {

size(850, 709);

for (int i = 0; i < starX.length; i++) {

starX[i] =(int)random(width);

starY[i] = (int)random(height);

starColor[i] = color((int)random(100,255));

landscape = loadImage("b5.png");

image1 = loadImage("HIPPO.png");

image2 = loadImage("HIPPOBD.png");

}

void draw() {

background(0,0,50);

stroke(0);

strokeWeight(1);

for (int i = 0; i < starX.length; i++) {

fill(random(50,255)); // makes them twinkle

if (random(10) < 1) {

starColor[i] = (int)random(100,255);

}

fill(starColor[i]);

ellipse(starX[i], starY[i], starSize, starSize);

}

for (int i = 0; i < shootX.length-1; i++) {

int shooterSize = max(0,int(meteorSize*i/shootX.length));

if (shooterSize > 0) {

strokeWeight(shooterSize);

stroke(255);

}

else

noStroke();

line(shootX[i], shootY[i], shootX[i+1], shootY[i+1]);

}

meteorSize*=0.9;

for (int i = 0; i < shootX.length-1; i++) {

shootX[i] = shootX[i+1];

shootY[i] = shootY[i+1];

}

if (ssTimer >= 0 && ssTimer < shootX.length) {

shootX[shootX.length-1] = int(startX + ssDeltaX*(ssTimer));

shootY[shootY.length-1] = int(startY + ssDeltaY*(ssTimer));

ssTimer++;

if (ssTimer >= shootX.length) {

ssTimer = -1;

}

if (random(5) < 1 && ssTimer == -1) {

newShootingStar();

}

image(landscape, 0, 0);

float targetOffset = map(mouseY, 0, height, -10, 100); offset += (targetOffset - offset) * easing;

if (mouseHasBeenPressed == false) {

image(image1, 300 + offset,200);

} else {

image(image2, 300 + offset,200);

}

void newShootingStar() {

int endX, endY;

startX = (int)random(width);

startY = (int)random(height);

endX = (int)random(width);

endY = (int)random(height);

ssDeltaX = (endX - startX)/(float)(shootX.length);

ssDeltaY = (endY - startY)/(float)(shootY.length);

ssTimer = 0; // starts the timer which ends when it reaches shootX.length

meteorSize = METEOR_SIZE;

// by filling the array with the start point all lines will essentially form a point initialy

for (int i = 0; i < shootX.length; i++) {

shootX[i] = startX;

shootY[i] = startY;

}

void mousePressed() {

// Set mouseHasBeenPressed to true when mousePressed() is called

mouseHasBeenPressed = true;

}

k8u888

Re: Issues with image float and also image draw

1 year ago

oo thank anyway but disregard, i worked it out was as simple as anything :)

Top Reply