I am using processing to make some gauge meters. My usual method is to draw a lot of primitives, but now that I'm trying to move to use the Raspberry Pi, I've noticed that my previous techniques are too intensive for it and the FPS drop makes it unusable.

So I'm trying a new technique. To simply draw an overlay to stamp over a primitive that represents the meter, to reduce the math required. This presents a problem, however, as I can't appear to figure out how to 'draw' transparency into a PGraphics thing. I want transparency where black is, essentially. How do I achieve this? I want the ring of black in the square gauge to be transparent and to show whatever I have behind it, in this case, the white pie graph. I will then draw text on top of this, and it should be a pretty clean way to draw gauges.

Thank you for the help!

PGraphics gaugeoverlay;

void setup() {
  size(500, 500);
  gaugeoverlay = createGraphics(200, 200); gaugeoverlay.beginDraw();
  gaugeoverlay.background(0);
  gaugeoverlay.endDraw();

  drawgauge();
}

void draw() {
  fill(255);
  noStroke();
  arc(100, 100, 170, 170, 0, PI+QUARTER_PI, PIE);

  image(gaugeoverlay, 0, 0);
}

void drawgauge() {
  gaugeoverlay.beginDraw();
  gaugeoverlay.fill(100);
  gaugeoverlay.noStroke();
  gaugeoverlay.rect(10, 10, 180, 180, 10);
  gaugeoverlay.fill(0);
  gaugeoverlay.ellipse(100, 100, 170, 170);
  gaugeoverlay.fill(100);
  gaugeoverlay.ellipse(100, 100, 150, 150);
  gaugeoverlay.endDraw();
}

Basically I am using string arrays to generate a piece of text randomly and am calling them into a text function by writing;

text(sentences1[n] + sentences2[m], 400, 400);

Is there any way of colouring the output of each array with a different colour? So that one sentence could be blue and the next red for example?

This is the link I got the code from (http://learningprocessing.com/examples/chp17/example-17-06-textbreakingup) Here's the code:

// Example 17-6: Text breaking up 

PFont f;
String message = "click mouse to shake it up";

// An array of Letter objects
Letter[] letters;

void setup() {
  size(480, 270);

  // Load the font
  f = createFont("Arial", 20);
  textFont(f);

  // Create the array the same size as the String
  letters = new Letter[message.length()];

  // Initialize Letters at the correct x location
  int x = 125;
  for (int i = 0; i < message.length (); i ++ ) {
    // Letter objects are initialized with their location within the String as well as what character they should display.
    letters[i] = new Letter(x, 140, message.charAt(i)); 
    x += textWidth(message.charAt(i));
  }
}

void draw() {
  background(255);
  for (int i = 0; i < letters.length; i ++ ) {

    // Display all letters
    letters[i].display();

    // If the mouse is pressed the letters shake
    // If not, they return to their original location
    if (mousePressed) {
      letters[i].shake();
    } else {
      letters[i].home();
    }
  }
}

// A class to describe a single Letter
class Letter {
  char letter;

  // The object knows its original " home " location
  float homex,homey;

  // As well as its current location
  float x,y;

  Letter(float x_, float y_, char letter_) {
    homex = x = x_;
    homey = y = y_;
    letter = letter_;
  }

  // Display the letter
  void display() {
    fill(0);
    textAlign(LEFT);
    text(letter,x,y);
  }

  // Move the letter randomly
  void shake() {
    x += random(-2,2);
    y += random(-2,2);
  }

  // At any point, the current location can be set back to the home location by calling the home() function.
  void home() { 
    x = homex;
    y = homey;
  }
}

I wrote (what i thought would be) a simple function : get (x, y)-point's color values :

function getPix(_x, _y) { loadPixels(); let off = (_x + _y * width) * pixelDensity() * 4; let result = [ pixels[off], pixels[off + 1], pixels[off + 2], pixels[off + 3] ]; return result; }

The function seems to work fine : console.log(off) sends back the right index, according to the "_x" & "_y" values, and i get the background's RGBA values.

Now, in Draw, i have an object displaying something. (say a blue square at 0, 0)

var col = color(0, 0, 255, 255); obj.show() { fill(col); rect(0, 0, 10, 10); }

But if i am to call getPix(0, 0); again, i still get my background's color as a result : how comes ? My guess is : loadPixels() loads before my object is shown, but since i'm using this function for the first time, i surely have some misconceptions about the way it works.

The original code is slightly more complex, and i may give it if needed, but this exemple is still pretty much alike.

Thanks for any answer to come :)

