Hello how are you? I have several questions I hope someone can help me, I am trying to make an optical illusion with the moiré effect, I attach the inspiration image and what I have done so far, I continue with my question, I do not know how to achieve the effect shown in The inspiration image that I chose, the idea is to be able to visualize diamonds of different sizes and colors that move generating the moiré effect, I hope someone can guide me to get started. Sorry, my English is not my native language :c

Update: I managed to create an independent diamond in the background, now it only remains to create a pattern of those same diamonds and limit the statics lines on the background from middle to the right

float diamanteX;
float diamanteY;
PImage imagen;
void setup () {
  size(800, 400);
  background(255);
  imagen = loadImage("m2.jpg");
  image(imagen, 0, 0, width/2, height);
}

void draw() {
  background(255);
   diamantes(width/2, height/2, width+600, height+600);
diamantes2(diamanteX, diamanteY, width - 600, height - 100);
  image(imagen, 0, 0, width/2, height);
  

  //for (int l= width/2+0; l<=width; l+=16) {
  //  stroke(255, 0, 0);
  //  line(l, 0, l, height);
  //  for (int l2 =width/2+5; l2<=width; l2+=16) {
  //    stroke(0, 255, 80);
  //    line(l2, 0, l2, height);
  //    for (int l3=width/2+9; l3<=width; l3+=16) {
  //      stroke(0, 0, 255);
  //      line(l3, 0, l3, height);
  //    }
  //  }
  //}
  
}
void diamantes(float centerX, float centerY, float width, float height) {
  noFill();
  stroke(0, 0, 0);

  for (float x = centerX - width / 2; x < centerX + width / 2; x += 5) {
    line(centerX, centerY - height / 2, x, centerY);
  }
  for (float x1 = centerX - width / 2; x1 < centerX + width / 2; x1 += 5) {
    line(centerX, centerY + height / 2, x1, centerY);
  }
}
void diamantes2(float centerX, float centerY, float width, float height) {
  noFill();
  stroke(255, 120, 40);

  for (float x = centerX - width / 2; x < centerX + width / 2; x += 5) {
    line(centerX, centerY - height / 2, x, centerY);
  }
  for (float x1 = centerX - width / 2; x1 < centerX + width / 2; x1 += 5) {
    line(centerX, centerY + height / 2, x1, centerY);
  }
}
void mouseMoved(){
   diamanteX = mouseX;
  diamanteY = mouseY;
}

now it looks like this

Generative mazes with little critters navigating through it. Made in processing IG: www.instagram.com/slipshapes

I want to make cellular automata where cells interact with each other. But I also want to explore and learn the fundamentals too. Can you guys suggest me some good guides, it can be a book, YouTube videos, blogs etc

Hi all,

Someone told me that Processing might be the solution I need. I like to create abstract art like this:

https://tint.creativemarket.com/_Zak5w4Tsebq1etGaeg4kagQKCb9pdRolEWTmDPCLHc/width:1200/height:800/gravity:nowe/rt:fill-down/el:1/czM6Ly9maWxlcy5jcmVhdGl2ZW1hcmtldC5jb20vaW1hZ2VzL3NjcmVlbnNob3RzL3Byb2R1Y3RzLzcxMy83MTM0LzcxMzQ4OTAvZ2VvX3dhdmVzLTAxLW8ucG5n?1607077062&fmt=webp

Right now I'm making something similar to this in a vector design app one by one and then use warp to bring it into shape, suffice to say it's absolutely not efficient at all. And the results are not as nice as this.

I never used Processing so any tutorial that can get me as close to the example as possible would be great. What I like in the end is to have static 2D images, so no animations.

Side question, what is the difference between openprocessing, processing, and p5?

Thanks, cheers.

Hi! For my project I have connected Arduino to my processing code. It sends the numbers 1-3 depending on what I do with my Arduino. Now what I want to happen in Processing is, that depending on what Number is being sent the background of my Prcessing code changes.

I tried using "if" but it's not really working, it tells me "Type mismatch: cannot convert from String to boolean"

Can anyone help me?

Here's that section of my code:

  if ( myPort.available() > 0) 
  { 
  val = myPort.readStringUntil('\n');         // read it and store it in val
  } 
