java.lang.RuntimeException: java.lang.OutOfMemoryError: Java heap space at processing.opengl.PSurfaceJOGL$2.run(PSurfaceJOGL.java:484) at java.lang.Thread.run(Thread.java:745) Caused by: java.lang.OutOfMemoryError: Java heap space at java.awt.image.DataBufferInt.(DataBufferInt.java:75) at java.awt.image.Raster.createPackedRaster(Raster.java:467) at java.awt.image.DirectColorModel.createCompatibleWritableRaster(DirectColorModel.java:1032) at java.awt.image.BufferedImage.(BufferedImage.java:324) at processing.core.PFont.(PFont.java:232) at processing.core.PFont.(PFont.java:337) at processing.core.PGraphics.createFont(PGraphics.java:4078) at processing.core.PApplet.createFont(PApplet.java:6254) at processing.core.PApplet.createDefaultFont(PApplet.java:6188) at processing.core.PGraphics.defaultFontOrDeath(PGraphics.java:8219) at processing.core.PGraphics.textSize(PGraphics.java:4391) at processing.core.PApplet.textSize(PApplet.java:12688) at recaman.draw(recaman.java:150) at processing.core.PApplet.handleDraw(PApplet.java:2418) at processing.opengl.PSurfaceJOGL$DrawListener.display(PSurfaceJOGL.java:907) at jogamp.opengl.GLDrawableHelper.displayImpl(GLDrawableHelper.java:692) at jogamp.opengl.GLDrawableHelper.display(GLDrawableHelper.java:674) at jogamp.opengl.GLAutoDrawableBase$2.run(GLAutoDrawableBase.java:443) at jogamp.opengl.GLDrawableHelper.invokeGLImpl(GLDrawableHelper.java:1293) at jogamp.opengl.GLDrawableHelper.invokeGL(GLDrawableHelper.java:1147) at com.jogamp.newt.opengl.GLWindow.display(GLWindow.java:759) at com.jogamp.opengl.util.AWTAnimatorImpl.display(AWTAnimatorImpl.java:81) at com.jogamp.opengl.util.AnimatorBase.display(AnimatorBase.java:452) at com.jogamp.opengl.util.FPSAnimator$MainTask.run(FPSAnimator.java:178) at java.util.TimerThread.mainLoop(Timer.java:555) at java.util.TimerThread.run(Timer.java:505)

Any help would be appreciated.

function setup(){ createCanvas(windowWidth,windowHeight); logo = loadImage("logo.png"); }

function draw(){ background(0); imageMode(CENTER); image(logo, windowWidth / 2, windowHeight / 3, 100, 100); imageMode(CORNER); textSize(30); textAlign(CENTER, CENTER); rectMode(CENTER); text('This is a string of text! This is a string of text!',windowWidth / 2, windowHeight / 2 , windowWidth, windowHeight); }

This is what it looks on a laptop screen:

And this is what look on a responsive screen:

I want to make the text and the image as big and legible than it is on responsive mode. I know that I have to change the lines

textSize(30); and image(logo, windowWidth / 2, windowHeight / 3, 100, 100);

but i don't know how. Any tips?

Here is an example of circles and text drawn to a PGraphics buffer (top), and just regular circles/text on the side. Why is there such a huge difference in quality/appearance? There is no difference in code between the two asides from appending canvas.

    for (int x = 1; x < width/M; x ++) {
      if (line) {
        canvas.line(x*M, 0, x*M, canvasHeight);
      }
      canvas.textSize(10);
      canvas.textAlign(CENTER, CENTER);
      canvas.text(x + "m", x*M, 25*cm); 
      canvas.ellipse(x*M, 50*cm, 20*cm, 20*cm);
    }

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 just work on sketch to display simple Text on a single screen. The Text is loaded from a String and displayed word by word. Now comes my problem: It would be great if each Word would scale to the screen size. Means either the word length or height fits the screen width / height.

Does anybody know how to do that?

Thanks

PFont font; 
import processing.video.*;
Movie myVid;
String letter = "X";
float x;
float y;
float interval  = 1200;
float currentTime;
int offset = 100;

void setup() {
  size(540, 540);
  background(254);
  myVid = new Movie(this, "seaClip_001.mp4");
  myVid.loop();
  //frameRate(0.5);
}

void draw() {
  image(myVid, 0, 0-offset, 540, 540);
  drawFrame();
  drawX();
}

void drawFrame() {
  shapeMode(CENTER);
  fill(1);
  rect(width/2, 0, 10, height);
  shapeMode(LEFT);
  rect(0, 390, width, 10);
  //fill(color'ffa7e8');
  fill(255, 167, 232);
  rect(0, 400, width, 140);
}