/* Colour Morph
   Example for COMP 1010

   Draw a bar across the centre of the window, with height
   BAR_HEIGHT, that consists of NUM_STEPS rectangles of
   equal width, with the left one having the colour set by
   INIT_RED, INIT_GREEN, INIT_BLUE, and the right one set by
   FINAL_RED, FINAL_GREEN, and FINAL_BLUE, and changing
   smoothly in between.
*/

size(700,200); //Make it wide but not too tall.

final int NUM_STEPS = 8; //The number of different coloured bars to use
final int BAR_HEIGHT = 150; //The height of the bar
final float BAR_WIDTH = (float)width/NUM_STEPS; //The width of each small slice
final float INIT_RED=156, INIT_GREEN=63, INIT_BLUE=178; //Initial colour
final float FINAL_RED=25, FINAL_GREEN=162, FINAL_BLUE=159; //Final colour

for(int i=0; i<NUM_STEPS; i++){
  //i will be 0,1,...,NUMSTEPS-1
  float position = i/(NUM_STEPS-1.0); //A value from 0.0 to 1.0
  float redValue = INIT_RED+(FINAL_RED-INIT_RED)*position;
  float greenValue = INIT_GREEN+(FINAL_GREEN-INIT_GREEN)*position;
  float blueValue = INIT_BLUE+(FINAL_BLUE-INIT_BLUE)*position;
  fill(redValue,greenValue,blueValue);
  stroke(redValue,greenValue,blueValue); //Make the outline match, too.
  rect(i*BAR_WIDTH,(height-BAR_HEIGHT)/2,BAR_WIDTH,BAR_HEIGHT);
}//for

In the loop, why do we use those operations? If I was asked to code this on an exam, how would I know to do that?? I dont get the logic behind it

I believe I'm misunderstanding something about how the draw() function works. Below is a minimal working example of what I have in mind. The conditional 'if' statement seems to be reversing the fill colour. Rectangles should be in red, ellipses in blue.

Instead, the rectangle shows up in blue, while the circle shows up in red. If I only display(0) or display(1), then the correct colour shows up. Any thoughts?

Thanks for any help!

void setup() {
  size(400, 400);
}

void draw() {
  display(0);
  display(1);
}

void display(int i) {    
    if(i == 0) {      
      rect(20, 20, 40, 40);
      fill(200, 0, 0); // rectangles are red!
    }
    if(i == 1) {
      ellipse(100, 100, 20, 20);
      fill(0, 0, 200); // circles are blue!
    }
}

var song;


var c1r1 = {
  x:100,
  y:100
  }

var c2r1 = {
  x:260,
  y:100
  }

var c3r1 = {
  x:420,
  y:100
  }

var c4r1 = {
  x:570,
  y:100
}

var c5r1 = {
  x:720,
  y:100
}

var c1r2 = {
  x:100,
  y:260
  }

var c2r2 = {
  x:260,
  y:260
  }

var c3r2 = {
  x:420,
  y:260
  }

var c4r2 = {
  x:570,
  y:260
  }

var c5r2 = {
  x:720,
  y:260
}

var c1r3 = {
  x:100,
  y:420
}

var c2r3 = {
  x:260,
  y:420
}

var c3r3 = {
  x:420,
  y:420
}

var c4r3 = {
  x:570,
  y:420
}

var c5r3 = {
  x:720,
  y:420
}

var c1r4 = {
  x:100,
  y:580
}

var c2r4 = {
  x:260,
  y:580
}

var c3r4 = {
  x:420,
  y:580
}

var c4r4 = {
  x:570,
  y:580
}

