Displaying arrays with processing? - processing

So the code I'm writing is to output an array on the screen. The example I have been basing off my problem is here in which there are dots that are an equal distance from each other. If you're too lazy to click the link, this is the code:
float[][] distances;
float maxDistance;
int spacer;
void setup() {
size(640, 360);
maxDistance = dist(width/2, height/2, width, height);
distances = new float[width][height];
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float distance = dist(width/2, height/2, x, y);
distances[x][y] = distance/maxDistance * 255;
}
}
spacer = 10;
noLoop(); // Run once and stop
}
void draw() {
background(0);
// This embedded loop skips over values in the arrays based on
// the spacer variable, so there are more values in the array
// than are drawn here. Change the value of the spacer variable
// to change the density of the points
for (int y = 0; y < height; y += spacer) {
for (int x = 0; x < width; x += spacer) {
stroke(distances[x][y]);
point(x + spacer/2, y + spacer/2);
}
}
}
What I have coded only returns a white window. This is that code:
float [] arrays = {1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0};;
int spacer=50;
PFont font;
int row;
int col;
void setup(){
size(640,360);
font = createFont("Arial",1);
textFont(font,50);
}
void draw(){
background(255,255,255);
for(int i = 0; i<col; i++){
for(int j=0;j<row;j++){
String myArray = nfp(arrays[i*col+j],1,2);
fill(0,0,0);
text(myArray, i+spacer/2, j+spacer/2);
}
}
}
I'm super new to processing, and stuff. Thanks ahead of time!

In your code, i don't see your col and row initializated.
You should do it in void setup()
Maybe that's the reason why you are not seeing anything on your window, because if this two variables has no value your two loops doesn't execute. In the example you provide, use width and height that are "system variables" that return the size of the window (640x360 in the example)
Also, watch out this:
float [] arrays = {1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0};; (two semicolons)

Related

How can I get the RGB/Greyscale value fro a single pixel

I'm creating a code in Processing that applies a filter to a photo by going over each pixel, extracting the RGB/Grayscale value and modifying the RGB values. The program would take the grayscale value and run it through a few if/else statements to determine how much to modify the RGB values. So far I have this for the code but I'm stumped on how to extract the RGB/Gray values of a pixel
PImage method(PImage image) {
loadPixels();
image.filter(GRAY);
for (int i = 0; i < image.width; i++) {
for (int j = 0; j < image.height; j++) {
//This part here is to store the RGB values
float R;
float G;
float B;
//Convert the RGB to Gray
float coordCol = (0.2989*R) + (0.5870*G) + (0.1140*B);
if (coordCol < 60) {
float rDark = R * 0.9;
float gDark = G * 0.9;
float bDark = B * 0.9;
} else if(60 <= coordCol && coordCol <= 190) {
float bTintBro = B * 0.7;
} else {
float bTintYel = B * 0.9;
}
}
}
return image; // change this to return a new PImage object
}
I've tried many methods, get(), pixel[], filter(GRAY), etc but so far I still can't get the RGB values for a pixel
It's a question many will ask themselves because processing encodes it's colors in a non-intuitive manner. But you're in luck, because they totally know about it being that way! The helpful folks that coded Processing made a couple methods that will get you exactly what you want. Here's the documentation for the one to get the R value, you should be able to track the others from there.
Also, here's a short proof of concept demonstrating how to get the ARGB values from your sketch:
int rr, gg, bb, aa;
PImage bg;
void setup() {
size(600, 400);
// now setting up random colors for a test background
bg = createImage(width, height, RGB);
bg.loadPixels();
for (int i=0; i<width*height; i++) {
bg.pixels[i] = color(random(200), random(200), random(200), random(200));
}
updatePixels();
}
void draw() {
background(bg);
// giving visual feedback
fill(255);
textSize(15);
text("R: " + rr, 10, 20);
text("G: " + gg, 10, 40);
text("B: " + bb, 10, 60);
text("A: " + aa, 10, 80);
}
// THIS IS WHERE THE INFO YOU WANT IS
void mouseClicked() {
loadPixels();
int index = mouseX*mouseY;
rr = (int)red(pixels[index]);
gg = (int)green(pixels[index]);
bb = (int)blue(pixels[index]);
aa = (int)alpha(pixels[index]);
}
I hope it helps. Have fun!

Colored Letters with Colorcycle | Processing

