thanks.

void setup() {

  size(300, 300);
  background(255);
  array();
}

void array() {

  int[][] arrayinit = {
    { 10, 5, 3, 55, 90 }, 
    {  9, 4, 2, 32, 22 }, 
    {  3, 8, 5, 79, 22 }, 
    {  3, 8, 45, 4, 2 }, 
    {  3, 22, 5, 44, 4 }
  };

  int rows = 5;
  int cols = 5;

  int[] sum = new int[cols];
  int[] sum2 = new int[rows];
  stroke(0);
  for (int c=0; c<cols; c++) { // for every column
    for (int r=0; r<rows; r++) { // for every row
      rect(40*r, 30*c, 40, 30);
      text(arrayinit[c][r], 40*r, 30*c); //dont know if this is right
      sum[c] += arrayinit[r][c]; // sum up the values per column
      sum2[r] += arrayinit[r][c];
    }
  }

  println(sum[0]); 
  println(sum[1]); 
  println(sum[2]); 
  println(sum2[2]);
  println(arrayinit[2][2]);
}

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

void draw() {
  if (mousePressed == true) {
    if (mouseButton == LEFT) {
      fill(0); // Black
    } else if (mouseButton == RIGHT) {
      fill(255); // White
   }
 } else {
   fill(126); // Gray
 }
 rect(25, 25, 50, 50);
}

I'm trying to draw text inside of a PGraphics, but it looks ugly. Code:

PGraphics g;

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

  g = createGraphics(width, height);

  g.beginDraw();
  g.fill(255);
  g.text("In PGraphics", 4, 48);
  g.endDraw();
}

void draw() {
  background(32);

  fill(255);
  text("In Draw", 4, 24);

  image(g, 0, 0);
}

Here's a screenshot:

What's going wrong with this? I tried adding a background(0) call to the PGraphics, but it didn't help, because the background needs to be transparent. I am going to draw color in my final sketch, so I can't really use blending modes.

EDIT: Just providing more details: I need to use JAVA2D, because my sketch uses clip(), and P2D breaks clip() with transform().

In the middle of the arc (outside the Circle) there should be the Label.

for (Rohtipps g : myRohtipp) {

    //PVector c = randomVector(mapped);
    //draw ellipse
    PVector loc = g.getLocation();
    float dia = g.getDiameter();
    //noFill();

    float[] data={g.getColdlead(), g.getWarmlead(), g.getHotlead()};

    //float[] data={50.0, 50.0, 50.0, 50.0};
    float sumdata=0;
    for (int i=0; i<data.length; i++) {
      sumdata+=data[i];
    }
    //println(sumdata);
    sumdata = 360/sumdata;

    for (int i=0; i<data.length; i++) {
      data[i] = sumdata*data[i];
    }
    float lastAngle=0;

    for (int i=0; i<data.length; i++) {
       float col=map(i, 0, data.length, 20, 255);
       fill(55, 150, col, col+100);
       noStroke();
       arc(loc.x, loc.y, dia, dia, lastAngle, lastAngle+radians(data[i]));
       lastAngle +=radians(data[i]);

    }

    //println(g.getKampagne()+" "+g.getColdlead()+" "+g.getWarmlead()+" "+g.getHotlead());
    //pieChart(dia, loc.x, loc.y, data);
    //ellipse(loc.x, loc.y, dia, dia);
    fill(40, 40, 40);
    //label positionieren
    textSize(11);


    float tw=(textWidth(g.getKampagne()))/2;
    text(g.getKampagne(), loc.x-tw, loc.y+30);

    //println(g.getAnzahl());
    ts=ts-2;
    textSize(ts);
    fill(30, 30, 30);
    text(g.getKampagne()+" "+g.getAnzahl(), 1400, g.getPositionText());
    textSize(24);
    //println(g.getColdlead());
  }

Thanks Theresa

I'm trying to draw special characters / symbols with the text() function such as:

'■', '□', '▢', '▲', '△', '▼', '▽', '◆', '○', '●', 'Δ', 'ʊ', '™', '©', '®', '¿', '¡', '½', '⅓', '⅔', '¼', '¾', '⅛', '⅜', '⅝', '⅞', '℅', '№', '∃', '∩', '∀','Ξ', 'Γ', 'ɐ', 'ə', 'ɘ', 'ε', 'β', 'ɟ', 'ɥ', 'ɯ', 'ɔ', 'и', 'ɹ', 'ʁ', 'я', 'ʌ', 'ʍ', 'λ', 'ч', '∞', 'Σ', 'Π', 'η', 'α','·','¨','…', '¦', '┅', '┆', '┈', '┊',' ╱',' ╲', '╳', '¯', '–', '—','≡', '░', '▒', '▓', '█', '▌', '▐', '▀', '▄', '╭', '╮', '╯', '╰','│', '┤', '╡', '╢', '╖', '╕', '╣', '║', '╝', '╜',' ╛', '┐', '└', '┴', '┬', '├', '─', '┼', '╞', '╟', '╚', '╔', '╩', '╦', '╠', '═', '╬', '╧', '╨', '╤', '╥', '╙', '╘', '╒', '╓', '╫', '╪', '┘', '┌', 'Σ', '♠', 'Ω', '♣', '♥', '♦', '☼', '☻'...