var c5r4 = {
  x:720,
  y:580
}

var c1 = [
  fill(243, 158, 34),
  fill(57, 178, 136), 
  fill(239, 73, 36),
  fill(234, 130, 36),
  fill(66, 104, 177)
  ];


function preload() {
  song = loadSound('assets/findingnemoegg.mp3');
}


function setup () {
  createCanvas (windowWidth, windowHeight);
  song.loop();
  background (18,21,34);

    for (var i = 0; i < 4; i++) {
      c1[i] = [];
    }


}



function draw () {

  noStroke();
  for (var i = 0; i < 4; i++) {
    fill(c1[i]);
  }

  rect(c1r1.x, c1r1.y, 50, 50, 12);
  rect(c2r1.x, c2r1.y, 50, 50, 12);
  rect(c3r1.x, c3r1.y, 50, 50, 12);
  rect(c1r2.x, c1r2.y, 50, 50, 12);
  rect(c2r2.x, c2r2.y, 50, 50, 12);
  rect(c3r2.x, c3r2.y, 50, 50, 12);
  rect(c4r1.x, c4r1.y, 50, 50, 12);
  rect(c5r1.x, c5r1.y, 50, 50, 12);
  rect(c4r2.x, c4r2.y, 50, 50, 12);
  rect(c5r2.x, c5r2.y, 50, 50, 12);
  rect(c1r3.x, c1r3.y, 50, 50, 12);
  rect(c2r3.x, c2r3.y, 50, 50, 12);
  rect(c3r3.x, c3r3.y, 50, 50, 12);
  rect(c4r3.x, c4r3.y, 50, 50, 12);
  rect(c5r3.x, c5r3.y, 50, 50, 12);
  rect(c1r4.x, c1r4.y, 50, 50, 12);
  rect(c2r4.x, c2r4.y, 50, 50, 12);
  rect(c3r4.x, c3r4.y, 50, 50, 12);
  rect(c4r4.x, c4r4.y, 50, 50, 12);
  rect(c5r4.x, c5r4.y, 50, 50, 12);



}

Why are (in the following code) multiple shapes in the fill color (150) even though the fill command is the last command in the DRAW zone. I thought only subsequent shapes would be filled in that color - but it is also filling in earlier shapes in the same (150) grey.

void setup() {
    size(640,420);
    background(240);
    smooth();
}

void draw() {

  //body of zork
  rectMode(CENTER);
  rect(320,210,80,120);

  //head of zork
  ellipse(320,118,65,65);

  //eyes of zork
  //fill(50);
  ellipse(307,115,10,20);
  ellipse(333,115,10,20);
  fill(150);
}

 PShape baseMap;
 String csv[];
  String myData[][];

  //Setup BaseMap and csv info

  void setup() {
    size(3000, 1700);
    noLoop();
    baseMap = loadShape("WorldMap.svg");
    csv = loadStrings("WeatherCoordinates.csv");
    myData = new String[csv.length][5];
    for(int i=0; i<csv.length; i++) {

      myData[i] = csv[i].split(",");


 }
 }


 //draw
 void draw() {
   shape(baseMap, 0, 0, width, height);
   noStroke();


   for(int i=0; i<myData.length; i++){
     fill(25, 30, 255, 70);
     noStroke();
     float graphLong = map(float(myData[i][3]), -180, 180, 0, width);
     float graphLat = map(float(myData[i][2]), 90, -90, 0, height);
     float markerSize = 5*(float(myData[i][0]));
    println(graphLong + " / " + graphLat);  
    ellipse(graphLong, graphLat, markerSize, markerSize);


   if(i<25){
     fill(0);
     text(myData[i][1], graphLong + markerSize + 30, graphLat);
     noFill();
     stroke(0);
     line(1.2*graphLong+markerSize, graphLat, graphLong+markerSize, graphLat);
      }
     }
   }
 }

Basically I want to load multiple complex svg files and change the alphas of individual children within each svg without having to load each child separately. The following code I wrote as a simplified example of what I want to achieve just not how I'd like to achieve it. I think there might be an easier way to do this. Thanks.

