Is there a way to set a processing.js fullscreen in the browser?
in
Integration and Hardware
•
2 years ago
Hi everybody,
i want to use the following sketch as a background of a webpage, so i have exported it with processing 2.0 to run in .js and it works fine, except that i want it to be fullscreen and i don't know how to achieve that. i already tried by putting '100%' in width and height in the style but it doesn't work and i don't know how to program javascript, any suggestions?
- ArrayList <John> johnsons;
- int num = 300;
- void setup() {
- size(800, 600);
- smooth();
- johnsons = new ArrayList<John>();
- for (int i = 0; i < num; i++) {
- johnsons.add( new John() );
- }
- }
- void draw() {
- background(255);
- /*for (int i = 0; i < num; i++) {
- johnsons.get(i).move();
- johnsons.get(i).draw();
- } è come scrivere il paragrafo seguente*/
- for (John j : johnsons) {
- j.move();
- j.draw();
- j.checkMouse();
- }
- }
- void mousePressed() {
- for (int i = 0; i < num; i++) {
- johnsons.get(i).mouse();
- }
- }
- class John {
- float px, py;
- float dx, dy;
- float damp;
- color sc;
- John() {
- px = width / 2;
- py = height/2;
- dx = random(width);
- dy = random(height);
- damp = random(0.01, 0.04);
- sc = color(random(100, 255), 0, random(15, 25));
- }
- void move() {
- dx += random(-5, +5);
- dy += random(-5, +5);
- px += (dx - px) * damp;
- py += (dy - py) * damp;
- }
- void draw() {
- fill(sc, 30);
- noStroke();
- ellipse(px, py, 20, 20);
- fill(100);
- noStroke();
- ellipse(px, py, 5, 5);
- }
- void mouse() {
- dx = mouseX;
- dy = mouseY;
- }
- void checkMouse() {
- float mouseRadius = 20;
- float d = dist(mouseX, mouseY, px, py);
- if (d<mouseRadius && d > 0.0001) {
- dx += (px-mouseX) / d*mouseRadius;
- dy += (py-mouseY) / d*mouseRadius;
- }
- }
- }
1