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?

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

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);
    }

String canvasMsg = "CACTUS";
PFont font;
PImage bg;
int y;

void setup() {
  size(640, 360);
  bg = loadImage("cactus.JPG");

  fill(153, 0, 153);


  font = loadFont("ACaslonPro-Semibolditalic-48.vlw");
  textFont(font);
  textSize(100);

  textAlign(CENTER);
  text(canvasMsg, width / 2 - 10, height + 2);
}

void draw() {
  background(bg);
}

I've googled this and I've come across a lot of people asking about it but not necessarily knowing if this is a feature. Getting a bit stuck here in terms of syntax.

I'm using the textWidth reference as a base.

void setup(){
size(500,500);
textSize(28);

char c = 'T';
float cw = textWidth(c);
text(c, 0, 40);
line(cw, 0, cw, 50); 

String s = "Tokyo is the greatest city in the entire world";
float sw = textWidth(s);
if (textWidth(s) > width){
  
  text(s, 0, 85);
  println("true");
}
line(sw, 50, sw, 100);
}

I think the key lies within if (textWidth(s) > width) but can someone give me a pointer in terms of how to write it so that it will break when the sentence hits the width of the screen, preferably on a space so it makes sense? Is it simply "\n"? If so, how would the syntax work out?

Thank you!

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 was trying to make a code for playing my project. But I couldn't figure out how to make the same video play and after finished showing few second (maybe 5 seconds) of how many times video played. and again playing the video.

1. after the finished video, then showing the message
2. the message counting how many times played.
3. 5 sec after automatically play again.

It could be a very obvious question, but few days of searching, I still couldn't find the solution...

please anyone can advise on this problem?

import processing.video.Movie;

Movie vid;
boolean ended;

void setup() {
  frameRate(30);
  textSize(050);
  textAlign(CENTER, BASELINE);
  fill(0);

  vid = new Movie(this, "StudioOutside.mov") {
    @ Override public void eosEvent() {
      super.eosEvent();
      myEoS();
    }
  };

  vid.play();
  while (vid.width == 0 | vid.height == 0)  delay(10);

  surface.setSize(vid.width, vid.height); // P3
  //size(vid.width, vid.height); // P2
}

void draw() {
  if (!ended)  background(vid);
  else {
    if (key == ' ' || key == ' ') {
      keyPressed = true;
    if (keyPressed == true) {
     background(vid);
     vid.play();
    }
      } else {
    vid.stop();
    background(255);
    text("Playback has finished!", width>>1, height>>1);
  }
  }
}

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

void myEoS() {
  ended = true;
  frameRate(1);
}

Thank you in advance.

I am trying to draw a rectangle in the window from a Thread.

void setup(){ size(100,100); T thread = new T(); thread.start(); } class T extends Thread{ void run(){ rect(10,10,10,10); } }

But this didn't work. I hobe someone can help me?

Thank you!

Alternatively, some of you might know how to resolve my problem in a different way.

I began this project in Javascript using the HTML5 Canvas element. I'm creating videos that show animated text and simple diagrams, like an animated powerpoint presentation.

I have lots of ideas for cute ways to have text move around the screen, but the problem is that text movement becomes jerky when it's slow. It appears that Canvas is rounding pixel positions to integers. I know this sounds like a small deal, but I was surprised to see how disruptive and unnatural even 1-pixel jerks look on a 720P sized screen. And many of my ideas for animation and movement would involve trajectories just a few pixels wide, so they need to be smooth.

So I wonder if Processing could do this better.

There might be some alternatives that let me keep using Canvas. For instance I could draw on a Canvas that is twice as wide and high as I intend, then display it in a browser at 50% magnification. I haven't tried it yet, so I don't know if that would make any difference. I'm sure that it has a lot to do with how the browser chooses to downsize images.

J

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)

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

