Multiple processing Screens at once?

plowrighth

Hi, everyone :) I've made this website, http://artificialintelligencetype.com/ I want more than processing screen to be up at once, so there be smaller so about five beside each other? Does anyone know how?

Thanks Harry

koogs

that's already maxing out my cpu and making my laptop unresponsive and you want to add another 4?

plowrighth

It doesn't matter if it causes the computer to glitch kind of the point, and I'll simplify it a bit once I've worked out how to do it?

GoToLoop

https://forum.Processing.org/two/discussions/tagged?Tag=#multiple+canvas

plowrighth

Hi GoToLoop I'm sorry but That whole conversation kind of goes over my head, is there anyway you can go through it with me:) ? thanks!

GoToLoop

You can ask me exactly what you haven't understood. 8-X

plowrighth

Okay, let me rephrase so that I can tell you my progress.

At the moment I'm trying to create two separate javascript canvas to go beside each other, so different letters can be shown on each box?

I've started separating them into separate javascript codes, and have tried using Div's to locate each one- if you go and view my code on the website you might see what I mean.

In all honestly though I'm kind of making educated guessing and it's getting me nowhere haha...

Does this make sense?

Lord_of_the_Galaxy

I would recommend you to check out this video on instance mode by Daniel Shiffman. It provides a good introduction to instance mode in p5.js.

plowrighth

Shall give it a watch now, will probably stop me staring at the code hoping it will do it itself anyway haha! thank you :)

GoToLoop

At the moment I'm trying to create two separate javascript canvas to go beside each other, so different letters can be shown on each box?

Are those 2 canvas instances of the same sketch, or each 1 got their own JS code? :-/

plowrighth

At the moment the same sketch, hopefully by the time I finish this their own code, trying to do it with the video posted above now.

GoToLoop

If those canvas are simply instances of the same sketch code, you should take a look at my <iframe> approach at the link below:
https://forum.Processing.org/two/discussion/18859/running-p5-js-in-google-sites

See it an action online too: https://ThimbleProjects.org/gotoloop/127477/

plowrighth

Okay- I can't seem to get this to work but you seem to know your stuff.

On the website when i enter a letter it loads up a letter, all i want to do it manage to make it so you can type words in, so say when it loads up a letter, that letter will remain and the next one will load in a different place,

do you have any idea? I'm sure i'm confusing this :/

plowrighth

your approach looks great by the way!

GoToLoop

Perhaps you're using some wrong terminology. What do you mean by "load up" a letter? :-/
Do you really need 2 canvas in order to display your letters? :-?

plowrighth

I probably am, self-teaching myself for a project, it's causing a struggle...

Not really know, I just need the letters to become words, but I can't figure out a way to do it :/

so if when you type, currently 'key' is used so it will show the keyPressed, but I need it so that key remains, even after a new one is pressed? So that eventually a word could be formed, whether it's legible doesn't matter...

GoToLoop

You can simply concatenate each key as 1 string using the + operator:

let word;

function draw() {
  background(0o350);
  text(word, width>>1, height>>1);
}

function keyTyped() {
  word += key;
}

plowrighth

var rand;
var r;
var A;
var speed = 0.5;
var randomX;
var randomY;
var randomH;
var randomW;
var word;


function setup () {
   // var myCanvas=createCanvas(windowWidth, windowHeight);
     var myCanvas=createCanvas(450, 450);
    myCanvas.parent('myCanvas');
 // createCanvas (500, 500);

  textSize(100);
  A = random(50,400);
  B = random(50,700);
  rand = random(0,3);
  r = random(100);
}



function draw() {

  // console.log(rand);


  switch (round(rand)) {
  case 0:
    drawGlitch();
    break;
  case 1:
    drawColours();
    break;
  case 2: 
    drawOpacity();
    break;

  }
}


function drawColours() {
  frameRate(random(0, 100));
  background(105, 105, 105);
  fill(random(0, 255), random(0, 255), random(0, 255));
   textFont("OCRAStd");
  text(key, B, A);
}


function drawGlitch() {
frameRate(random(0, 100));
  background(105, 105, 105);
  fill(0, 0, 0);
  if (r > random(100)) {
    A = A + speed;

    if (A > 125) {
      speed = -speed;
    }

    if (A < r) {
      speed = -speed;
    }
   textFont("OCRAStd");
    text(key, B, A);
  }
}



function drawOpacity() {
  background(105, 105, 105);
  fill(0, 0, 0, random(0, 100));
   textFont("OCRAStd");
  text(key, B, A);
}

plowrighth

I have shortened the code for you, so I apologise it's messy.

How would that work within this then? :)

GoToLoop

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

plowrighth

There you go, I've editted the one above.

GoToLoop

This is the statement you use to display your letter: text(key, B, A);

You need to understand that key simply represents the last key pressed:
http://p5js.org/reference/#/p5/key

If you need to remember past keys, you're gonna need to save them somewhere. L-)

plowrighth

Yeah that's what I thought, so is there no way of doing it so I can form words?

GoToLoop

I've already explained that you can concatenate each key in 1 string in my previous example.

plowrighth

Okay I shall try that, and get back to you.

jeremydouglass

Some recent discussions:

• How to Split the Screen in two (one typography other images) https://forum.processing.org/two/discussion/comment/80431/#Comment_80431
• Backspace processing https://forum.processing.org/two/discussion/comment/80285/#Comment_80285

plowrighth

honestly i think i'm because stupid, because I can't work out how to do any of this. :/

blindfish

@plowrighth - you declare a variable word so when a letter key is pressed (see keyTyped) you can concatenate the value with the word variable:

word += key

Then instead of outputting the value of key in draw() just output the value of word...

You might also want to set a limit on the word length; or reset it to an empty string at a certain length; or allow the user to reset it...

lavit

sorry if too naive, for thinking you haven't thought of it, but not using background is an option... second, use arrays, learn about arrays, the reference is enough... declare the var to be [], and store each new one with append, the next one, and over and over, then you can choose which parts of the array to show if so... putting the var to command text instead of key... oh and blindfish aproach could be easier, but, your choices... good luck