void drawX() {
  fill(0);
  font = createFont("Arial", 1);
  textFont(font);
   x = random(width);
   y = random(height);
  if (currentTime > 1000)
    textSize(random(120, 500));
  text(letter, x, y);
  currentTime = millis() % interval; //
}

void movieEvent(Movie m) {
  m.read();
}

I have a dictionary, that has values such as this {'birthday': 6, 'think': 5, 'cookie': 15, 'happy': 5, 'ice': 5, 'cream': 5, 'nom': 25, 'boy': 6}

Since I'm making a wordCloud, certain words have to be bigger than the other, and I was going to take the value and times it by three so it would be something like this

pop_words = {'birthday': 18, 'think': 15, 'cookie': 45, 'happy': 15, 'ice': 15, 'cream': 15, 'nom': 75, 'boy': 18}

I wanted to use those numbers as the textSize but I don't quite know how to do that.

I thought about putting it in a for loop but that doesn't seem to work for me, and I'm personally stuck

#Text data 
for value in pop_words:
    text_data = pop_words [value] *3
    textSize (text_data)
    text ("\n". join (pop_words), 250, 50+text_data)



#Display on canvas

size (500, 500)
background (0)
fill (255)
textAlign (CENTER)

Main Tab //Gwendolyn Leister - Pong Game

GamePiece Paddle;
GamePiece Ball;

boolean gameStart = false;
boolean restart = false;
boolean endgame = false;
//Declare Fonts
PFont myFont;
PFont myFont2;

//for Ball 
int rad = 15;
float xPos=width/2;
float yPos=height/2;
float Speed = 3;

int xDirection = 1;
int yDirection = 1;
int SPD = 5;

int score = 0;


final GamePiece ball = new Ball();

final GamePiece paddle = new Paddle();

void setup () {
  size(800, 800);
  smooth();
  background(0);
  myFont = loadFont("AnonymousPro-30.vlw");
  myFont2 = loadFont("AnonymousPro-80.vlw");
  Ball = new Ball();
}

void draw() {
  //table


  background (0);

  //Layout
  fill(#CBFEFF);
  noStroke();
  rect(0, 640, 800, 260);
  stroke(255);
  fill(#CBFEFF);
  strokeWeight(10);
  line(0, 640, 800, 640);
  fill(#EAFFFF);
  rect(200, 700, 400, 160);
  //text

  //score text
  textFont(myFont);
  textAlign(RIGHT);
  textSize(20);
  text("Score:", 70, 25);

  Ball.display();
  //Paddle.display();

  if (gameStart) {
    Ball.move();
    Ball.bounce();
    //Paddle.move();
  } else {
    textAlign(CENTER);
    textFont(myFont2);
    textSize(80);
    text("P O N G", 400, 100);
    textSize(20);
    text("press enter to start", 400, 600);
    text("move mouse horizontally to control the", 400, 140);
    text("paddle and to bounce the ball off of", 400, 162);
  }
  //if (keyPressed) {
  //  restart = !restart;
  //}
}

//if (Ball.checkScore) {
//  score = score+1;
//  textSize(20);
//  textAlign(LEFT);
//  text("

void checkScore() {
  if (yPos>700) {
    score=score+1;
  } else if (yPos>750) {
    score=score-1;
  }
}

void keyPressed() {
  if (keyCode == ENTER){
    gameStart = !gameStart;
  }
  else{

  }
}

Paddle SubClass class Paddle extends GamePiece {

  boolean mouseMoved;
  boolean overPaddle = false;
  boolean locked = false;
  float xOffset = 0.0;
  float yOffset = 0.0;
  int px;
  int py;
  int pw=100;
  int ph=30;
  int pSpeed= 5;


  //float xPos = mouseX;
  //float yPos = 680;
  //int x;
  //int y;
  //int w=20;
  //int h=80;
  //Paddle (int tx,int ty) {
  //  x=tx;
  //  y=ty;
  //}



  Paddle () {
    super();
  }

  void display() {
    rectMode(CENTER);
    fill(#CBFEFF);
    stroke(255);
    strokeWeight(10);
    //rect(this.xPos, this.yPos, 50, 20);
  }
  //void mouseMove() {
  //  if (x==1) {
  //    py = py +- pSpeed;
  //  } else if (x == 0);
  //}
  void move () {

    if (mouseX > px-(pw*ph) && mouseX < px+(pw*ph) && 
      mouseY > py-(pw*ph) && mouseY<py+(pw*ph)) {
      overPaddle=true;
      if (!locked) {
        stroke(255);
        fill(255);
      } else {
        fill(#CBFEFF);
        stroke(255);
        strokeWeight(10);
      }
      rect(px, py, pw, ph);
    }
  }
  void mousePressed() {
    if (overPaddle) {
      locked = true;
      fill (#CBFEFF);
    } else {
      locked = false;
    }
    xOffset =mouseX-px;
  }
  void bounce() {
  }
}

and GamePiece Superclass

abstract class GamePiece {
  float x, y, w, h, vx, vy, dx, dy;
  abstract void move(); 
  abstract void display();
  abstract void bounce();
}

As you can see, if you uncomment the 2 lines Game.js:54 et Game.js:55, and then run the prog in the browser (press enter to pass the first screen), even if the textSize is 12, it seem that the text is displayed with a size of 50, and i can't find why ........

I'm self taught, and this was a project made to learn and practice with DOM elts and it's totally a WiP, so it is probably a terrible mess, sorry for that ^^

Thanks in advance :) Ali

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.

ten years ago i wrote an applet using P5 1.5.1 it runned perfectly and now it runs perfectly with Safari && osx but (since march 2017) does not run anymore with firefox >52 which does not allowany NPAPI plug in : java

So i decided to re- write it using processing.js it runs, yes; but awfully slow...

Therefore i decided to try with P5JS (first time i use it)

For my project i have to use 3D so: WEBGL

in this project i manage 1000 texts (GPU, offscreen); these texts are sentences, rather long, loaded from an external file (i put the file at the end of this post)

i have used for that the "solution" given by P5JS: createGraphics, create plane, use your graphics as texture...

result???

-- it is more quick (fps) than P5JS

but:

--a) i cannot see anyway to get the textAscent text Descent from my text and have to (vertical) center it approximatively

-- b) textWidth(myText) seems to work if i dont use loadFont()

--c) textWidth(my text) returns false values if i change the textSize(); returns exact values when using textSize(12)

--d) i have a class with my textObjects but if i want to "render" from my class i get strange results; so i have put the "rendering" in draw and it works. Why that ?

--e) setting the alpha value for background in the graphics works in a weird way: works at the beginning then not. Can texture accept alpha value?