PShape circle;
PShape tp;
PShape bm;
void setup(){
size(600,600);
background(#0066CC);
circle = loadShape("circle.svg");
tp = circle.getChild("top");
bm = circle.getChild("bottom");

tp.disableStyle();
fill(#000000, 100);
stroke(#995C1F);
shape(tp,0,0,width,height);

bm.disableStyle();
fill(#B2B247);
stroke(#995C1F);
shape(bm,0,0,width,height);


}

I'm trying to color an array of objects using a for loop and the fill() function, but when I use it, it colors not only colors the current rectangle in the array (which would be correct), but also all previous rectangles. I want it to only color the current rectangle.

    void setup () {
      size (1200, 700);
      background (255, 255, 255);
      smooth();
      rect = new Rectangle [count]; //creates a grid of possible rectangles, based on the dimensions of the screen
      for (int i = 0; i<= (count-1); i++) {
        fill (255, 255, 255);
        ypos = ypos + heigh;
        if (ypos >= 700) {
          ypos = 0;
          xpos = xpos + wid;
        }
        rect[i] = new Rectangle(xpos, ypos, wid, heigh, redPressed, greenPressed, yellowPressed, bluePressed, blackPressed);
      }
      int now = millis();
    }

    void draw() {
      for (int i = 0; i < control; i++) {
        if (keyPressed) { //detects if key is pressed and colors the current rectangle that way
          if (key == 'r' ||key == 'R') {
            fill (255, 0, 0);
          }
          if (key == 'g' ||key == 'G') {
            fill (0, 255, 0);
          }
          if (key == 'y' || key == 'Y') {
            fill (255, 255, 0);
          }
          if (key == 'b' || key == 'B') {
            fill (0, 0, 255);
          }
          if (key == 'k' || key == 'K') {
            fill (0, 0, 0);
          }
        }
        stroke (0, 0, 0);
        rect (rect[i].xpos, rect[i].ypos, rect[i].xdim, rect[i].ydim); //draws the current rectangle, moving through the grid
      }
      if (millis() - now >= wait) { //causes a 1 second delay between rectangles
        now = millis();
        control++;
        if (control > (count-1)) {
          control = (count-1);
          i = 0;
        }
      }
    }

Thanks in advance!

I am new to processing and I need help. I want to make an active processing program that makes a circle grow in size when you move the mouse away from the center of the screen, and shrinks in size when the mouse is moved back towards the center of the screen. Also, i want the circle to gradually get darker in color when moving away from the center of the screen.

The coordinates for the top square are: x: 290, x:290+20, y260 and y260+20.

I think I need to insert this line of code somewhere in the function but I'm not sure how to write it correctly.
&& mouseX>290 && mouseX<290+20 && mouseY>260 && mouseY<260+20

The coordinates for the bottom square are: x: 290, x:290+20, y320 and y320+20. && mouseX>290 && mouseX<290+20 && mouseY>320 && mouseY<320+20

Also, I am not sure of the correct syntax for writing the RGB value in teh function. If I put brackets it doesn't work, but if I have no brackets it just changes between white and black.

This is what I have so far:

function doodle (processing) {
      processing.setup = function () {
      processing.size (500, 500);
     processing.background (138, 153, 245)
}

             processing.draw = function () {
            /* top window
     */
     processing.fill (top);
    processing.rect (290, 260, 20, 20);

     /* bottom window
     */
    processing.fill (bottom);   
    processing.rect (290, 320, 20, 20); 

    }

    processing.mouseClicked = function () {
        if 
            (bottom ==0) {
            bottom = (255, 183, 51);
        } else {
            bottom = 0;
        }
    }

            processing.mouseClicked = function () {
        if 
            (top ==0) {
            top = (255, 183, 51);
        } else {
            top = 0;
        }
    }

}

var top = 0; var bottom = 0; var canvas = document.getElementById('sketch'); new Processing (canvas, doodle);

thank you!****

Full disclosure, my current code is based on several helpful forum answers:

` int squareSize = 40; // Dimensions ask for 40x40 int cols, rows;

  void setup() {
  size(320, 320); // Specified by assignment

  // Initialize columns and rows
  cols = 8; // Specified by assignment | size/squareSize
  rows = 8; // Specified by assignment | size/squareSize
  }

  void draw() {

  // Begin loop for columns
  for (int i = 0; i < cols; i++) {
  // Begin loop for rows
  for (int j = 0; j < rows; j++) {

  // Scaling up to draw a rectangle at (x,y)
  int x = i*squareSize; // width
  int y = j*squareSize; // height

  // For every column and row, a rectangle is drawn at an (x,y) location scaled and sized by videoScale.
  rect(x,y,squareSize,squareSize);

  // Begin fill controls
  if ((i+j) % 2 == 0) { // Even is red
    fill(250, 0, 0);
  }

  else { // Odd is black
    fill(0); } 
  }
 }
 }

`

My results are: . Firstly, I'm not even sure why this code works past the first two rows: ((i + j) % 2) should always == 0 given rows and cols are set up to always create an even result, which means I should be getting all red squares, I think.

If someone could explain a) why I'm getting these results and/or b) what I should look into fixing (is it my for loops? do I need more if statements?) to make it generate a proper checkerboard pattern, I'd appreciate it very much.

Does anyone know how this could be done?

To help it make sense, this is the size statement: size(600,200);

Here's the 'for' loop:-

for(Index=0;Index<10;Index++) { InBuffer[Index]=MyPort.read(); fill(<*indexed RGB value*>); rect(Index*60,200,60,-InBuffer[Index]); }

(This is my first 'real' sketch.)

Thanks in advance, guys.

I am trying to leverage the fill(float gray) method and I have changed my colorMode(RGB, 1.0).

// ©Jon Pellant 2015

// globals
float span = 4.0;

void setup() {
  //
  size (400, 400);
  colorMode(RGB, 1.0);
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j++) {
      // draw a point
      fill(ImprovedPerlinNoise.noise(span/i, span/j, 0)); // ImprovedPerlinNoise returns double
      point (i,j);
    }
  } 
}

! It appears that the code interpreter is not working on my post.

Here's a bit of a stupid question I can't figure out:

So I'm trying to paint circles that fade away with time. So it was suggested to me that the easiest way to do this was to just paint the background with a high transparency, so that it looks like everything is fading. So I think that to do this background(0,0,0,1) should paint the background on barely visible.

This is the related code:

    if (runMode == 6) {
      backgroundCounter++;
      if (flagNoteFrequency == 1) {
        background(0);
        flagNoteFrequency++;
      }
      colorMode(HSB, 100);
      if (backgroundCounter == 300){
        background(0,0,0,1);
        backgroundCounter = 0;
      }
      for (int i = 0; i < bands; i++) {
        float[][] dominantFreq = dominantFreq(filter((limitFreq/bands) * (i), (limitFreq/bands) * (i+1), filter.fftArray));
        //float[][] dominantFreq = dominantFreq(arrayResult);

        noteFrequency(dominantFreq, i+1, bands);
      }
    }  
  }

So basically, I use the flagNoteFrequency to paint a black background once at the start. And then I use a counter to slow down the fading, background(0,0,0,1); should then paint a nearly transparent "black background" on top of what was there previously. However, when I run this it just paints over completely opaque after 5 seconds (300 from the counter / 60 fps). noteFrequency takes care of drawing the circles.

I'm doing something wrong with background(0,0,0,1); I tried also background(0,0,0,0.0000000001) and similar but that's not the issue. I've looked up the alpha and 0 should be transparent, right?

I'm creating a simple breakout game where in when a block is hit it moves out of the screen at a certain pace, and then disappears. I would like said block to be drawn on top of any block that is still stationary. It works only partially. For some reason the fill of the moving block is drawn on top of the fill of the stationary block, but the stroke of the stationary block shows through the moving block. Image here:

The moving blocks are drawn after the stationary blocks. The code for drawing a block looks like this:

    @ Override
    public void draw() {
        if (doomed) {
            x += velocity * cos(angle);
            y += velocity * sin(angle);
        }
        if (x < 0 || x > width || y < 0 || y > height) {
            dead = true;
        } else {
            strokeCap(SQUARE);
            fill(red, green, blue);
            stroke(0);
            rect(x, y, w, h);
            noStroke();
            fill(red + lowerColor, green + lowerColor, blue + lowerColor);
            triangle(x, y + blockHeight, x + blockWidth, y + blockHeight, x + blockWidth, y);
            fill(red + upperColor, green + upperColor, blue + upperColor);
            rect(x + bevel * cos(bevelAngle), y + bevel * sin(bevelAngle), blockWidth - 2 * bevel * cos(bevelAngle), blockHeight - 2 * bevel * sin(bevelAngle));
        }
    }

The main draw loop called by processing looks like this, where blockArray contain all the stationary blocks, and doomedBlockArray contains all the moving blocks:

@ Override
public void draw() {
    if (firstRun && frame != null) {                    // Lock frame size
        frame.setResizable(false);
        firstRun = false;
    }

    background(230);                                    // Clear frame

    if (blockArray.size() == 0) {
        levelUp();
    }

    blockIterator = blockArray.iterator();              // Draw stationary blocks
    while (blockIterator.hasNext()) {
        blockIterator.next().draw();
    }

    doomedBlockIterator = blockArrayOfDoom.iterator();  // Draw moving blocks
    while (doomedBlockIterator.hasNext()) {
        block = doomedBlockIterator.next();
        if (block.isDead()) {
            doomedBlockIterator.remove();               // Remove if block is outside screen
        } else {
            block.draw();
        }
    }

    drawableIterator = drawablesArray.iterator();       // Draw anything else
    while (drawableIterator.hasNext()) {
        drawableIterator.next().draw();
    }
}

As you can see, the "doomed" blocks are drawn after the regular blocks, and yet the stroke from the regular blocks overlap the doomed blocks. Is this normal, can it be avoided?

Any help much appreciated!

Edit:

Solved after changing from P3D to P2D renderer!

1. Make a row of 20 squares. Make their fill colour gradually change from white to black, slowly over time.

2. Now make them go back to white, slowly over time.

3. Now make it look as though the change occurs as a "wave" of white moving through the row of boxes, from left to right (and then wraps). (If this sounds weird, don't worry, I'll explain at the board.)

4. CHALLENGE: Now, instead of a single row, make it a 20x20 grid of squares! The "ripple" propagates through the grid, one row at a time: left to right in row 1, then right to left in row 2, etc. This is called "serpentining", for reasons which may or may not be obvious :)