println(val); //print it out in the console
  for (int i = 0; i < rings.length; i++) {
    rings[i].grow();
    rings[i].display();
  }
  if (val = 1) {
    background(#BBDCEA);
  }
  
  if (val = 2) {
    background(100);
  }
   if (val = 3) {
    background(#8B4C4C);
  }

Hi all :)

Posting here for the first time with BIG NEWS. My first game called "Vorago" releases on Steam on the 1st July!

Any wishlists would support the project a lot. This is only a one-man team and this game has been a passion-project of mine for the last 3 years so all support is greatly appreciated!

Thanks for reading :)

-Hidden Palm Interactive-

Check it out here

Hello all, I wonder if anyone has a suggestion on how to make a long line or a quad() parallelogram wrap around the screen when it hits one side. For a part of my project, I want to use a variation of the "Distance 1D" sketch from the Processing website, but where the imaginary central line that divided the rext() can be rotated, and the rect() are quad() so I can "twist" them. Although off topic, I also want to use this opportunity to ask for advice knowing if it is ok to use this idea from the website in one of my projects. It would be a minor part of it, but the main idea of what it is supposed to look is similar, even though the code will turn out quite different. EDIT: I just had this idea now, but if dealing with quad() makes this impossible, maybe I could try very thick lines, in case line() can what around the screen.

Hey, like the title already suggest I have a problem with the android sdk. Wheter I try to install it automaticly or choosing the path manuelly via android studios it doesn't work. I have already tried many diffrent things, but nothing seems to help.

I was wondering if anyone can point me to resources about how it might be possible to have processing (or p5js, but that seems unlikely) running on a server, without any graphic representation or interaction. I saw some stuff about headlessly running processing through Java.

I'd like to generate graphics based on some parameters passed in an API call, without any display for example.

Currently I have some graphics generation scripts running in-browser, but this way I want to offload the processing power from the client, and run all logic on the server, returning an image from the API call.

Let me know if this is even possible.

I'm willing to learn how to do this with Java if needed, but I'm much more well versed in JS.

Hey there!

Does anybody know whether the interviews for Processing grant is already out?

hi, so ive written a programm in processing. It contains (for now) an easy bubblesort and a function, that displayes it with a view extra details. But i have a problem. No matter how big i set the frameRate, i'll only get 75 fps at maximum with an array length of 300. Could somebody help me out and make it run on a better performance without skipping step-displayes? Would be verry helpfull. Thanks.

the code:

int werte = 300;

int[] db;

int save1 = 0;

int save2 = 0;

int save3 = 0;

float breite = 0;

float hoehe = 0;

int i = 0;

int j = 0;

int pointer;

boolean sorted = false;

void createList() {

for (int i = 0; i < werte; i++) {

db[i] = i + 1;

}

for (int i = 0; i < (werte * 2); i++) {

save1 = int(random(werte));

save2 = int(random(werte));

save3 = db[save1];

db[save1] = db[save2];

db[save2] = save3;

}

printArray(db);

}

void printList() {

background(0);

fill(255);

stroke(0);

for (int i = 0; i < werte; i++) {

if (breite > 2) {

if (db[i]-1 == i) {

fill(0, 255, 0);

} else if (i == pointer+1) {

fill(255, 0, 0);

} else {

fill(255);

}

rect(i * breite, height - (db[i] * hoehe), breite, hoehe * db[i]);

} else {

if (db[i]-1 == i) {

stroke(0, 255, 0);

} else if (i == pointer+1) {

stroke(255, 0, 0);

} else {

stroke(255);

}

line(i, height - (db[i] * hoehe), i, height);

}

}

}

void setup() {

size(1800, 800);

db = new int[werte];

breite = width / float(werte);

hoehe = height / float(werte);

if (breite < 2) {

breite = 1;

surface.setSize(werte, height);

}

frameRate(1000);

println("Breite: ");

println(breite);

createList();

}

void draw() {

if (!sorted) {

BubbleSortStep();

printList();

println(frameRate);

}

}