below the code (of course you have to add some text for loadStrings()); mine is at the end of this post

                var font;
                var pg;
                var tableauTexte;
                var textesCharges;
                var tailleRass;
                var angle = 0;
                var nbre = 1;


                function preload(){
                  font = loadFont("Arial Unicode.ttf");
                  tableauTexte = new Array();
                  tableauTexte = loadStrings("rassuronsnous.txt");// that is the name for the file you can find at the end of the post

                }

                function setup() {

                   textesCharges = new Array();
                   textSize(24);
                 tailleRass = textWidth("RASSURONS_NOUS");

                 for(var i = 0; i<800; i++){// CREATING TEXToBJECTS && putting them in an array

                   var tx = random(tableauTexte);
                   var tw= null;
                   var ppgtext= null;
                   var to = null;
                   //textFont(font);does not work ; returns NaN for textWidth()
                   textSize(12);
                    tW = textWidth(tx);// returns a value but it is not exact (too big) if textSize is set to 14
                   ppgtext = createGraphics(tW,25);
                   ppgtext.background(0);
                   ppgtext.fill(255);
                   ppgtext.text(tx,0,(ppgtext.height/2)+2);
                   to = new TextObjects(random(-500,500), random(-350,350),random(-10,10), tx, random(-10,10),tW, ppgtext);
                   textesCharges.push(to);

                 }
                 createCanvas(1024,768,WEBGL);
                 background(0);
                 pg = createGraphics(tailleRass,30);

                 };


                function draw() {

                  background(0);

                 for(var i = 0; i<textesCharges.length; i++){
                   var t = textesCharges[i];
                  t.update();
                   //t.render();//does not work or in a weird way

                 }


                 for(var j= 0; j< nbre; j++){

                 push();

                 var X = textesCharges[j].renvoieX();
                 var Y = textesCharges[j].renvoieY();
                 var Z = textesCharges[j].renvoieZ();

                    translate(X,Y,Z);
                    var theta = textesCharges[j].renvoieAngle();
                    rotateZ(theta);
                    var textur = textesCharges[j].renvoie();
                    var tW = textesCharges[j].renvoieTW();
                    texture(textur);
                    plane(tW,30,1);

                    pop();

                 }


                  pg.background(0,0,0,10);// PARAM 4 WORKS IN A STRANGE WAY; useless
                  pg.noStroke();
                  pg.fill(255,0,0);
                  pg.textSize(24);
                  pg.text("RASSURONS_NOUS", 0,(pg.height/2)+6);// NO WAY TO CODE EXACTLY THE HEIGHT POS (textAscent() textDescent())

                    push();

                  translate(0,0,20);
                  texture(pg);
                  noFill();
                  plane(tailleRass,30,1);
                  pop();

                  if(nbre< textesCharges.length){
                    nbre++;
                  }
                  };

                  //////////////////////////////////////////////////TEXT OBJECTS CLASS


                function TextObjects(xx, yy, zz, ttxt, Aangle,tw,graphics){



                  this.posX = xx;
                  this.posY = yy;
                  this.posZ = zz;

                  this.position = createVector([this.posX],[this.posY],[this.posZ]);
                  this.txt = ttxt;
                  this.angle = Aangle;
                  this.textW = tw;
                  this.pgtext = graphics;


                }


                TextObjects.prototype.update = function () {//updating the angle rotation Z

                    this.angle = this.angle+0.0005;

                }

                TextObjects.prototype.renvoie = function () { //getter for graphics

                    return this.pgtext;
                    //console.log("je cree update" + this.angle);

                }

                TextObjects.prototype.renvoieTW = function () {//getter for textWidth()

                    return this.textW;


                }

                TextObjects.prototype.renvoieAngle = function () { //getter for angle
                  this.angle = this.angle+0.005;
                    return this.angle;


                }

                TextObjects.prototype.renvoieX = function () { //getter for xpos

                    return this.position.x;
                    //console.log("je cree update" + this.angle);

                }

                TextObjects.prototype.renvoieY = function () { //getter for ypos

                    return this.position.y;

                }

                TextObjects.prototype.renvoieZ = function () { //getter for zPos (those 3 can be made 1 with PVector)

                    return this.position.z;

                }

                TextObjects.prototype.render = function () {//does not work

                    push();



                    translate(this.position.x, this.position.y, this.position.z);
                    rotateZ(this.angle);

                     this.pgtext.textSize(12);
                  this.pgtext.background(0,0,0);
                  this.pgtext.noStroke();
                  this.pgtext.fill(255,255,255);
                  this.pgtext.text(this.txt, this.pgtext.width/20, (this.pgtext.height/2)+2);

                  texture(this.pgtext);
                  plane(this.tW,30,1);




                    pop();
                }