However most of them (90%) don't seem to be recognized. All I have instead is the letter 'â' printed on the screen.

Is there a way to draw all these symbols ?

Thanks

Is there a way to have an array's indexes and items be drawn as text? I couldn't find anything specific on this and I'm a beginner to intermediate coder.

I've tried something like the following in the draw function: text("myArray indexes and items:" + myArray_name, 25, 25);

But the text that is drawn isn't anything I can understand. It seems like it's a hexadecimal number and not the familiar [0] item0 , [1] item1, [2] item2, [n] itemn format.

Do I need to do some sort of conversion where the array is transformed in to a String before it goes into the text()?

Thanks for the help!

text function not working(working but very bed and strange)..so what I mean...

here simple code:

void setup() {
  size(200, 200);
  background(0);
}
void draw() {
  text("It's Working",70,100);
}

problem is time, for this code to run its need about 2 minute and processor killing himself...after that finally text appears.. I do not know its Bug or something like that but on my machine its not working well, if someone knows wha tis this and how to solve it please tell me

// Intel Quad Core 2.5Ghz, Windows 8
// Processing 2.1.1

here is test on "hallo precessing" page and its working quick and good and second image is my machine and this is what is looks like before draw text

I have this problem only on text(); at this time....

Often in the forum we have similar questions:
"Why is the text so blocky?"
"Why these lines are not anti-aliased?"
"Why is this circle almost squarish?"

And when asked, the user shows code looking like:

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