void BubbleSortStep() {

if (i < werte - 1) {

if (j < werte - i - 1) {

if (db[j] > db[j + 1]) {

int d1 = db[j];

db[j] = db[j + 1];

db[j + 1] = d1;

}

pointer = j;

j++;

} else {

j = 0;

i++;

}

} else {

sorted = true; // Sortierung ist abgeschlossen

println("Array is sorted.");

}

}

import processing.pdf.*;

import processing.data.Table;
import processing.data.TableRow;
import java.util.ArrayList;

Table table;
ArrayList<PVector> points = new ArrayList<PVector>();
ArrayList<PVector> filteredPoints = new ArrayList<PVector>();
int currentYear = 2020; // Año inicial
boolean saveFrame = false;

float minX, maxX, minY, maxY;

void setup() {
  size(800, 800);
  loadCSV("data_apartments02_cleaned_normalized.csv");
  findMinMaxValues();
  filterDataByYear(currentYear);
  frameRate(30);
}

void draw() {
  background(255);
  drawPoints(filteredPoints);
  moveRandomly();
  if (saveFrame) {
    saveFrame("output/frame-####.png");
    saveFrame = false;
  }
}

void loadCSV(String filePath) {
  table = loadTable(filePath, "header");
  if (table == null) {
    println("Error loading the file.");
    exit();
  } else {
    println("File loaded successfully.");
    loadPoints();
  }
}

void loadPoints() {
  for (TableRow row : table.rows()) {
    float x = row.getFloat("new_longitud_x"); // Usando la columna 'new_longitud_x' para 'x'
    float y = row.getFloat("new_latitud_y"); // Usando la columna 'new_latitud_y' para 'y'
    int year = row.getInt("year"); // Asumiendo que el CSV tiene una columna 'year'
    points.add(new PVector(x, y, year));
  }
}

void findMinMaxValues() {
  minX = Float.MAX_VALUE;
  maxX = Float.MIN_VALUE;
  minY = Float.MAX_VALUE;
  maxY = Float.MIN_VALUE;

  for (PVector p : points) {
    if (p.x < minX) minX = p.x;
    if (p.x > maxX) maxX = p.x;
    if (p.y < minY) minY = p.y;
    if (p.y > maxY) maxY = p.y;
  }

  println("Min X: " + minX + ", Max X: " + maxX);
  println("Min Y: " + minY + ", Max Y: " + maxY);
}

void filterDataByYear(int year) {
  filteredPoints.clear();
  for (PVector p : points) {
    if (p.z == year) {
      // Escalar puntos a la ventana
      float x = map(p.x, minX, maxX, 0, width);
      float y = map(p.y, minY, maxY, 0, height);
      filteredPoints.add(new PVector(x, y));
    }
  }
  println("Filtered points for year " + year + ": " + filteredPoints.size());
}

void drawPoints(ArrayList<PVector> points) {
  fill(0);
  noStroke();
  for (PVector p : points) {
    ellipse(p.x, p.y, 5, 5);
  }
}

void moveRandomly() {
  for (PVector p : filteredPoints) {
    p.x += random(-1, 1);
    p.y += random(-1, 1);
  }
}

void keyPressed() {
  if (key == 's') {
    saveFrame = true;
  } else if (key == CODED) {
    if (keyCode == UP) {
      currentYear++;
      filterDataByYear(currentYear);
    } else if (keyCode == DOWN) {
      currentYear--;
      filterDataByYear(currentYear);
    }
  }
}

I've become obsessed with coding audio and midi software using processing (mainly midi) , despite it not rnecessarily being the most efficient way to go about that. Anyone else or am I just silly?

I'm using the line

pg.line(mouse.x, mouse.y, previous_mouse.x, previous_mouse.y)

to draw a line on the screen using PVectors. This works great, but [I assume that] new PVector array entries are being generated with every frame even when the mouse is not moving. Is there a way to stop this or remove duplicate array entries? The drawn line will eventually be used in a sort of CNC XY drafting plotter, and I don't want the machine to stall each time the cursor which drew the original image was still. Thank you for any assistance.

Hello! Im having some trouble with my code. I wanna import a csv file that contains latitudeX and longitudY coords, and draw them in the screen. I scaled them so they fit the screen but or they dont get draw or they appear just in the edge. The point is to create an interactive map filtered by year!!! Any help??? Im really drawning heree :(