I was trying to process a PImage to change particular pixels to become transparent but I could not get it to work. For example this would only turn the pixels to black:

img.loadPixels();
for (int x = 0; x < img.width; x++) {
    for (int y = 0; y < img.height; ++y) {
        if (x < y)
            img.set(x, y, color(0, 0));
    }
}
img.updatePixels();

So I tried in a simpler sketch and realized that the 3 rectangles in this sample would have different fill, one transparent, one almost transparent and one black (not expected with alpha to 0):

size(500, 200);
fill(0, 0);
rect(100, 50, 100, 100);
fill(color(0, 1));
rect(200, 50, 100, 100);
fill(color(0, 0));
rect(300, 50, 100, 100);

Can someone explain why does the pixels turn black instead of being transparent?

Thanks!

void setup() {
  size(400, 400);
  colorMode(RGB,255,255,255,255);
  background(color(51, 85, 204));
  noStroke();  
}

void draw() {
  fill(color(255), 1);
  rect(0,0,width/2, height);
  fill(color(255), 100);
  rect((width/2) - 10, (height/2) - 10, 20, 20); 
}

My expectation is that the alpha value on the left rect would result in a transparent rectangle that gradually fades to white, but it seems to stop at an off-white. Increasing the alpha gets it closer to white, but any low value (below 35 or so) seems to result in an imperfect fading effect.

Is this just a result of the color values being integers rather than floats, or is there something else going on? And is there any way to fix this, other than just increasing the alpha?