the text file:

une panne mondiale de l’électricité un ouragan monstrueux qui ravage les ¾ de la planète une cyber attaque généralisée contre les grandes places boursières le naufrage d’un supertanker sur les côtes de la Manche l’arrivée d’une soucoupe volante en provenance d’Orion l’explosion simultanée d’une douzaine de volcans en islande la paralysie de tout le transport aérien un tremblement de terre de force 12 sur l’échelle de Richter dont l’épicentre se situerait en basse normandie l’explosion d’une centrale nucléaire de modèle français EPR la fonte des glaces dans l’antartique la pénurie des ressources en pétrole et en gaz l’élection d’un nouvel Hitler à la tête des USA la brusque élévation du niveau des mers et des océans et la disparition du continent Australien l’écrasement sur New York d’une comète ou d’un astéroide de plusieurs millions de tonnes le Krash du système bancaire international l’apparition d’une forme mutante de la peste bubonique faisant 3 milliards de victimes la reconstruction du mur de Berlin et la restauration du système communiste dans l’Europe de l’Est l’élection de Ségolène royal à la présidence française la liquidation du nouveau numero 1 d’Al Qaida par un essaim de libellules drones la réhabilitation de Bernard Tapie le grand retour de DSK le givrage des sondes pitots l’invention d’un programme qui calcule tout il y a des choses qui n’arrivent jamais

I'm just wondering how do you successfully and smoothly increase/decrease the scale of text/type by the positioning of mouse Y?

Basically, when the mouse is at the top of the window I want the text to be small, and when it's at the bottom I want it to be big, and while transitioning from big to small, it is smooth as if it is growing. I hope this makes sense.

At the moment the text jumps from small to big instantly.

As you can tell I'm a beginner, and this may be a very simple command, but regards to coding so far I have:

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

}

void draw() { float x = mouseX; float y = mouseY;
background(0);

if(mouseY>500)

textSize(100);

if(mouseY<500)

textSize (20);

text("john", x, height/2, y, height/2);

}

Thanks in advance!

OMG I am so close to making a wonderful thing! BUUT::::

For some random reason (and I cannot see why) the textWidth() is always the wrong number on start up. It should be the width of "book", but it is different number and I cannot find where this different number comes from. When you click "more" for each subsequent request it is the right width. WHY oh WHY oh WHY? (any help or magic much appreciated)