Sorry to bother you all, but I am just trying to write some code for a pie chart (I've changed it since my last one) and want to create labels that show up when you hover the mouse over a sector.

I saw a piece of code someone wrote that said...

void draw() {
if(get(mouseX,mouseY) == color (255,0,0) {
 displayInfo();
}   
}

Can someone please help me with coding labels onto my pie chart. This is my code so far....

size(1500, 1500);
background(255);
smooth();
noStroke();

//the data
float[] data = {
6, 9, 6, 25, 0, 12, 1, 2, 35, 7, 0
};
colorMode(HSB,data.length);
float t = 0;

for (int i=0;i<data.length;i++) {
t+=data[i];
}

// how much of each degree of the pie chart should each unit of data get
// in other words distributes our total data over 360 deg in preportion
t=360/t;

//two angles for each segment
float a1=0, a2=data[0];

//for each number in our data array
for (int i=0;i<data.length;i++) {

// choose a random fill
fill(i, 255, 255);
//put the last leading angle into a2
a2 = a1;
//update the current leading angle
a1 += data[i]*t;
//print the angles for debuging purposes
println(a1+"  :  "+a2);
//draw teh arc
arc(width/2, height/2, 1000, 1000, radians(a2), radians(a1));
}

for (int i=0;i<data.length;i++) {
t+=data[i];
}
t=width/t;
int x=0, y=0;
for (int i=0;i<data.length;i++) {
fill(i, 255, 255);
rect(x, y, data[i]*t, 10);
x+=(data[i]*t);
}

Here is some code I found off a tutorial, however I'm not sure how I can incorporate it into my pie chart...

if((mouseX > (x[i] - w/2)) && (mouseX < (x[i] + w/2)) &&
   (mouseY > (y[i] - t[i]/2)) && (mouseY < (y[i] + w/2))) {
   fill(#FFBA00);
   // Could also have bars fill in with flag of country.
   textFont(labelFont);
   textAlign(CENTER);
   // Info on rollover...
   text(tugNames[i] + ": " + tugMedals[i], x[i], y[i] - t[i]/2 - 10);
   // ... or info on click
//       if(mousePressed) {
//         text(tugNames[i] + ": " + tugMedals[i], x[i], y[i] - t[i]/2 - 10);
//       }
} else {
fill(#CCCCCC);
}
rect(x[i], y[i], w, t[i]);

textAlign(CENTER);
textFont(labelFont);
fill(#CCCCCC);
text(tugCountries[i], x[i], height - bb/2);
}

I also really want to have a title that comes up when you run the page (not a title in the top section of the window, but one that is on the same screen as the pie chart....

I want to add a button in my p5.js sketch using p5.dom.js, and want that I place a button on vertical center with text. So I write a code as follows.

textAlign(CENTER, CENTER);
text(“HELLO!", width/2, height/2);

var button = createButton(“<-");
button.position(width/4, height/2);

But the button and text have different base line, so I don’t get expected result. What should I do for vertical centering button and text?

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.

Both ellipse and rectangle plane have same rotation, and ellipse's z index is 1 higher than rectangle's. The wired thing is when the mouse position is below the rectangle's y position, the ellipse will be hidden behind the rectangle.

This trobules me a lot, anyone has a good idea?

Here is the code.

void setup() {
  frameRate(60);
  size(1000, 1000, P3D);
  smooth(6);
}

void draw() {
  background(120);

  pushMatrix();
  pushStyle();
  noStroke();
  translate(width/2, height/2, 0);
  rotateX(1);
  rectMode(CENTER);
  rect(0, 0, 800, 800);
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(120);
  text("TEST", 0, 0, 1);
  popStyle();
  popMatrix();

  pushMatrix();
  pushStyle();
  translate(mouseX, mouseY, 1);
  rotateX(1);
  fill(0);
  ellipse(0, 0, 50, 50);
  popStyle();
  popMatrix();

}

Thanks

At the moment I have a word that reacts to sound input from an external mic. The title really explains what I'm looking to do. I've been looking at 'delay()' as a a possible way to change the word every 10 seconds, but I honestly don't know where to start. I've looked at tutorials and other threads to no avail.

I'm thinking I create a string of words I want the sketch to cycle through, but as to how I link that to time I don't know. Or is it a case of creating separate classes?

Thanks for any help or pointers to tutorials that could help me!

Here's what I've done so far:

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim; 
BeatDetect beat;
AudioInput in;
FFT fft;

float angle = 0;

PFont font1;
PFont font2;
PFont font3;


void setup()
{


  noCursor();
  fullScreen();
  smooth();
  minim = new Minim(this);
  in = minim.getLineIn();
  fft = new FFT(in.bufferSize(), in.sampleRate());

  frameRate(60);

  beat = new BeatDetect();
   beat.setSensitivity(100);


  font1=loadFont("Simplon.vlw");
  font2=loadFont("Simplon 50.vlw");
  font3=loadFont("Simplon 80.vlw");


}

void draw()
{
  noFill();
  background(255);
  fft.forward(in.mix);
  for (int i = 0; i < in.mix.size() - 1; i++) {
    angle = radians(i);
     textFont(font3);
    textSize(80);
    textAlign(CENTER, CENTER);
    fill(0);
    text("John", 
    width/2 +1000 *cos(angle)*(10*in.mix.get(i)), 
    height/2 -1000 *sin(angle)*(10*in.mix.get(i)));
  }


}

void keyPressed() {

  if (key == 's') {
    saveFrame("wallpapers/wallpaper-####.tif");
  }

}

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 ;
    }

/* How to Play : Use arrow-keys and press the key shoutcasted by the window (e.g. Press left if it says "! Left !").
 You win once you've reached a win streak of 20. You lose if you reach 0 HP.*/
import ddf.minim.*;
AudioPlayer spl;
Minim song;
PImage imgChrome, imgChrome2;

String[] symDanceKeys = {"←", "→", "↑", "↓"};
String[] ltrDanceKeys = {"Left", "Right", "Up", "Down"};

String cLTRSkey = "A";
String currentSYMkey = "←";
String cSk = currentSYMkey;
String currentLTRkey = "Left";
String cLk = currentLTRkey;

int aSec; 
int emoHP = 0;
int emoExpression = 0;
int danceStreak = 0;
int displayKeyX = 50;
int displayKeyY = 60;

boolean paused = false;
boolean tMin=false; //Timer minutes
boolean ending = false;
boolean displayKeyPressed=true;
boolean startScreen=false;
boolean winGame=false;
boolean endScreen=false;
boolean easy=false;
boolean medium=false;
boolean hard=false;
boolean expert=false;

float danceDiff = 2;
float timer = 0; // in seconds.
float sTimer; //Screen timer
float suTimer; //Startup Text timer
float dTimer; //Difficulty timer
float splTimer; // Song timer

PFont ar;

void setup() {
  song = new Minim(this);
  spl = song.loadFile("Tet.mp3");
  imgChrome2 = loadImage("chrome2.jpg");
  imgChrome = loadImage("chrome.jpg");
  background(#C6ba32);
  ar = createFont("ArialMT-48", 14, true);
  size(800, 500);
  frameRate(60);
}

void draw() {
  //if (splTimer>=4) {
  //  spl.play();
    //spl.loop(-0);
  //}
  splTimer += 0.0166666667;
  suTimer += 0.0166666667;
  dTimer += 0.0166666667;
  if (suTimer<=4) {
    startScreen=true;
  }
  if (startScreen) {
    textSize(14);
    fill(#00E8FF);
    noStroke();
    quad (30, 15, 500, 15, 480, 130, 10, 130);
    fill(#000000);
    text("To play, press the keys you're asked to press", 30, 30);
    text("as they are scrolling down the screen.", 30, 45);
    text("The more you press the correct key, the fast it gets.", 30, 60);
    text("The more you press the wrong key, your HP goes down.", 30, 75);
    text("If your HP hits 0, game over, but if your streak hits 20, you win!", 30, 90);
    text("Press the keys 1-4 on the startup screen to change the difficulty.", 30, 105);
    text("Press nothing for Super Easy mode!", 30, 120);
    if (suTimer>=4) {
      startScreen=false;
    }
  }

  textFont(ar, 14);
  if (ending) {
    endScreen=true;
    background(#C6ba32);
    displayText("Press R to restart the game!", (310));
    displayText("The game has ended..", (230));
    String endingText = "";
    if (winGame) {
      endScreen=true;
      endingText = "You have won the game, Congrats! ( ͡° ͜ʖ ͡°)";
    } else {
      endingText = "You have lost the game, You suck! ( ͡° ʖ̯ ͡°)";
    }
    displayText(endingText, (270));
    delay(500);
  } else {
    // Since the frameRate is 60, to calculate 1 second, add by 1/60 everytime draw() runs.
    //vv|LOOK HERE FOR TIMER|vv\\  
    timer += 0.0166666667;
    if (timer >=4 ) {
      println(mouseX+"X", mouseY+"Y");
      println( width+"W", height+"H");
      timer = 0;

      //^^|LOOK HERE FOR TIMER|^^\\

      if (displayKeyPressed) {
        // Selects a random number between 0 and the length of the danceKeys array/table.
        //vv|LOOK HERE FOR RANDOMIZER|vv\\
        int randomKey = int(random(ltrDanceKeys.length));
        cLk = ltrDanceKeys[randomKey];
        cSk = symDanceKeys[randomKey];
        //^^|LOOK HERE FOR RANDOMIZER|^^\\
        displayKeyY = 60;
        displayKeyX = int(random(50, width - 50));
        displayKeyPressed = false;
        text(cSk + cSk + cLk + cSk + cSk, displayKeyX, displayKeyY);
      } else {
        displayKeyPressed = true;
      }
    }
    // If four seconds hasn't passed yet..
    else if (!displayKeyPressed) {
      //Resets the background so the moving text effect is more pleasing.
      background(#C6ba32);
      drawEmoticon(emoExpression);

      displayKeyY += danceDiff;

      // If it reaches the bottom, you can't press the assigned key anymore.
      if (displayKeyY >= (height - 30)) {
        displayKeyPressed = true;
      } else {
        textSize(14);

        // Creates a wind effect after dance streak reaches 16.
        if (danceStreak >= 16) {
          for (int i = 1; i <= (danceStreak - 15); i++) {
            fill(0, ((4 - i) * 30));
            text(cSk + cSk + cLk + cSk + cSk, int(random(displayKeyX - 30, displayKeyX + 30)), displayKeyY - (i * 20));
          }
        }
        fill(0);
        textSize(20);
        text(cSk + cSk + cLk + cSk + cSk, displayKeyX, displayKeyY);
      }

      displayBars();
      displayHealth();
    }
    fill(#FFFFFF);
    //quad(1 x, 1 y, 2 x, 2 y, 3 x, 3 y, 4 x, 4 y);
    quad(676, 443, 737, 443, 737, 458, 676, 458);
    quad(676, 430, 737, 430, 737, 444, 676, 444);
    textSize(10);
    fill(#000000);
    text("Mins | Sec", 707, 440);
    textSize(14); 
    sTimer +=0.0166666667;
    //If sTimer is 0
    if (sTimer >=0) {
      //Display timer
      fill(#000000);
      text(sTimer, 711, 457);
    }
    if (sTimer>=60.000) {
      tMin = true;
      sTimer=0;
    }
    //If tMin is true
    if (tMin) {
      tMin=false;
      //Add a minute to the timer
      fill(#000000);
      text(aSec+".", 685, 457);
      aSec = aSec + 1;
    }
    if (sTimer>=0.000) {
      fill(#000000);
      text(aSec+".", 683, 457);
    }
  }
}

void keyPressed() {
  if (key=='r'||key=='R') {
    if (endScreen==true) {
      restart();
    }
  }
  if (key=='1') {
    if (dTimer<=4) {
      easy=true;
      medium=false;
      hard=false;
      expert=false;
      fill(#ffffff);
      quad(50, 420, 128, 420, 128, 440, 50, 440);
      fill(#000000);
      text("EASY", 70, 435);
    } else {
      if (dTimer>=4) {
        println("Cannot change difficulty at this time.");
      }
    }
  }
  if (key=='2') {
    if (dTimer<=4) {
      easy=false;
      medium=true;
      hard=false;
      expert=false;
      fill(#ffffff);
      quad(50, 420, 128, 420, 128, 440, 50, 440);
      fill(#000000);
      text("MEDIUM", 60, 435);
      emoHP=8;
      danceDiff=3;
    } else {
      if (dTimer>=4) {
        println("Cannot change difficulty at this time.");
      }
    }
  }
  if (key=='3') {
    if (dTimer<=4) {
      easy=false;
      medium=false;
      hard=true;
      expert=false;
      fill(#ffffff);
      quad(50, 420, 128, 420, 128, 440, 50, 440);
      fill(#000000);
      text("HARD", 70, 435);
      emoHP=4;
      danceDiff=6;
    } else {
      if (dTimer>=4);
      println("Cannot change difficulty at this time.");
    }
  }
  if (key=='4') {
    if (dTimer<=4) {
      easy=false;
      medium=false;
      hard=false;
      expert=true;
      fill(#ffffff);
      quad(50, 420, 128, 420, 128, 440, 50, 440);
      fill(#000000);
      text("EXPERT", 60, 435);
      emoHP=1;
      danceDiff=10;
    } else {
      if (dTimer>=4) {
        println("Cannot change difficulty at this time");
      }
    }
  }
  if (key=='P'||key=='p') {
    paused=true;
    noLoop();
    textSize(24);
    fill(#00E8FF);
    rect(335, 190, 160, 100);
    fill(#000000);
    text("Paused", 415, 245);
    textSize(12);
    text("Press ENTER to continue", 415, 280);
  } else {
    if (keyCode==ENTER&&paused==true) {
      paused=false;
      background(#C6ba32);
      drawHead();
      displayBars();
      displayHealth();
      draw();
      clear();
      loop();
    }
    // Problem #1; How2 detect WASD keys?
    if (!displayKeyPressed) {
      if (keyCode == LEFT) {
        if (cLk == ltrDanceKeys[0]) { // Selects the first (0) value from the danceKeys array.
          //println(danceKeys[0]) == String "Left"
          changeHealth(1);
        } else {
          paused=false;
          changeHealth(-1);
        }
      } else if (keyCode == RIGHT) {
        if (cLk == ltrDanceKeys[1]) {
          changeHealth(1);
        } else {
          paused=false;
          changeHealth(-1);
        }
      } else if (keyCode == UP) {
        if (cLk == ltrDanceKeys[2]) {
          changeHealth(1);
        } else {
          changeHealth(-1);
        }
      } else if (keyCode == DOWN) {
        if (cLk == ltrDanceKeys[3]) {
          changeHealth(1);
        } else {
          changeHealth(-1);
        }
      }
    }
  }
}

void changeHealth(int num) {
  displayKeyPressed = true;
  emoHP = emoHP + num;

  // Check if win or lose.
  //VV||MAX HP||VV\\
  if (emoHP > 10) {
    emoHP = 10;
    //^^||MAX HP||^^\\
  } else if (emoHP <= 0) {
    println("Game over!");
    ending = true;
  }
  if (danceStreak >= 20) {
    println("You have won the game!");
    ending = true;
    winGame = true;
    endScreen = true;
  }

  // Checking win streaks for Difficulty Management and Emoticon Control.
  if (num >= 0) {
    danceStreak ++;
    emoExpression = 0;
  } else {
    danceStreak --;
    emoExpression = 1;
    if (danceStreak<=0) {
      danceStreak=0;
    }
  }
  if (danceStreak<=1 && easy==true) {
    danceDiff = 2;
  } else {
    if (danceStreak >2&& easy==true) {
      danceDiff = danceStreak;
    }
  }
  if (danceStreak <= 1 && medium==true) {
    danceDiff = 3;
  } else {
    if (danceStreak >=3 && medium==true) {
      danceDiff = danceStreak;
    }
  }
  if (danceStreak <= 1 && hard==true) {
    danceDiff = 6;
  } else {
    if (danceStreak >=6 && hard==true) {
      danceDiff = danceStreak;
    }
  }
  if (danceStreak<=1 && expert==true) {
    danceDiff = 10;
    if (danceDiff > 10) {
      danceDiff = 10;
    }
  }
  // This is to prevent that "freezing" effect that occurs when a key is pressed (due to timer use).
  background(#C6ba32);

  drawEmoticon(emoExpression);
  displayBars();
  displayHealth();
}

void displayBars() {
  noStroke();
  fill(150);
  rect(0, 0, width, 30);
}

void displayHealth() {
  noStroke();
  fill(150);
  rect(0, 0, width, 30);

  fill(250, 250, ((10 - emoHP) * 10) + 100);

  // Using algebra to determine how long the HP bar should be.
  int totalTopBarLen = width;
  int healthBarLen = (totalTopBarLen / 10) * emoHP;
  rect(0, 0, healthBarLen, 30);
  displayText("(" + emoHP + " HP) (" + danceStreak + " Streak) (" + danceDiff + " Diff)", 20);
}
void displayText(String str, int y) {
  fill(0);
  textSize(16);
  textAlign(CENTER);
  text(str, width / 2, y);
}

//This uses math to make the faces
void drawEmoticon(int faceNum) {
  drawHead();

  // Mouth
  if (faceNum == 0) {
    if (emoHP <= 6) {
      line((width / 2) - 20, (height / 2) + 50, (width / 2) + 20, (height / 2) + 50);
    } else {
      // Arithmetic sequences formulae used to calculate the mouth-thingys' lengths.
      int mouthLenX = ((-5) + (emoHP - 1) * 5);
      int mouthLenY = ((75) + (emoHP - 1) * -5);
      line(width / 2, (height / 2) + 60, (width / 2) - mouthLenX, (height / 2) + mouthLenY);
      line(width / 2, (height / 2) + 60, (width / 2) + mouthLenX, (height / 2) + mouthLenY);
    }
  } else if (faceNum == 1) {
    line((width / 2) - 20, (height / 2) + 50, (width / 2) + 20, (height / 2) + 50);
    if (emoHP <= 6) {
      int mouthLenX = (50 + ((emoHP - 1) * -4));
      int mouthLenY = (80 + ((emoHP - 1) * -4));
      line((width / 2) - 20, (height / 2) + 50, (width / 2) - mouthLenX, (height / 2) + mouthLenY);
      line((width / 2) + 20, (height / 2) + 50, (width / 2) + mouthLenX, (height / 2) + mouthLenY);
    }
  }
}

void drawHead() {
  // Head
  noStroke();
  fill(250, 250, ((10 - emoHP) * 10) + 100); // Changes face-paleness according to health.
  ellipse(width / 2, height / 2, width / 3, width / 3);

  // Eyes
  stroke(50);
  strokeWeight(5);
  ellipse((width / 2) - 40, (height / 2) - 30, 20, 20);
  ellipse((width / 2) + 40, (height / 2) - 30, 20, 20);
}
void restart() {
  background(#C6ba32);
  danceDiff = 2;
  timer = 0; // in seconds.
  sTimer = 0; //Screen timer
  suTimer = 0; //Startup Text timer
  dTimer = 0; //Difficulty timer
  splTimer = 0; // Song timer
  paused = false;
  tMin=false; //Timer minutes
  ending = false;
  displayKeyPressed=true;
  startScreen=false;
  winGame=false;
  endScreen=false;
  easy=false;
  medium=false;
  hard=false;
  expert=false;
  aSec = 0; 
  emoHP = 10;
  emoExpression = 0;
  danceStreak = 0;
  endScreen=false;
  redraw();
}

I am trying to write a code that displays a different inspiration quote every time the letter c is pressed. In plain English, what I am hoping to achieve is:

Default message displayed.

Letter c pressed: Display "Every day is a new chance." in stead of the previous quote.

Letter c pressed: Display "Fear killed more dreams than failure ever will." in stead of the previous quote.

Letter c pressed: Display "Take a chance." in stead of the previous quote.

I came across another discussion thread discussing using the use of the same key, and I have tried to adopt the code. It works good for using the same key twice, and I'd like to know if I can use it for more than two keyPressed given it's based on a boolean. https://processing.org/discourse/beta/num_1209751117.html

Another issue is, the transition is not so smooth/reliable as the sentences seem to be flashing before settling. I tried having the background before the if-statements in draw() but it made the text appear very faint.

This is my adapted code:

PFont f;
boolean Cpressed=false;

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

  //printArray(PFont.list());
  f = createFont("Fox&Cat",20);
  textFont(f);
  textAlign(LEFT,CENTER);
  smooth();
  fill(#FFE224);
  textLeading(50);
  background(#302F2F);
}

void draw()
{
 if (Cpressed == false){
   if (keyPressed){
      if (key == 'c' )
      {
        Cpressed = true;
        background(#302F2F);
        String wordText = "Every day is a new chance.";
        text(wordText, 50, height/2);
      }
    }
  }
   else if (Cpressed == true )
  {
    if (keyPressed) {
      if (key == 'c'){
        Cpressed =false; 
        background(#302F2F);
        String wordText = "Fear killed more dreams than failure ever will.";
        text(wordText, 50, height/2);
      }
    }
  }
}

Tried having if-statements within each other, but I can only seem to make it work pressing different letters:

PFont f;

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

  //printArray(PFont.list());
  f = createFont("Fox&Cat",20);
  textFont(f);
  textAlign(LEFT,CENTER);
  smooth();
  fill(#FFE224);
  textLeading(50);
  background(#302F2F);
}

void draw() {
  if (keyPressed){
    if (key == 'c' ) {
      background(#302F2F);
      String wordText = "Every day is a new chance.";
      text(wordText, 50, height/2);
    }

    if (key == 'b') {
      background(#302F2F);
      String wordText = "Fear killed more dreams than failure ever will.";
      text(wordText, 50, height/2);
    }
  }
}

I am quite new to processing and will greatly appreciate any ideas or pointing in the right direction. Many thanks for your kind help and your time!

PFont fFont;

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

  background(255, 255, 255);


  translate(400,400);
  fFont = createFont("BodoniOrnamentsITCTT", 48);
  textFont(fFont, 290);

  for(int i=0;i<800;i=i+100) {

    for(int j=0;j<800;j=j+100){

      for(int k=0;k<6; k=k+1){

        fill(80,214,179,50);

       pushMatrix();
       textAlign(CENTER);
       rotate(PI*k/3);
       text("*", i, j);

       popMatrix();
      }
    }
  }
}

Thxs, Kf

PShape boxShape;
PGraphics pg;


void setup() {
  size(320, 240, P3D);

  textSize(44);
  textAlign(CENTER, CENTER);   


  pg = createGraphics(width/2, height/2, P2D);
  pg.beginDraw();
  pg.background(0);
  // move origin to middle
  pg.translate(pg.width / 2, pg.height / 2);
  pg.noStroke();
  for (int i = 0; i < 100; i++) {
    // random semi-opaque colour
    pg.fill(random(192, 256), random(192, 256), random(192, 256), 192);
    pg.pushMatrix();
    pg.rotate(random(TWO_PI));
    pg.rect(random(pg.width) / 2, random(pg.height) / 2, 50, 50);
    pg.popMatrix();
  }
  pg.endDraw();

  boxShape = createShape(BOX, height/3);
  boxShape.setTexture(pg);
  fill(255, 255, 255);
}


void draw() {
  image(pg, 0, 0, width, height);

  pushMatrix();
  translate(width/2, height/2, 0);  
  rotateY(PI * frameCount / 500);
  shape(boxShape);  
  popMatrix();

  text("My Text", mouseX, mouseY);
}

I am trying to pull some text from this DataSet https://github.com/dariusk/corpora/blob/master/data/geography/rivers.json

I'm using JSON for the first time. All I am trying to do is pull the name of each river out of the JSON file and print them to the canvas one at a time.

Originally,I was getting all names on top of each other at the same time...now Im getting either the first or last name depending on whether I have text

(rivers[i].name,width/2, height/2); or

text(rivers[0].name,width/2, height/2);

Any suggestions would be great.

The full draw sketch is

function draw() { background(255);

var rivers = data.rivers;

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

for (var j = 0; j < rivers[i].length; j++) {

text(rivers[i].name, width / 2, height / 2);

} console.log(rivers[i].name);

} } .....

Thanks,

Paul

The following code will display the clock, and color the text, using the current clock(ss/mm/hh) as a hex value. I first wrote the code in processing where it works. Now I want to execute it as p5 however, after changing the syntax to fit the p5 language, it dosen't work. I can't figure out why, tho I suspect the "var" instead of "string" to be an possible issue?

Can you guys explain why it dosen't work?

p5.js code:

var s,m,h; 
function setup() {
  createCanvas(800,600);

}

function draw() {
 s = second();
 m = minute();
 h = hour(); 

background(30);
var s_ = nf(s,2);
var m_ = nf(m,2);
var h_ = nf(h,2);

var hex_ =  "FF" + s_+ m_+ h_;
var c = unhex(hex_);

fill(c);
textSize(30);
text("#",width/2-70,height/2); 
text(s_,width/2-40,height/2); 
text(m_,width/2,height/2); 
text(h_,width/2+40,height/2); 
}

Same programme, just written in processing and WORKS:

int s, m, h; 

void setup(){
  size(800,600);   
}

void draw(){
 s = second(); 
 m = minute();
 h = hour(); 

background(200);
String s_ = nf(s,2);
String m_ = nf(m,2);
String h_ = nf(h,2);

String hex_ =  "FF" + s_+ m_+ h_;
int c = unhex(hex_);


fill(c);
textSize(30);
text("#",width/2-70,height/2); 
text(s_,width/2-40,height/2); 
text(m_,width/2,height/2); 
text(h_,width/2+40,height/2); 
}

import SimpleOpenNI.*;
SimpleOpenNI kinect;

int s = 0;

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

  kinect = new SimpleOpenNI(this);
  kinect.enableDepth();
  //turn on user tracking 
  kinect.enableUser();

}

void draw(){

  background(255);

  kinect.update();
  PImage depth = kinect.depthImage();
  //image(depth, 0, 0);

  IntVector userList = new IntVector();

  kinect.getUsers(userList);

  if(userList.size()>0){
   println("There is somebody here"); 
   s = s + 1;
   textSize(s);
   fill(0);
   textAlign(CENTER);
   text("hello", 500, 350);
  }

if(userList.size()<1){
  println("There is nobody here");
  //s = 0;
  if (s >= 1){
    s = s - 1;
      textSize(s);
   fill(0);
   textAlign(CENTER);
   text("hello", 500, 350);
  }

}
}

It's relatively simple in that it basically asks if there is anybody in the room and returns a yes/no answer. What I want to do now is make it so that when there are several people in the room, they all get their own 'Hello' which grows and shrinks depending on the length of time they stay in the space individually. I know that I need to identify each user separately in order to do this but I am unsure how, and there is little information on the SimpleOpenNI library to reference. I'm wondering whether I could alter/add to the above code, or whether I would need to completely rethink the draw section in order to do what I want to do?

Any help would be appreciated.

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!