void draw()
{
  stroke(#000055);
  fill(#000055);

  ellipse(width / 2, height / 2, width / 10, height / 10);

  textSize(50);
  text("Blocky\nText", 100, 2 * height / 3);
  textSize(10);
  text("Other\nText", 20, height / 3);

  line(100, 50, 300, 150);
  line(150, 150, 350, 100);
}

If you are an experienced user, you immediately spot the problem, and advise to move the call to background() at the start of draw();

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

void draw()
{
  background(255);
  stroke(#000055);
  fill(#000055);

  ellipse(width / 2, height / 2, width / 10, height / 10);

  textSize(50);
  text("Blocky\nText", 100, 2 * height / 3);
  textSize(10);
  text("Other\nText", 20, height / 3);

  line(100, 50, 300, 150);
  line(150, 150, 350, 100);
}

In versions before 2.0, adding a call to smooth() helped, but it is the default now.

Why does it makes a difference?

Processing does its drawings in anti-aliased mode: the borders are smoothed by drawing semi-transparent, toned down pixels on the borders, making a nicer transition with the background. draw() is called 60 times per second (by default). It doesn't erase the background if not asked explicitly. So it draws over and over the graphics at the same place. The semi-transparent pixels cumulate on the borders, so they progressively become completely opaque. Hence the blocky look with steps.

Nearly all the Processing sketches (except some special effects playing on the accumulation of graphics) start draw() with a call to background(). There can be exceptions, but they are the done by people understanding deeply how Processing works.

I've fiddled around with the HTML on the webpage I'm using, and forcing the canvas to be a different size does change it proportionally to the change, but not to the actual correct size. I made sure to reset my zoom in Firefox, so that's not it. The same thing happens in Chrome, too.

Here, have a picture of a processing program displayed over that same program in a web browser.

What causes this??? I'm not even 100% sure this is a problem with processing or processing.js, but I'm completely stumped. Is there a setting I've messed with in both Firefox and Chrome, somehow? Do web browsers just measure pixels differently from everything else on my computer? Is there some trick to the HTML5 canvas element I need to know? Whenever I try to Google this problem I get answers about How To Resize A Program, which I don't need.

(before anyone asks to see the source code, bear in mind it's some 3000 lines of code across 12 .pde files, with a 1.6MB data folder...)

example_list= [1,2,3, 4, 5]

for elements in example_list:
    text (elements , 50, 50)

I should note, that I tried to create a variable for y, that took in the number of items, but that didn't quite work

In my case, I want to display a string from a large set of strings onto the screen. They vary is length from two or three words to dozens.

I see in the reference that Text() will not display the text if it gets too large--is there deeper documentation for Text()--perhaps it sends an error code of some sort when it does this which I can then utilize by starting with very large font sizes (that will fail) and iteratively getting smaller until it does fit? Or some other way?

I'm guessing this question has been asked before but I couldn't find anything via search.

My head just hurts. If you do this it doesn't work right it just stuck until all letters are displayed and if you remove "while" it still doesn't work also x=1; is done so to test if in second draw re-run it works. You can actually fix this if you like moving entire app to side cuz when mouse holding app touches side of screen app works for that moment and it can't be still.

I then switched to FX2D renderer, on a hunch, and it finally displayed my characters. This would be fine, except FX2D makes some other text that I have in a separate PGraphics look fuzzy. Notice how odd this is, the PGraphics object shouldn't be affected by the sketch renderer, it should just create an image equal to one rendered on default mode (I don't even have the option to render that PGraphics object with FX2D, it doesn't work yet, it's been an open issue since last year)

Is there something I'm missing or am I just going to have to tweak until either of these issues are solved in the core?

data in the text file

Ahoj

Hello

Zbohom

Goodbye

Ako sa máš

How are you

Ako sa voláš

What is your name

having started with Processing recently I have the following confusion I have been struggling to explain to myself:

Assuming, that the coordinate reference point of (x, y) in text("text", x, y) is the bottom left corner of the "textbox", I thought that if the textSize exceeds the y-coordinate the text would be cropped on top, for example:

textSize(55);

text("Hello world", 50, 50);

For my understanding "Hello world" would have to be cropped on the top of the sketch-window as 50<55. But - it is not. For text("Hello world", 50, 40);it touches the top boundary of the sketch-window.

Would anyone possibly mind to correct my misconception about the use of text() and textSize()?

Thank you so much in advance.

just showing the code on 1 of the two files (from Daniel Shiffman), as it is in the correct place (afaik)...

text('hi', 0,0,0); // this will have each 3-D box have 'hi' in the center. I don't know what to replace 'hi' with in order to display the element position of the ArrayList. The text function wants an int value in this position. Conflating this, the code is using push/pop which I am not too familiar with.

class Box {
 PVector pos;
 float r;

 Box(float x, float y, float z, float r_) {
   pos = new PVector(x, y, z);
   r = r_;
 }

 ArrayList<Box> generate() {
  ArrayList<Box> boxes = new ArrayList<Box>();
  for (int x = -1; x < 2; x++) {
    for (int y = -1; y < 2; y++) {
      for (int z = -1; z < 2; z++) {
        float newR = r/3;

        Box b = new Box(pos.x + x*newR,
                        pos.y + y*newR,
                        pos.z + z*newR,
                                  newR);
        int sum = abs(x) + abs(y) + abs(z);
          if (sum > 1) {
            boxes.add(b);
          }
      }
    }
  }
  return boxes;
 }

 void show() {
  pushMatrix();
  translate(pos.x, pos.y, pos.z);
  text(sponge.Box, 0,0,0); // this is where I need help. sponge.Box is incorrect
  noStroke();
  fill(255, 100);
  box(r);
  popMatrix();
 }
}

Thank you

Thanks

i'm new here, but i cannot find the answer about my question.

I've writen a program with some text-entries. The coordinates of the text are calculated by a for-loop

for (i=0;i<14;i++){
   StrStart=tijdStart[i].substring(0,IntstrTemp);  
     IntstrTemp=tijdStop[i].indexOf(":");
     StrStop=tijdStop[i].substring(0,IntstrTemp);
     text(StrStart+" t/m "+StrStop+" u",(i*85)+10,215+yTranspose);
     WeatherPicture = loadImage("http://" + "openweathermap.org/img/w/" + code[i] + ".png");
     image(WeatherPicture,(i*85)+10,210+yTranspose,60,60);
     text("vocht: "+vochtigheid[i]+"%",(i*85)+10,270+yTranspose);

etc

The first time the program runs, everything is at the right place, but after a minute, the program gets an update from openweathermap.org and prints the info again.

The info is now placed to the left.. Everything is out of order...

1st picture is the right alignment, second picture is after 1 minute....

I hope you can give me some answer what to do.

Thanx

Here is my code so far... thanks so much

var img;
var antonyms = ["tickle", "angry", "raging", "fierce", "sad", "cross", "bitter","sulky"]



function preload(){
  img= loadImage ("tickle.jpeg");
  Indie= loadFont ("IndieFlower.ttf");
}


function setup() { 
  createCanvas(400, 400);
  noLoop();
  textFont (Indie, 48); 



}
function draw() { 
  background(255,255,255);
  image(img, 0,0,200,200);


var rnd_antonyms = random (antonyms);

text ("here", 220,100);
text ("comes", 200, 150);
text ("the", 230, 200);
text (rnd_antonyms, 220, 250);
text ("monster", 200, 300);



}
function keyPressed(){
  draw();
}

void setup() {

  size(1500, 600);
  background(0);

  for (int i = 0; i <= 99; i ++) {
    textSize(9);
    text(i, i * 14.9 + 10, 100);

    if (i < 99) {
      text(",", i * 14.95 + 18.5, 100);
    }
  }
  for (int j = 0; j <= 9; j ++) {
    text("0", j * 15 + 5, 100);
  }
}

In my program I want to use different blend modes when drawing text, but the text is not affected by the blendMode() function call.

Here's a simple program that demonstrates the issue, just move the mouse over the rectangle and see how the ellipse is correctly blended, as opposed to the letter 'K'.

void setup(){
    size(600, 600, P2D);

    rectMode(CENTER);
    textSize(100);
    textAlign(CENTER, CENTER);
}

void draw(){
    blendMode(NORMAL);
    background(50);

    noStroke();
    fill(255);
    rect(300, 300, 100, 100);

    blendMode(EXCLUSION);
    text("K", mouseX+50, mouseY);
    ellipse(mouseX-50, mouseY, 75, 75);
}

    var angle;


    var Polygon= function(x, y, hi, wei) {
        this.x = x;
        this.y = y;
        this.height = hi;
        this.width = wei;
    }
      Polygon.prototype.display = function() {
          push();
          translate(this.x, this.y);

          rect(0, 0,this.height, this.width);
          pop();
      }

      Polygon.prototype.area = function () {
        return this.calcArea();
      }

      Polygon.prototype.calcArea = function () {
        return this.height * this.width;
      }

    function Protogon(x, y, hi, wei, word) {
      Polygon.call(this, x, y, hi, wei);
      this.word = word;

    };

    Protogon.prototype= Object.create(Polygon.prototype); 
    Protogon.prototype.constructor = Protogon;
    Protogon.prototype.display = function() {
          push();
          translate(this.x, this.y);
          rotate(angle);
          rect(50, 0,this.height, this.width);
          text(this.word, 50, -10);
          pop();
    }

    function setup() {
      createCanvas(720, 400);
      angle = 1.0;
      square = new Polygon(width/2, height/2, 20, 40);
      zz = new Protogon(square.x+20, square.y+20, 60, 40, "Hello");
    }

    function draw() {
      background(50, 89, 100);
      stroke(1);
      fill('red'); 
      square.display();
      fill('green');
      zz.display();
      angle+=0.01 ;
    }

var scores;


function preload() {

scores = loadJSON("stats.json");

}

function setup() {

createCanvas(1400, 700);



}

function draw() {

background(254);

var txtX = 0;

var txtY = 550;

var stats = scores.results;

for (var i = 0; i < stats.length; i++) {

textSize(12);

text(stats[i], txtX, txtY);

var wordWidth = textWidth(stats[i]);

var currentOffset = 15;

var currentwordX = wordWidth + currentOffset;   

txtX = txtX + currentwordX;


}                                                                

txtX = txtX - 1;

print(txtX);


}

//Here is my JSON

{ "description" : "FA Cup results; 7th January 2017.", "source" : "http://www.bbc.co.uk/sport/football/results", "results":[ "Manchester United 4-0 Reading", "Accrington Stanley 2-1 Luton Town", "Barrow 0-2 Rochdale", "Birmingham City 1-1 Newcastle United", "Blackpool 0-0 Barnsley", "Bolton Wanderers 0-0 Crystal Palace", "Brentford 5-1 Eastleigh", "Brighton & Hove Albion 2-0 Milton Keynes Dons", "Bristol City 0-0 Fleetwood Town", "Everton 1-2 Leicester City", "Huddersfiled Town 4-0 Port Vale", "Hull City 2-0 Swansea City", "Ipswich Town 2-2 Lincoln City", "Millwall 3-0 Bournemouth", "Norwich City 2-2 Southampton", "Queens Park Rangers 1-2 Blackburn Rovers", "Rotherham United 2-3 Oxford United", "Stoke City 0-2 Wolverhampton Wanderers", "Sunderland 0-0 Burnley", "Sutton United 0-0 AFC Wimbledon", "Watford 2-0 Burton Albion", "West Bromwich Albion 1-2 Derby County", "Wigan Athletic 2-0 Nottingham Forest", "Wycombe Wanderers 2-1 Stourbridge", "Preston North End 1-2 Arsenal" ] }

For example take:

void setup(){ size(800,800); } void draw(){ stroke(360); strokeWeight(1); fill(0); textSize(30); text("test",200,200); }

won't return an outlined text. How can I achieve that? Thanks in advance for hints or answers.

pixelDensity(1);

pixelDensity(2);

on MacBook Pro

Am I using text in a wrong way?