Hello everybody I am still new in processing so go easy on me,I have found this code and have been trying how to make so that I can add multiple images to this sketch and on mouswheel() it changes images.I would appreciate if anybody can help me
/* @pjs preload=“star.png”; */
ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int pixelStep = 5;
PImage img;
void setup() {
size(window.innerWidth, window.innerHeight);
background(0);
a = new Attractor();
img = loadImage("star.png");
img.loadPixels();
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
int loc = x + y * img.width;
color pixelColor = img.pixels[loc];
if (alpha(pixelColor) == 0) {
continue;
}
if (loc % 8 > 0) {
continue;
}
if (y % 8 != 0) {
continue;
}
Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
particles.add(pixel);
pixel.display();
}
}
}
void draw() {
background(0);
noStroke();
for (Particle particle : particles) {
if (mousePressed) {
PVector force = a.attract(particle);
a.update();
particle.applyForce(force);
} else {
particle.arrive();
}
particle.update();
particle.display();
}
}
1 Like
use
```
<CODE>
```
for code
<CODE>
/* @pjs preload="star.png"; */
ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int pixelStep = 5;
PImage img;
void setup() {
size(window.innerWidth, window.innerHeight);
background(0);
a = new Attractor();
img = loadImage("star.png");
img.loadPixels();
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
int loc = x + y * img.width;
color pixelColor = img.pixels[loc];
if (alpha(pixelColor) == 0) {
continue;
}
if (loc % 8 > 0) {
continue;
}
if (y % 8 != 0) {
continue;
}
Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
particles.add(pixel);
pixel.display();
}
}
}
void draw() {
background(0);
noStroke();
for (Particle particle : particles) {
if (mousePressed) {
PVector force = a.attract(particle);
a.update();
particle.applyForce(force);
} else {
particle.arrive();
}
particle.update();
particle.display();
}
}
1 Like
as for the multiple images, you can just use something like
PImage img, img1, img2;
void setup() {
img1 = loadImage("star.png");
img1.loadPixels();
img2 = loadImage("nebula.png");
img2.loadPixels();
img = img1; // switch to img 1
img = img2; // switch to img 2
}
1 Like
For the mouse wheel
int imgPosition = 0;
PImage image1;
PImage image2;
PImage image3;
PImage[] images = new PImage[]{image1, image2, image3};
void draw(){
background(0);
fill(255);
text(imgPosition, width/2, height/2);
}
void mouseWheel(MouseEvent e){
int wheelDirection = e.getCount();
imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
}
1 Like
/* @pjs preload="star.png"; */
ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int imgPosition = 0;
int pixelStep = 5;
PImage img, img1, img2,img3;
PImage[] images = new PImage[]{img1, img2, img3};
void setup() {
size(1366,768);
background(0);
a = new Attractor();
img1 = loadImage("star.jpg");
img1.loadPixels();
img2 = loadImage("nebula.jpg");
img2.loadPixels();
img = img1; // switch to img 1
img = img2; // switch to img 2
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
int loc = x + y * img.width;
color pixelColor = img.pixels[loc];
if (alpha(pixelColor) == 0) {
continue;
}
if (loc % 8 > 0) {
continue;
}
if (y % 8 != 0) {
continue;
}
Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
particles.add(pixel);
pixel.display();
}
}
}
void draw() {
background(0);
noStroke();
fill(255);
text(imgPosition, width/2, height/2);
for (Particle particle : particles) {
if (mousePressed) {
PVector force = a.attract(particle);
a.update();
particle.applyForce(force);
} else {
particle.arrive();
}
particle.update();
particle.display();
}
}
void mouseWheel(MouseEvent e){
int wheelDirection = e.getCount();
imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
}
I tried to apply your code but I just get one image and behind of that image numbers 1,2,3 when I use mouseWheel
Thank you ,but then how do I change from one image to the other one?
well, for example, this is how i change from one cursor image to another cursor image
class XCursorDecoder {
// ...
class CursorData {
PImage image = null;
int width = 0;
int height = 0;
int xhot = 0;
int yhot = 0;
}
CursorData getImage(Header header, int index) {
int index_ = 0;
for (TOC toc : header.toc) {
TOC_chunk chunk = toc.chunk;
if (chunk.isImage) {
if (index == index_) {
CursorData cd = new CursorData();
cd.width = chunk.width;
cd.xhot = chunk.xhot;
cd.height = chunk.height;
cd.yhot = chunk.yhot;
cd.image = createImage(cd.width, cd.height, ARGB);
cd.image.loadPixels();
for (int i = 0; i < cd.image.pixels.length; i++) {
cd.image.pixels[i] = ByteTools.readIntRetainPosition(chunk.pixels[i], 1, 0)[0];
}
cd.image.updatePixels();
return cd;
} else {
index_++;
}
}
}
return null;
}
// ...
}
class CursorTools {
XCursorDecoder x = new XCursorDecoder();
XCursorDecoder.CursorData currentCursorData = null;
void loadCursor(String cursor) {
XCursorDecoder.CursorData data = x.loadAndDecode(cursor);
if (data != null) {
// change the current cursor from the old image to the new image
currentCursorData = data;
cursor(data.image, data.xhot, data.yhot);
}
}
}
/* @pjs preload="star.png"; */
ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int imgPosition = 0;
int pixelStep = 5;
PImage img, img1, img2,img3;
PImage[] images = new PImage[]{img1, img2, img3};
void setup() {
size(1366,768);
background(0);
a = new Attractor();
img1 = loadImage("star.jpg");
img1.loadPixels();
img2 = loadImage("nebula.jpg");
img2.loadPixels();
img = img1; // switch to img 1
img = img2; // switch to img 2
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
int loc = x + y * img.width;
color pixelColor = img.pixels[loc];
if (alpha(pixelColor) == 0) {
continue;
}
if (loc % 8 > 0) {
continue;
}
if (y % 8 != 0) {
continue;
}
Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
particles.add(pixel);
pixel.display();
}
}
}
void draw() {
background(0);
noStroke();
fill(255);
text(imgPosition, width/2, height/2);
for (Particle particle : particles) {
if (mousePressed) {
PVector force = a.attract(particle);
a.update();
particle.applyForce(force);
} else {
particle.arrive();
}
particle.update();
particle.display();
}
}
void mouseWheel(MouseEvent e){
int wheelDirection = e.getCount();
imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
}
I tried to apply your code but I just get one image and behind of that image numbers 1,2,3 when I use mouseWheel
That is not quite right.
Right now, you are nowhere near to image changing thing.
You need to recreate the particles or modifying them, since they all are holding the image pixels. Particle creation is in the setup(), wrap it to a function as we call them from the mouse wheel event and from the setup(). The particles ArrayList should be empty before we adding new particles.
void switchImage(int position){
particles.clear();
img = images[imgPosition];
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
int loc = x + y * img.width;
color pixelColor = img.pixels[loc];
if (alpha(pixelColor) == 0) {
continue;
}
if (loc % 8 > 0) {
continue;
}
if (y % 8 != 0) {
continue;
}
Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
particles.add(pixel);
pixel.display();
}
}
}
Then call it from the mouseWheel()
void mouseWheel(MouseEvent e){
int wheelDirection = e.getCount();
imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
switchImage(imgPosition);
}
You dont need to put this part on the draw. Thats for the demonstration only.
I tried and I get “unexpected token:void” error
/* @pjs preload="star.png"; */
ArrayList<Particle> particles = new ArrayList<Particle>();
Attractor a;
int imgPosition = 0;
int pixelStep = 5;
PImage img, img1, img2,img3;
PImage[] images = new PImage[]{img1, img2, img3};
void setup() {
size(1366,768);
background(0);
a = new Attractor();
img1 = loadImage("star.jpg");
img1.loadPixels();
img2 = loadImage("nebula.jpg");
img2.loadPixels();
img = img1; // switch to img 1
img = img2; // switch to img 2
void switchImage(int position){
particles.clear();
img = images[imgPosition];
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
int loc = x + y * img.width;
color pixelColor = img.pixels[loc];
if (alpha(pixelColor) == 0) {
continue;
}
if (loc % 8 > 0) {
continue;
}
if (y % 8 != 0) {
continue;
}
Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
particles.add(pixel);
pixel.display();
}
}
}
}
void draw() {
background(0);
noStroke();
for (Particle particle : particles) {
if (mousePressed) {
PVector force = a.attract(particle);
a.update();
particle.applyForce(force);
} else {
particle.arrive();
}
particle.update();
particle.display();
}
}
void mouseWheel(MouseEvent e){
int wheelDirection = e.getCount();
imgPosition = constrain(imgPosition + wheelDirection, 0, images.length);
switchImage(imgPosition);
}
I solved it ,but in a different way.
// an arrayList of PixelizedImage to keep them at hand
ArrayList<PixelizedImage> images = new ArrayList<PixelizedImage>();
// the index of the image currently displayed
int currentDisplay = 0;
// variables needed by the surviving original code
Attractor a;
int pixelStep = 5;
PImage img;
void setup() {
// size of the window and attractor for the original code
fullScreen();
a = new Attractor();
// initializing all the images and storing them in the 'images' ArrayList
for (String s : new String[] {"hop2.jpg", "hop1.jpg"}) {
images.add(new PixelizedImage(loadImage(s)));
}
}
class PixelizedImage {
// Here's an arrayList for the Particles
ArrayList<Particle> particles = new ArrayList<Particle>();
// the constructor will transform the image in a particle Array, no need to have a special method
public PixelizedImage(PImage img) {
img.loadPixels();
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
int loc = x + y * img.width;
color pixelColor = img.pixels[loc];
if (alpha(pixelColor) == 0) {
continue;
}
if (loc % 8 > 0) {
continue;
}
if (y % 8 != 0) {
continue;
}
Particle pixel = new Particle(x+(width-img.width)/2, y+(height-img.height)/2, pixelColor);
particles.add(pixel);
pixel.display();
}
}
}
// Render() will draw the pixelized image
public void Render() {
for (Particle particle : particles) {
if (mousePressed) {
PVector force = a.attract(particle);
a.update();
particle.applyForce(force);
} else {
particle.arrive();
}
particle.update();
particle.display();
}
}
}
void draw() {
background(0);
noStroke();
// knowing the index of the current image, we fish it out of the ArrayList and draw it
images.get(currentDisplay).Render();
}
void keyPressed() {
// if the key actually being pressed makes a ' ' character:
if (key == ' ') {
currentDisplay++;
if (currentDisplay >= images.size()) {
currentDisplay = 0;
}
}
}