the code is below and the images can be downloaded from here: https://www.dropbox.com/sh/vqi2mr7ri7j4p62/AADWxWIh2-ZegTFc0zSd0j2Ra?dl=0

Becca :)

//inspired automated sketches of by james paterson http://presstube.com/blog/category/james-paterson/ i wanted to experiment with 
//used some of my drawings +images and see what occurred
//becca rose 2016
// this kind of evolved into a random book cover generator


var img = [];

var imgW;
var aspect;
var imgH;
var randISBN1;
var randISBN2;
var imageSnapButton
var book;
var bookStart;
var textW = 0;

function preload() {
  // load images
  for (var i = 0; i < 35; i++) {
    img[i] = loadImage(i + ".png");
    println(i);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  noLoop();
  imageMode(CENTER);
  noStroke();


  // create button
  imageSnapButton = createButton('- M O R E -');
  imageSnapButton.position(40, 20);
  imageSnapButton.mousePressed(imageSnap);

}

function draw() {
  imageSnap();
}

/////////////////////////
//find the JSON data page
function newBook() {
  randISBN1 = ~~random(256);
  randISBN2 = ~~random(256);
  loadJSON('http://" + "openlibrary.org/api/get?key=/b/OL1' + randISBN1 + randISBN2 + 'M', gotData);
  println("textW =  " + textW);
}

///////////////////////
//make the image titles
function gotData(data) {
  book = data.result.title;
  textW = textWidth(book);
  println("book = " + book);
  println("textW =  " + textW);

    fill(20, 255, 70, 125)
    rect(38, 80 - 32, textW + 2, 39);
    fill(0);
    textSize(35);
    text(book, 40, 80);
}

////////////////////////////////
//function to make those imaages
function imageSnap() {
  background(255);
  //image randoms
  var rand1 = ~~random(35);
  var rand2 = ~~random(35);
  var rand3 = ~~random(35);

  //display images
  image(img[rand3], (width / 2) - 200, (height / 2) - 200, imgW, imgH);
  image(img[rand2], width / 2, (height / 2) - 100, imgW, imgH);
  image(img[rand1], (width / 2) + 200, (height / 2) + 30, imgW, imgH);
  newBook();
}

What appears in the Canvas during execution is always a small font size. I have also tried SansSerif and SansSerif-Bold. Is there a forum discussion I couldn't find? Or can someone give me a hint? Thanks...

I'm a data journalist working on a text and sentiment analysis of the remaining three presidential candidates' speeches. I generally make visualizations in R, but I'd like to do something a bit more interactive, which is why I've turned to p5. What I'm trying to do is load a .csv file with words and their frequencies into an array. Then, I've written a constructor for how to display the words, with sizes and shades of gray determined by their frequency. I'd like the words to then radiate out from the center to the edges and then repeat.

Here is my code:

var clinton;
var words = []; // Set up array for words in file
var frequency = []; // Set up array for frequency of each word

// Load the table of Clinton's words and frequencies
function preload() {
  clinton = loadTable("cltop.csv", "header");
}

function setup() {
  createCanvas(720, 400);
  background(51);
  // Set web font to be used
  textFont("Cabin:600:latin");
  // Set 'word' and 'frequency' variables
  for (var i = 0; i < clinton.getRowCount(); i++) { // This was just getRowCount, but got an "undefined" error
    words = [];
    for(var i = 0; i < clinton.rowCount; i++) { // Same undefined error as above when using rowCount
      words[i] = clinton.get(i, 2);
      frequency = [];
      for (var i = 0; i < clinton.rowCount; i++) {
        frequency[i] = clinton.getNum(i, 3);
      }
    }

  }
  // Create link to constructor
  clStream = new Words (width/2, height/2, 14)


}

function draw() {
  clStream.move();
  clStream.display();

}

// Create constructor function
function Words(tempX, tempY, tempSize) {
  this.x = tempX;
  this.y = tempY;
  this.size = tempSize;
  this.word = words;
  this.frequency = frequency;
  this.speed = 2;

  this.move = function() {
    this.x += random(-this.speed, this.speed); // I think this is wrong, as I want the words to radiate randomly out from the center
    this.y += random(-this.speed, this.speed);
  }

  this.display = function() {
    var freqGray = map(this.frequency, 8, 52, 102, 255);
    var freqSize = map(this.frequency, 8, 52, 12, 36)
    fill(freqGray);
    noStroke();
    textSize(freqSize);
    text(this.word, 0, 0);

  };
}

I'm not entirely certain where I've gone wrong, because when I try to load it in my browser, it just says "Loading," but there is no error in the javascript console. Any advice would be appreciated. Many thanks!

Apologies for any messy/poorly written code, this is my first p5 programme.

Example

Code Snippet:

var sketch5 = function(p) {

  p.peopleCount;
  p.currentValue;

  p.textExample;
  p.typeChoice;

  p.mappedFigure;

  p.setup = function() {

    var peopleCanvas = p.createCanvas(200, 300);

    peopleCanvas.parent('canvasHold');

    calport27 = p.loadFont('fonts/ASoPMFCalport-Circle2.7.ttf', p.setType);

    p.background(255);

    p.peopleCount = 0;

    p.buttonIn = p.createButton('IN');
    p.buttonOut = p.createButton('OUT');

    p.buttonIn.position(980, 30);
    p.buttonOut.position(980, 70);

    p.fill(0);

    p.buttonIn.id('buttonIn');
    p.buttonOut.id('buttonOut');

    p.buttonIn.mousePressed(p.doCountPlus);
    p.buttonOut.mousePressed(p.doCountMinus);

    p.buttonIn.style("background-color", buttonColour);
    p.buttonOut.style("background-color", buttonColour);

    p.buttonIn.style("z-index", "100000");
    p.buttonOut.style("z-index", "100000");
  }

  p.setType = function() {

    p.fill(0);

    currentTF = calport27 ;

    p.textFont("ASop MF Calport");

    p.currentValue = p.text("Visitors: " + p.peopleCount, 15, 270);
    p.textAlign(p.LEFT, p.BASELINE);
    p.mappedFigure = p.text("Type Frequency: " + '2.7', 15, 285);

    p.textSize(12);
    p.text('people', 15, 20);

    p.textSize(27);
    p.textAlign(p.CENTER, p.CENTER);
    p.textFont(calport27);
    p.textExample = p.text('A SUM\nOf\nPARTS', 100, 115);

  }

  p.doCountPlus = function() {

    p.peopleCount++;
    p.typeCheck();

  }

  p.doCountMinus = function() {

    if (p.peopleCount > 0) {
      p.peopleCount--;
    }

    p.typeCheck();
  }

  p.typeCheck = function() {

    p.typeChoice = p.map(p.peopleCount, 0, 100, 2.7, 0.3);

    p.rounded = Math.round(p.typeChoice * 10) / 10;

    if (p.rounded < 0.3) {
      p.rounded = 0.3;
    }
    var fixed = p.rounded.toFixed(1);

    currentTF = window['calport' + fixed*10] ;

    visitors = p.peopleCount;
    typeFreq = p.rounded;

    p.background(255);

    p.textAlign(p.LEFT, p.BASELINE);
    p.textSize(12);
    p.textFont("ASop MF Calport");

    p.text("people", 15, 20);
    p.text("Type Frequency: " + p.rounded, 15, 285);
    p.text("Visitors: " + p.peopleCount, 15, 270);

    p.textAlign(p.CENTER, p.CENTER);

    p.textSize(27);
    p.textFont(currentTF);
    p.text('A SUM\nOf\nPARTS', 100, 115);
  }

  p.draw = function() {
  }

}
var people = new p5(sketch5);

The issue is that when the typeCheck function runs (after pressing in or out buttons) that the title and data text take the bigger text size specified later in the function for the "A Sum of Parts" text and not the smaller text size specified right before their text functions.

So basically I am trying trying to create 5 separate sketches that then share some variables that inform each other, which is all working okay locally but the video and audio inputs are not being gathered when on my server. Would this be because they need to be running on a https:// url?

Any help would be greatly appreciated, thanks!

To reproduce the issue run the code from the bottom. Conversion will start an you will get pngs like this:

if you do a mouse click on the canvas, the size of the pngs that should be generated is changed and a few new items are added. The results look like in the screenshot below, some of the images are blank, some are distorted and they still have the old size.

Is there a way to avoid this behavior? is this a bug in processing? am i missing something?

Any input appreciated!

PGraphics png;
ArrayList<String> cue = new ArrayList<String>();
boolean conversion = false;
int pngSize = 64;

void setup() {
  size(400, 400);
  println("creating 64px letters");
  cue.add("A");
  cue.add("B");
  cue.add("C");
  conversion = true;
}

public void mousePressed(){
  println("creating 128px letters");
  pngSize = 128;
  cue.add("A");
  cue.add("B");
  cue.add("C");
  cue.add("D");
  cue.add("E");
  cue.add("F");
  conversion = true;
}

void saveNextInCue(){
  String letter = cue.remove(0);
  println("pngSize value is "+pngSize);
  png = createGraphics( pngSize, pngSize);
  png.beginDraw();
  png.textSize(30);
  png.text(letter,30,30);
  png.fill(random(255),0,255);
  png.rect(0,0,10,10);
  png.endDraw();
  png.save(sketchPath(letter+".png"));
}

void draw() {
  int bg = color(255,0,0);
  if (!conversion){
    bg = color(0,255,0);
  }
  background(bg);
  if( conversion == true){
    saveNextInCue();
    if(cue.size() == 0){
      conversion = false;
    }
  }
}

Here is my Code:

    PImage pic;
    PFont font;
    PGraphics pg;
    PGraphics manyC,finalSave;
    String[] words={"hello","world","hello","world","hello","world","hello","world","hello","world","hello","world"};
    PGraphics[] wordPic;


    void setup(){
      size(1800,1800);
      pic=loadImage("1.png");
      pic.filter(THRESHOLD,0.9);
      pic.resize(1800,0);
      pic.save("D://sample.png");


      font=createFont("微软雅黑",240);
      textFont(font);
      float strHt=textAscent()+textDescent();
      manyC      = createGraphics(pic.width,pic.height);
      finalSave  = createGraphics(pic.width,pic.height);
      //finalSave.smooth();

      wordPic=new PGraphics[words.length];
      int[] w =  new int[16];
      w[0] = 400;
      w[1] = 400;
      w[2] = 400;
      w[3] = 400;
      w[4] = 400;
      w[5] = 400;
      w[6] = 400;
      w[7] = 400;
      w[8] = 400;
      w[9] = 400;
      w[10] = 400;
      w[11] = 400;
      w[12] = 400;
      w[13] = 400;

      for(int i=0;i<wordPic.length;i++){

        int wid = (int)textWidth(words[i]);
        println(wid);
        wordPic[i] = createGraphics(w[i],400);
        wordPic[i].beginDraw();
        wordPic[i].background(255);
        wordPic[i].textFont(font);
        wordPic[i].textAlign(LEFT,TOP);
        wordPic[i].fill(color(0,0,0));
        wordPic[i].text(words[i],0,0);
        wordPic[i].endDraw();

        if(wordPic[i].width>=width){
          wordPic[i].resize(width,0);
        }
      }


      for(int i=0; i<wordPic.length;i++){
        wordPic[i].save("D://wordpic"+i+".jpg");
      }
      println("over");
    }

the output is like that:

so far so good. However, if I adjust the value of w[], which changes the width value when calling the function createGraphics(), the unexpected result comes out!

All I did was changing some values of w[], like 800,1200.

well, I'm confused.

I'm trying to adjust the graphics width, like this: wordPic[i] = createGraphics((int)textWidth(words[i]),(int)strHt); so I can handle them as small objects of the text Cloud.

And clearly, the results are not good enough.

So, is there anyone could help me about this problem? tell me why this will happen, or how can I leave this problem alone and go ahead for my work?

class button{
  int buttonX, buttonY, textSize, buttonWidth, buttonHeight;
  String buttonText;
  boolean isActive=false;
  button(int x, int y, int size, String t){
    buttonX = x;
    buttonY = y;
    textSize = size;
    buttonText = t;
    buttonWidth = (int) (textWidth(buttonText)+textWidth(buttonText)/4);
    buttonHeight = (int) (textSize+textSize/4);
  }

  int width(){
    return buttonWidth;
  }

  int height(){
    return buttonHeight;
  }

  String message(){
    return buttonText;
  }

  int xloc(){
    return buttonX;
  }

  int yloc(){
    return buttonY;
  }

  void changeSize(int x){
    textSize = x;
  }

  void build(){
    noStroke();
    if(mouseX >= buttonX && mouseX<= buttonX+buttonWidth && mouseY >=buttonY && mouseY <= buttonY+buttonHeight){
      isActive = true;
    }else{
      isActive = false;
    }
    if(isActive){
      fill(255);
    }else{
      fill(200);
    }
    rect(buttonX, buttonY, buttonWidth, buttonHeight, buttonHeight/4);
    fill(0);
    textAlign(CENTER,CENTER);
    textSize(textSize);
    text(buttonText,buttonX+buttonWidth/2, buttonY+buttonHeight/3/*fill*/);
  }
}

The class seems to be working fine. The problem is when I call it.

If I don't have this line constantly updating:

thisone = new button(50,200,60,"Ryan Sheets");

it doesn't build my button correctly.

This code

button thisone;
void setup(){
  size(500,500);

  background(0);
  thisone = new button(50,200,60,"Ryan Sheets");
}

void draw(){
  thisone.build();
}

displays this:

while this code:

button thisone;
void setup(){
  size(500,500);

  background(0);
}

void draw(){
  thisone = new button(50,200,60,"Ryan Sheets");
  thisone.build();
}

displays this:

What is the problem here and how can I fix it?

text(str, x1, y1, x2, y2);

where: x1 and y2 are cordinates of the text box and x2 and y2 are width and height of text box

I would like the font to have the highest possible size for which it still fits entirely into the text box specified by x2 and y2. I cannot use trial and error to determine the right font size - the String length varies, so the font size must be adapted each time the String length is altered.

The width and height of the box are constant - so the font size depends on them, not the other way around.

I was wondering if there was a simple method to achieve this?

I tried finding a formula for the font size but didn't succeed since the text size in this context depends on many factors:

• the box width
• the box height
• the font itself,
• the ascend,
• the descend,
• the structure of the string, that is, how long are each individual words?
• maybe the textAlign

Do you know the solution to this problem? Maybe there is a built in Processing method that does that?

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.

rect(10,10,100,100);
text(" TEST ", 20,20);

Text does not appear in rectangle.

can anybody help me understand the direction to take? I am not asking for code, but just for a hint regarding what to consider and where to watch.

Thank you very much!

Am building a sketch where names are pulled from a text file and made to populate the screen. The names get animated randomly on the X-axis. When the names hit the left and right side extents they reverse their direction.

Now, am able to get this done effectively for the Right Hand Side (RHS) but it doesn't happen for the Left Hand Side (LHS). On RHS, the words go out and reverse their direction because I'm using if xPosition[i]>width, but on the LHS although I am subtracting the textWidth I am unable to get it to go off the screen completely. Am very confused as to what I am not doing correctly here. Any hints would be very much appreciated especially line numbers 73 and 74

String[] names;

//Declaring but not initializing

float [] sizeOfText ;
float [] widthOfText ; 
float [] xPosition ;
float [] yPosition ;
float [] xSpeed ;
float [] ySpeed ;
float [] colorText ;
int [] h ;
int [] s ;
int [] b ;


void setup() {
  size(800, 600);
  colorMode(HSB, 360,100,100); // keeping color mode to Hue-Saturation-Brightness

  names = loadStrings("names.txt"); //loading all names from the text file

  sizeOfText =  new float [names.length];
  widthOfText = new float [names.length];

  xPosition = new float [names.length];
  yPosition = new float [names.length];

  xSpeed = new float [names.length]; 
  ySpeed = new float [names.length];

  h = new int[names.length];
  s = new int[names.length];
  b = new int[names.length];

  //randomising initial positions and other parameters
  for (int i = 0; i < names.length; i++) {       

    h[i] = 47; // setting hue to a Yellow color
    s[i] = 100; // saturation remains constant
    b[i] = int(random(30,100)); //random brightness but within Yellow color

    sizeOfText[i] = random(20, 40); //random size of the text for all names

    widthOfText[i] = textWidth(names[i]); //accessing text widths of all the names

    xPosition[i] = random(0, width); //randomising all positions
    yPosition[i] = random(0, height);

    xSpeed[i] = random(-2, 2); //random speed variable

// not allowing xSpeed to go below 1 or -1 as this makes the text move very slow
    if (xSpeed[i]>0 && xSpeed[i]<1) {
      xSpeed[i] = 1;      
    }
    else if (xSpeed[i]>-1 && xSpeed[i]<0) {
      xSpeed[i] = -1;      
    }

    ySpeed[i] = 0; // no movement required on y-axis
  }
}

//moving text randomly from intial positions to any direction along X-axis
void draw() {
  background(0);

  for (int i = 0; i < names.length; ++i) {
    xPosition[i] += xSpeed[i];
    yPosition[i] += ySpeed[i];

// changing to the opposite direction if the text hits the boundaries of the screen
    if (xPosition[i]-widthOfText[i]< 0 || xPosition[i]>width ) {
    xSpeed[i] *= -1;    
    }

    //println("xPosition[i]: "+xPosition[i]);

    smooth();

    fill(h[i],s[i],b[i]); //randomizing the fills for all based on brightness set earlier

    textSize(sizeOfText[i]);

    //textAlign(LEFT); // Don't know if this is the issue or can fix it in some way??

    text(names[i], xPosition[i], yPosition[i]);

  }
}

So that the y position of the "current" line is the sum of the heights of the previous lines and the height of its own. Looks like this at the moment: