Hello, so as you can see, the mouse shows the picture when you move from left to right and right to left. My assignment is to have the picture change when the mouse goes from right to left. So left to right it’s kraftwerk.jpg and right to left it will be another image.
So everything you need to view my page:
HTML:
<!DOCTYPE html>
<head>
<!--We are going to include P5.JS-->
<script src="p5/p5.js"></script>
<!--We are going to include the sketch-->
<script src="imageColor.js"></script>
</head>
<body>
<h1> Color </h1>
</br>
<p> Grabbing colors from an image. </p>
</body>
</html>
JS:
//-------------------
var img1;
//-------------------
function preload (){
img1 = loadImage("images/kraftwerk.jpg");
}
//-------------------
function setup(){
createCanvas(500,500);
// Loading the pixel/color info
img1.loadPixels();
}
//-------------------
function draw (){
// Approach number 1 --------- brush
// Choosing the points
// var desiredXpoint = mouseX;
// var desiredYpoint = mouseY;
// print("MouseX: "+mouseX)
var totalRows = 10;
var currentRow = 1;
while(currentRow < totalRows){
var desiredXpoint = mouseX;
// map ( valuetoMap, valueMin, valueMax, desiredMin, desiredMax )
var desiredYpoint = map ( currentRow, 1, totalRows, 0, 500);
// Getting the color
var currentColor = img1.get(desiredXpoint, desiredYpoint);
print ("X: "+desiredXpoint);
print ("Y: "+desiredYpoint);
// Draw
fill(currentColor);
noStroke();
stroke(255);
ellipse(desiredXpoint, desiredYpoint, 55, 55);
// We increase the current row number, otherwise it will crash.
// currentRow = currentRow + 1;
// currentRow +=1;
currentRow++;
}
//test
//image (img1, 0, 0);
}
THE P5JS file from https://p5js.org/download/
and the kraftwerk image:
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
1 Like
Would you be able to put this on CodePen (or similar) - it’ll just make it a lot easier to give help on this. If you use CodePen, You should literally be able to put the HTML in the HTML area and the JS in the JS area, though you’d need to upload your images and link to them.
I’m on a phone at the minute so can only read over the code but there isn’t anything immediately obvious, been a little while since I played around with p5 though so I might be missing something
1 Like
Here it is. I was not able to attach the p5.js file. Could you download it from their website so you can view it? And I found the pic I need online and used the link.
Thanks so much for wanting to help
So what Codepen does in the HTML is automatically wrap the stuff in a <body> tag (I thought your HTML might work out-of-the-box, but will need just a little tweaking) - so delete:
<!DOCTYPE html>
<head>
<!--We are going to include P5.JS-->
<script src="p5/p5.js"></script>
<!--We are going to include the sketch-->
<script src="imageColor.js"></script>
</head>
<body>
and then:
</body>
</html>
from the HTML panel - so it should just have the h1, the br and the div tags.
Then go to settings, click on the “javascript” tab, and in the search box, search p5 - it’ll come back with a single result, select that and it’ll add the library and make it available
1 Like
I did, how’s it now? It still does not display the image
This is how it’s supposed to look when i move the mouse left to right,
I want it to change the image when i move it right to left.
The image is created row by row, with the circles
Directly linking to Google images won’t work because they aren’t image links: it’s a link to a link to a website location where there is an image. You need the actual image you want. This I think is breaking your code at the minute because your img1 is not an image at all and it doesn’t know what to do with it
yes you were right. Sorry! fixed!
Yup, immediately works when I point it to an actual image, that was the issue 
Note: I would maybe advise deleting the two print statements - they are absolutely killing my browser as they are printing the position of the mouse constantly, even when it only moves a fraction of a pixel - there are thousands and thousands of lines being printed to my console atm and causing my browser to lock up
Did it! Didn’t know they were unnecessary haha
They’re super useful for debugging things (in the browser, you can just open the developer tools and look at the console, that’s where you get the output from print). But yup, need to be careful when you have something that will happen so often (in this case every time the position of the mouse changes), the logs will pile up really quickly
Oh okay thanks! So do you think you can help me with my problem? Basically referencing a second image that I can access by moving my mouse from right to left?
I think so, I shall try. Are you working off a tutorial btw?
Nope, did the one image thing in class and my assignment is to add a second one
1 Like
I’ll just have a quick look at how it works
Ok, so you want another image here, so load in img2, axactly the same, with an img2 variable declared at the top as well.
To tell which horizontal direction the user is moving the mouse in, you need to know if the previous x position of the mouse was less than (user is going left-to-right) or greater than (user is going right-to-left) the current x position.
You’ll want a variable to keep a hold of that (put it right under the var img1 at the top, and probably set it to 0).
Then what you can do is change code around the var currentColor = img1.get(desiredXpoint, desiredYpoint);. You now have two images, so the check needs to be:
desiredX is mouseX
# the condition you add in:
if the direction is left to right:
currentColor is img1.get(desiredX, desiredY)
else:
# the direction is going to be right-to-left:
currentColor is img2.get(desiredX, desiredY)
then set old X position to mouseX
As far as I can see this is only doing the first row, I’m not sure if that’s just me deleting something by accident or missing something out - but if you’re getting the same behaviour, you’ll need to make sure it covers the rest as well
1 Like