I found a program, that generates random letters in a grid and gives them a random color.
How can I have the letters cange in color or brightness while the program is running?
(sourcecode: https://happycoding.io/examples/processing/for-loops/letters)
I tried making the fill(r, g, b) have a 'r' that cycles from 1 to 255 and back while having 'g' and 'b' at 0, but I could´t get it to update the color. Im cinda new to programming so I´d love to know how I could make that happen.
First, let's change the fill method to accept RGB values:
fill(random(256),random(256),random(256));
To change the colors while the program is running, the changes must be made inside the draw() method, that will constantly loop and update the canvas. Further information about draw here I believe the following code outputs what you asked for:
int rows = 10;
int cols = 10;
int cellHeight;
int cellWidth;
void setup(){
size(500, 500);
cellHeight = height/rows;
cellWidth = width/cols;
textAlign(CENTER, CENTER);
textSize(28);
}
void draw(){
background(32);
for(int y = 0; y < rows; y++){
for(int x = 0; x < cols; x++){
//get a random ascii letter
char c = '!';
c += random(93);
//calculate cell position
int pixelX = cellWidth * x;
int pixelY = cellHeight * y;
//add half to center letters
pixelX += cellWidth/2;
pixelY += cellHeight/2;
fill(random(256),random(256),random(256));
text(c, pixelX, pixelY);
}
}
delay(100);
}

Having trouble drawing Sierpinski's Triangle in Processing

I was trying to draw Sierpinski's Triangle in Processing 3, and managed to get it to run the first two layers. However, when it tries to draw the third and any later layers, it only draws more triangles in some of the triangles.
Here's the code
ArrayList<PVector> initPoints;
int level;
void setup() {
size(400, 400);
noFill();
initPoints = new ArrayList<PVector>();
initPoints.add(new PVector(width/2, height/4));
initPoints.add(new PVector(width/4, 3 * height/4));
initPoints.add(new PVector(3 * width/4, 3 * height/4));
}
void draw() {
triangle(initPoints.get(0).x, initPoints.get(0).y, initPoints.get(1).x, initPoints.get(1).y, initPoints.get(2).x, initPoints.get(2).y);
for (int i = 0; i < 3; i++) {
level = 1;
drawTri(i, initPoints, level);
}
}
PVector findMid(PVector a, PVector b) {
int midX = floor((a.x + b.x)/2);
int midY = floor((a.y + b.y)/2);
return new PVector(midX, midY);
}
void drawTri(int vertex, ArrayList<PVector> basePoints, int layer) {
level = layer + 1;
ArrayList<PVector> points = new ArrayList<PVector>();
points.add(basePoints.get(vertex % 3));
points.add(findMid(basePoints.get(vertex % 3), basePoints.get((vertex + 1) % 3)));
points.add(findMid(basePoints.get(vertex % 3), basePoints.get((vertex + 2) % 3)));
triangle(points.get(0).x, points.get(0).y, points.get(1).x, points.get(1).y, points.get(2).x, points.get(2).y);
if (level < 4) {
for (int i = 0; i < 3; i++) {
drawTri(i, points, level);
}
}
}
Any tips? I think it's something to do with how I'm running the for loops but I'm not sure.
Like I said in my comment, please try to debug your program before you post a question. You need to isolate the problem and understand exactly what the code is doing, and you can do that using print statements and the debugger that comes with the Processing editor.
But just looking at your code, I'm suspicious of the fact that you have a sketch-level level variable as well as a level variable that you're passing into the drawTri() function.
Think about the value of that sketch-level level variable as your code executes. Add print statements to see exactly what it's doing.
If I get rid of the sketch-level level variable, I get this, which I'm guessing is closer to what you wanted:
float x = int(random(0,1024));
float y = int(random(0,600));
float ax=512;
float ay=0;
float bx=0;
float by=600;
float cx=1024;
float cy=600;
void setup()
{
size(1024, 600);
background(0);
}
void nextPoint()
{
int r = int(random(1,7));
float X;
float Y;
if(r==1||r==2)
{
X = lerp(x, ax, 0.5) ;
Y= lerp(y, ay, 0.5);
}
else if(r==3||r==4)
{
X = lerp(x, bx, 0.5) ;
Y= lerp(y, by, 0.5);
}
else
{
X = lerp(x, cx, 0.5) ;
Y= lerp(y, cy, 0.5);
}
x=X;
y=Y;
}
void drawPoint()
{
colorMode(HSB,255,255,255);
stroke(map(y, 0, 15000,100,4000),200,255,10);
strokeWeight(1);
point(ax,ay);
point(bx,by);
point(cx,cy);
point(x, y);
}
void draw()
{
for(int i=0;i<100;++i)
{
drawPoint();
nextPoint();
}
}

modification in the animation of vertical lines with processing

i have modified the code for the animation of vertical lines which was given by . In the recent code I need to change the value between the two arrays of lines which are generated by the code and also make the disappearing of lines gradual. All the lines leaving or coming should have the same spacing between them. Below is the code.
//float[] linePositions = new float[10];
ArrayList<Integer> linePositions = new ArrayList<Integer>();
int lineWidth = 50;
int lineSpacing = 25;
int lineSpeed = 1;
int totalwidth;
int pixelperframe = 0;
int arraySize = 0;
void setup() {
size(640, 360);
println("Setup");
totalwidth = lineWidth+lineSpacing;
for (int i = 0; i < width; i=i +totalwidth) {
//Float value = 0 + (lineWidth+lineSpacing)*i;
linePositions.add(i);
}
arraySize = linePositions.size();
}
Boolean drawn = false;
void draw() {
println("Draw");
background(51);
//loop through the lines
//println("before Draw ka forloop"+linePositions.size());\
pixelperframe = ((lineSpeed - 10) > 1) ? (lineSpeed-10) : 1;
for (int i = 0; i < arraySize; i++) {
//println("Draw ka forloop");
rect(linePositions.get(i), 0, lineWidth, width);
int newPosition = linePositions.get(i) - pixelperframe ;
linePositions.set(i, newPosition);
//linePositions[i] -= lineSpeed;
//wrap the line
if ( linePositions.get(i) < 0) {
println("Wrapping the line");
linePositions.set(i, width);
// drawn = true;
}
}
//int temp = (width - linePositions.get(arraySize - 1)) - totalwidth;
//println(temp);
}
For the spacing between the lines to always be the same, you have to make sure that the total line spacing adds up to the total width of your screen. Right now each line takes up 75 pixels (50 for the line itself and 25 for the space after it), but your width is 640. That will always leave you with extra space, which will mess up your spacing after the lines start over.
So the easiest thing to do is to simply make your window a multiple of the line spacing. Let's go with 600, which is enough room for exactly 8 lines.
However, since you want your lines to slide off the screen, you actually need 9 lines, since you'll often see half of one line going off the screen while half of another line enters the screen. Draw some pictures to see exactly what I'm talking about
If I understand what you mean by making the lines "gradually" restart, you just have to restart them when their right side goes off the screen. In other words, when their x position is negative enough to be off the screen.
Putting it all together, it looks like this:
float[] linePositions = new float[9];
float lineWidth = 50;
float lineSpacing = 25;
float lineSpeed = 1;
void setup() {
size(600, 360);
for (int i = 0; i < linePositions.length; i++) {
linePositions[i] = (lineWidth+lineSpacing)*i;
}
}
void draw() {
background(51);
for (int i = 0; i < linePositions.length; i++) {
linePositions[i] -= lineSpeed;
rect(linePositions[i], 0, lineWidth, height);
if ( linePositions[i] < -(lineWidth+lineSpacing)) {
linePositions[i] = width;
}
}
}

animation of vertical bars using processing

I am basically trying to make a animation of vertical bars across the screen which should be equally spaced and continue until some key is pressed etc.. in the processing.org tool for animation.
I was able to get a kind of animation, but with hard coded values and had to write the same code again and again to generate the animation of bars for the whole frame/screen. I need to make it generic, so that changing the screen width or the size of the bars would not make me change the whole code but just the variables which control the parameters. Below is my code. I have written the code for three vertical bars but that needs to be done for the whole screen..
int a;
int i;
int j;
void setup() {
size(640, 360);
a = width/2;
i = 0;
}
void draw() {
background(51);
//need to avoid these repetitions each time for each bar
rect(a , 0, 25, width);
a = a - 1;
if (a < 0) {
a = width;
}
rect(i= a+50, 0, 25, width);
i = i - 1;
if (i < 0) {
i = width + a;
}
rect(j = i + 50, 0, 25, width);
j = j - 1;
if (a < 0) {
j = width + i;
}
}
It sounds like you're looking for an array.
An array is like a variable, only it can hold multiple values in its indexes. You can then use a for loop to iterate over the array and do stuff based on the values in the array.
Here's an example that uses an array to keep track of the line positions:
float[] linePositions = new float[10];
float lineWidth = 25;
float lineSpacing = 25;
float lineSpeed = 1;
void setup() {
size(640, 360);
for (int i = 0; i < linePositions.length; i++) {
linePositions[i] = width/2 + (lineWidth+lineSpacing)*i;
}
}
void draw() {
background(51);
//loop through the lines
for (int i = 0; i < linePositions.length; i++) {
//draw the line
rect(linePositions[i], 0, lineWidth, width);
//move the line
linePositions[i] -= lineSpeed;
//wrap the line
if ( linePositions[i] < 0) {
linePositions[i] = width;
}
}
}
More info on arrays can be found in the Processing reference.

Resources