Unfortunately I cannot run your code atm. How do you use your inputs to modify the main function?

Just double checking: did you include the p5js.dom js library in your html? If you check this lib documentation, you will find functions to retrieve the values of your text boxes' content. Something along the lines of mytextbox.innerHTML.

Check if your click event associated to your submit button is working. For this, use console.log().

Don't forget to include an empty draw(). I think you needed if you want to have a responsive interface.

See you in the new forum.

Kf

Hi! I'm trying to do a big project, but I'm stuck in a part of it. The canvas I'm working on is responsive, but the text and image aren't. Here's a simple code that make what i'm needing.

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?

You need to be clearer about your requirements. Are you saying you want to resize the iframe to the size of the canvas being loaded into it? That might be relatively tricky and involve communication between iframe content and host page.

If you just want to make contents of iframe adapt to iframe size then you essentially have the same requirements as someone wanting to make a responsive canvas.

In this case, instead of using loadStrings, one could use a Java File object and periodically check its .length(). Checking every frame, might be unnecessary, though -- how often the file should be checked depends on how responsive sending should be.

https://stackoverflow.com/questions/14478968/get-total-size-of-file-in-bytes

I have a separate thread for my gameloop locked at 150hz, and VSync turned on so draw() runs at the monitors refresh rate. This works great for keeping the gameplay stable, responsive, with smooth graphics.

I'm a java noob, I've tried many different mixes of using synchronized (), volatile, CopyOnWriteArrayList, I can't seem to avoid getting random crashes on my gamethread. Things like modifying an arraylist or pshape in the gameloop and accessing it for drawing seem to cause problems. The errors vary but it's usually complaining about not finding a vertex or arraylist entry it expected to find or java.util.ConcurrentModificationException for arraylists in the gameloop, EmpyStackException when using resetMatrix() on a pshape from inside my draw loop. Sometimes it manifests as drawing corrupted versions of my PShapes.

What's the recommended method to go about doing this and keeping it safe? Sometimes I can play my game for 10+ minutes without a problem, sometimes it will lock up right away several times in a row.

https://indielm.itch.io/platformbattler here's the game, it was made very quick for a jam so I'd need to clean up the code before sharing it.

Ideas - Updated hello.p5js.org site

Hey guys. So I am just listing out a subset of things that according to me need to be worked upon and which would be listed in my GSOC draft. Some of these were already mentioned in the Idea on https://github.com/processing/processing/wiki/Project-List#-updated-hellop5jsorg-site. Here's the list:

Mark : All of the ideas proposed here are open for discussion. Also other ideas can be suggested on this thread.

1. Adding captions feature
2. Translated captions feature
3. Improved Documentation - Internal and External
4. Deploy on github pages and go down from Jekyll altogether
5. Refactor complete existing codebase
6. Revamp playback options - Several defficiences
7. Make the site responsive - Does not look that good on my phone
8. Introduce Automated system like Gulp
9. Update Libraries - I think it would be better if we pull them from CDN instead of storing locally
10. Modify homepage to add Links to The Processing foundation, p5 library etc.
11. Remove internal javascript and css
12. Make Javascript Object Oriented

Reference:

1. https://github.com/processing/p5.js-video
2. https://github.com/processing/processing/wiki/Project-List#-updated-hellop5jsorg-site

Hello I am trying to draw a rectangle that is positioned inside a mouseY responsive ellipse. The code I have right now has a radian of PI/4.0f trail of ellipses drawn. However, I would like to have the angle of the ellipses trail upstraight, same as the rectangle so that it looks like they are wrapping the rectangle.

I tried to change the Z-axis but it doesn't work. Can anyone give me some suggestions please? Please also let me know if you need further elaboration.

Cheers, Karen

float rectX = 30;
float rectY = 100;

int num = 30;
float [] ypos = new float [num];
float radius = 200.0;

void setup() {
  size(400, 400, P3D);
  for (int i = 0; i <num; i ++) {
    ypos[i] = 0;
  }
  noFill();
  strokeWeight(1);
}

void draw() {
  background(0);
  stroke(255);
  translate(width/2, height/2);
  rotateY(-PI/4.0f);

  drawRect();
  drawResponsiveEllipse();
}

void drawRect() {

  pushMatrix();
  beginShape();

  fill(255);
  vertex(-rectX, rectY);
  vertex(rectX, rectY);
  vertex(rectX, -rectY);
  vertex(-rectX, -rectY);

  endShape(CLOSE);
  noFill();
  popMatrix();
}

void drawResponsiveEllipse() {

  translate (0,0);
  rotateX(PI/6.0f);
  pushMatrix();
  beginShape();

  ypos[num - 1] = mouseY;
  for ( int i = 0; i < num-1; i++ ) {
    ypos[i] = ypos[i+1];
  }
  noCursor();
  noStroke();
  for (int i = 0; i < num - 1; i+=2.5f ) {
    float b = map(i, 0, num, 0, 255);
    stroke(b); 
    ellipse (-rectX, ypos[i]-rectY, radius, radius);
    noFill();
  } 

  endShape(CLOSE);
  popMatrix();
}

Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code. Details here: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Is this solved? One approach is that you send the character in mousePressed and then you send a signal in mouseReleased so for the motor to stop running. The advantage of this is that you are not flooding your serial with commands to make your motor run. Instead, you give the signal to start working and a signal to stop working. This implies you need to change your Arduino side. Another advantage is that you don't have to call delay so many times in your sketch, making your sketch more responsive. Notice that this also would apply to keyPressed and keyReleased functions...

What OS are you using? If you still want to continuously stream characters when the mouse is pressed, you can do it by using mousePressed in draw like this:

void draw(){

  if(mousePressed) {   //Yes, a variable here, not a function
      ...Identify the key pressed and send the respective signal
  }

}

Kf

I think Discourse is a great option and a good switch. More modern and responsive (try altering the width of this forum). I'm more active on the Particle discourse forum nowadays (also due personal interests) and what nice is that you can watch conversations. Also e-mail alerts and everything seem more user-friendly, or at least they look nicer.

Here's what I got so far. It's a version where I manually put down the triangles. I marked all positions I want triangles in with lines first and added one triangle to start with. But it all is very non-responsive towards changes I want to do later on maybe.

//VARS

void setup() {
  size(1920, 1080);        // HD
  //size(3840, 2160);      // U-HD
  //size(2048; 1080);      // 2K 16:9
  //size(4096; 2160);      // 4K 16:9
  background(20);
  stroke(200);
  strokeWeight(1);
  noLoop();
}

void draw(){

  int hori = width/20; //horizontal length of triangle
  int vert = height/20;
  int hypo = height/30; //length of half the hypotenuse

  int offset_x;
  int offset_y;


  triangle(0, height/3, hori, height/3-hypo, hori, height/3+hypo);

  line(0, height/3, width/20, height/3);
  line(0, height*2/3, width/20, height*2/3);
  line(width*19/20, height/3, width, height/3);
  line(width*19/20, height*2/3, width, height*2/3);

  line(width/3, 0, width/3, height/20);
  line(width*2/3, 0, width*2/3, height/20);
  line(width/3, height*19/20, width/3, height);
  line(width*2/3, height*19/20, width*2/3, height);
}

any advice on setting up some audio responsive LEDs? the audio wouldn't be live. it's an mp3 or wav (ideally two files but i'll get there once i sort this out). any suggestions??? i would prefer to not use arduino unless it is much easier.

How do I make createCanvas() become responsive and scale to it's parent container div? In other words, how do I make it behave like a background image with this css? -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; background-size:contain; background-position:center; background-repeat: no-repeat; background-position:center center;

I also want it to be centered within the parent.

nabr,

Submission failed at Amazon. I uploaded the zip file for binary and identified the readme file (in the zip) for installer executable file.

Amazon's Reason : Your binary is rejected for not having a valid installer the user can find upon download. Please have all relevant components available for the user to install this software to their system.

I think I'm going to suspend uploading to Amazon for a while as not only that they do not have clarity on what is their executable but also that they are not very responsive.

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 

    var bodySize = 1.4;


    noFill();
    strokeWeight(4);

    curveVertex(200*bodySize, 200*bodySize);
    curveVertex(170*bodySize, 190*bodySize);
    curveVertex(165*bodySize, 170*bodySize);
    curveVertex(165*bodySize, 150*bodySize);
    curveVertex(170*bodySize, 125*bodySize);
    curveVertex(185*bodySize, 100*bodySize);
    curveVertex(215*bodySize, 80*bodySize);
    curveVertex(245*bodySize, 100*bodySize);
    curveVertex(255*bodySize, 130*bodySize);
    curveVertex(255*bodySize, 170*bodySize);
    curveVertex(240*bodySize, 195*bodySize);



    endShape();

  push();
    noFill();
    strokeWeight(2);
    arc(290,152,80,80,250,100);
    arc(320,240,50,50,0,1.1);
    arc(320,230,40,40,0,0.5);
    arc(298,165,71,75,4,5);
    arc(300,130,21,25,4,5);
    strokeWeight(1);
    arc(330,210,55,100,0,1);
    arc(340,180,25,190,0.5,1.3);
    arc(240,225,1,25,4,5);
    arc(250,255,15,15,2,3);


    strokeWeight(2);
    //ellipse(280,165,28,28); //Left Eye
    //ellipse(310,165,28,28);   //Right Eye
    //fill(0);
    //ellipse(278,162,3,3); //Left Eye
    //ellipse(315,167,3,3); //Left Pupil



  fill(255);
  ellipse(271, 168, 40,40);
  pvl = createVector(mouseX-100, mouseY-200);
  pvl.limit(10);
  fill(0);
  ellipse(271+pvl.x, 168+pvl.y, 10, 10);

  fill(255);
  ellipse(324, 168, 40, 40);
  pvr = createVector(mouseX-159, mouseY-200);
  pvr.limit(10);
  fill(0);
  ellipse(324+pvr.x, 168+pvr.y, 10, 10);

    ellipse(300,200,19,5);  
}

edit: added mouse tracking to eye's pupils; TY TfGuy44

My first attempt with p5js, and design isn't my strong suit. Needs some work still.. I can't easily enlarge or move it and am still figuring out how to make the pupils responsive. When I can figure it out I'll update & color, but if anyone has suggestions I am all ears!

Hi,

Fist time poster. Sorry it's a long one.

I am attempting to port over a sketch that I originally built on my Mac (1.6GHz core i5/8mb RAM), over to a RasPi2 and I am experiencing an unexpectedly dramatic loss in video performance. I'm looking for expectations, opinions, and any advice to get this thing working smoothly on a RasPi2. I get that the RasPi is obviously a much, much less powerful computer than my laptop, but gohai's SimpleCapture example worked so smoothly, that I hoped an OpenCV layer on top would also run smoothly. I tinkered with allocating more GPU memory and overclocking the Pi, but without any noticeable improvements.

The original script tracks faces and animates eyes to "watch" the viewer via a webcam. My original code is here, using Video and OpenCV libraries.

import gab.opencv.*;
import processing.video.*;
import java.awt.*;

Capture video;
OpenCV opencv;

float mouthLength = 50;
float mouthX = 120;
float mouthY = 175;
float leftPupilX;
float leftPupilY;
float rightPupilX;
float rightPupilY;
int radius = 40;   // Radius of white eyeball ellipse
float pupilSize = 20;

PVector leftEye = new PVector(100, 100);
PVector rightEye = new PVector(200, 100);

int x, y = 120;
float easing = 0.2;
int scaleFactor = 3;

int counter;

void setup() {
  size(960, 720);
  smooth();

  video = new Capture(this, 960/scaleFactor, 720/scaleFactor);
  opencv = new OpenCV(this, 960/scaleFactor, 720/scaleFactor);  
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);
  //opencv.loadCascade(OpenCV.CASCADE_PROFILEFACE);
  //opencv.loadCascade(OpenCV.CASCADE_EYE); 
  video.start();
  frameRate(24);
}

void draw() {
  background(255, 255, 0); // Yellow
  scale(scaleFactor);

  opencv.loadImage(video);
  opencv.flip(OpenCV.HORIZONTAL); // flip horizontally
  Rectangle[] faces = opencv.detect();
  println(faces.length);

  strokeWeight(3);

  leftPupilX = leftPupilX + (100 - leftPupilX) * easing;
  rightPupilX = rightPupilX + (200 - rightPupilX) * easing;
  leftPupilY = rightPupilY = leftPupilY + (100 - leftPupilY) * easing;


  for (int i = 0; i < faces.length; i++) {
    //println(faces[i].x + "," + faces[i].y);
    noFill();
    stroke(0, 255, 0); // face detection rectangle color
    rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);

    if (faces[i].x < 80 ) {
      leftPupilX = (leftPupilX + (faces[i].x - leftPupilX) * easing);// + (faces[i].width * 0.2);
      rightPupilX = leftPupilX + 100;
    } 

    if ( faces[i].x > 175) {
      rightPupilX = rightPupilX + (faces[i].x - rightPupilX) * easing;// + (faces[i].width * 0.2);
      leftPupilX = rightPupilX - 100;
    } 

    if ( (faces[i].y > 120) || (faces[i].y < 30) ) {
      leftPupilY = leftPupilY + (faces[i].y - leftPupilY) * easing;
      rightPupilY = rightPupilY + (faces[i].y - rightPupilY) * easing;
    }
  }

  // Mouth
  noFill();
  stroke(0);
  line(mouthX, mouthY, mouthX + mouthLength, mouthY);
  arc(mouthX-15, mouthY, 30, 30, radians(-30), radians(30));  // left cheek
  arc(mouthX+65, mouthY, 30, 30, radians(145), radians(205));  // right cheek

  // Eyes
  fill(255); // white
  ellipse(leftEye.x, leftEye.y, radius+25, radius + 25); //  left eyeball ellipse
  ellipse(rightEye.x, rightEye.y, radius+25, radius + 25); //  left eyeball ellipse

  PVector leftPupil = new PVector(leftPupilX, leftPupilY);
  if (dist(leftPupil.x, leftPupil.y, leftEye.x, leftEye.y) > radius/2) {
    leftPupil.sub(leftEye);
    leftPupil.normalize();
    leftPupil.mult(radius/2);
    leftPupil.add(leftEye);
  }

  PVector rightPupil = new PVector(rightPupilX, rightPupilY);
  if (dist(rightPupil.x, rightPupil.y, rightEye.x, rightEye.y) > radius/2) {
    rightPupil.sub(rightEye);
    rightPupil.normalize();
    rightPupil.mult(radius/2);
    rightPupil.add(rightEye);
  }

  // Actually draw the pupils
  noStroke();
  fill(0); // black pupil color
  ellipse(leftPupil.x, leftPupil.y, pupilSize, pupilSize); // new left pupil
  ellipse(rightPupil.x, rightPupil.y, pupilSize, pupilSize); // new right pupil

  counter ++;
  println(counter);
  if (counter > 195) {
    counter = 0;
  }
  if (counter >= 190 && counter < 195) {
    blink();
  }
}

void captureEvent(Capture c) {
  c.read();
}

void blink() {
  fill(255, 255, 0); // Yellow
  stroke(255, 255, 0);
  ellipse(leftEye.x, leftEye.y, radius+26, radius + 26); //  left eyeball ellipse
  ellipse(rightEye.x, rightEye.y, radius+26, radius + 26);
  stroke(0);
  noFill();
  line(67, leftEye.y, 133, leftEye.y);
  translate(100, 0);
  line(67, leftEye.y, 133, leftEye.y);
}

This version I modified for the RasPi2 with gohai's GLVideo library. I can get the sketch to run, but the tracking AND/OR responsive animation are incredibly slow. Unfortunately, to the point that it ruins the interactive nature of the work.

import gab.opencv.*;
import gohai.glvideo.*;
import java.awt.*;

GLCapture video;
OpenCV opencv;

float mouthLength = 50;
float mouthX = 120;
float mouthY = 175;
float leftPupilX;
float leftPupilY;
float rightPupilX;
float rightPupilY;
int radius = 40;   // Radius of white eyeball ellipse
float pupilSize = 20;

PVector leftEye = new PVector(100, 100);
PVector rightEye = new PVector(200, 100);

int x, y = 120;
float easing = 0.2;
int scaleFactor = 3;

int counter;

void setup() {
  size(960, 720, P2D);
  smooth();

  String[] devices = GLCapture.list();
  println("Devices:");
  printArray(devices);
  if (0 < devices.length) {
    String[] configs = GLCapture.configs(devices[0]);
    println("Configs:");
    printArray(configs);
  }

  video = new GLCapture(this, devices[0], 960/scaleFactor, 720/scaleFactor);
  opencv = new OpenCV(this, 960/scaleFactor, 720/scaleFactor);  
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);
  //opencv.loadCascade(OpenCV.CASCADE_PROFILEFACE);
  //opencv.loadCascade(OpenCV.CASCADE_EYE); 
  video.start();
  frameRate(24);
}

void draw() {
  background(255, 255, 0); // Yellow
  scale(scaleFactor);

  if (video.available()) {
    video.read();
    opencv.loadImage(video);
    opencv.flip(OpenCV.HORIZONTAL); // flip horizontally
    Rectangle[] faces = opencv.detect();
    //println(faces.length);

    strokeWeight(3);

    leftPupilX = leftPupilX + (100 - leftPupilX) * easing;
    rightPupilX = rightPupilX + (200 - rightPupilX) * easing;
    leftPupilY = rightPupilY = leftPupilY + (100 - leftPupilY) * easing;


    for (int i = 0; i < faces.length; i++) {
      //println(faces[i].x + "," + faces[i].y);
      //noFill();
      //stroke(0, 255, 0); // face detection rectangle color
      //rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);

      if (faces[i].x < 80 ) {
        leftPupilX = (leftPupilX + (faces[i].x - leftPupilX) * easing);// + (faces[i].width * 0.2);
        rightPupilX = leftPupilX + 100;
      } 

      if ( faces[i].x > 175) {
        rightPupilX = rightPupilX + (faces[i].x - rightPupilX) * easing;// + (faces[i].width * 0.2);
        leftPupilX = rightPupilX - 100;
      } 

      if ( (faces[i].y > 120) || (faces[i].y < 30) ) {
        leftPupilY = leftPupilY + (faces[i].y - leftPupilY) * easing;
        rightPupilY = rightPupilY + (faces[i].y - rightPupilY) * easing;
      }
    }

    // Mouth
    noFill();
    stroke(0);
    line(mouthX, mouthY, mouthX + mouthLength, mouthY);
    arc(mouthX-15, mouthY, 30, 30, radians(-30), radians(30));  // left cheek
    arc(mouthX+65, mouthY, 30, 30, radians(145), radians(205));  // right cheek

    // Eyes
    fill(255); // white
    ellipse(leftEye.x, leftEye.y, radius+25, radius + 25); //  left eyeball ellipse
    ellipse(rightEye.x, rightEye.y, radius+25, radius + 25); //  left eyeball ellipse

    PVector leftPupil = new PVector(leftPupilX, leftPupilY);
    if (dist(leftPupil.x, leftPupil.y, leftEye.x, leftEye.y) > radius/2) {
      leftPupil.sub(leftEye);
      leftPupil.normalize();
      leftPupil.mult(radius/2);
      leftPupil.add(leftEye);
    }

    PVector rightPupil = new PVector(rightPupilX, rightPupilY);
    if (dist(rightPupil.x, rightPupil.y, rightEye.x, rightEye.y) > radius/2) {
      rightPupil.sub(rightEye);
      rightPupil.normalize();
      rightPupil.mult(radius/2);
      rightPupil.add(rightEye);
    }

    // Actually draw the pupils
    noStroke();
    fill(0); // black pupil color
    ellipse(leftPupil.x, leftPupil.y, pupilSize, pupilSize); // new left pupil
    ellipse(rightPupil.x, rightPupil.y, pupilSize, pupilSize); // new right pupil

    counter ++;
    println(counter);
    if (counter > 195) {
      counter = 0;
    }
    if (counter >= 190 && counter < 195) {
      blink();
    }
  }
}

void captureEvent(GLCapture c) {
  c.read();
}

void blink() {
  fill(255, 255, 0); // Yellow
  stroke(255, 255, 0);
  ellipse(leftEye.x, leftEye.y, radius+26, radius + 26); //  left eyeball ellipse
  ellipse(rightEye.x, rightEye.y, radius+26, radius + 26);
  stroke(0);
  noFill();
  line(67, leftEye.y, 133, leftEye.y);
  translate(100, 0);
  line(67, leftEye.y, 133, leftEye.y);
}

The animation is super smooth on my Mac, but achingly slow and jerky on my RasPi2.

Any advice is greatly appreciated. Is the sketch just too much for a RasPi2 to run smoothly? Is my code just too inefficient? Is OpenCV an issue here? Ultimately, I want to make this a standalone gallery installation with a monitor and RasPi subtly attached, so I don't have to run it off an expensive laptop left alone in a gallery space.

First time poster on the forum and new processing coder here.

I made a sketch that makes text look like it's breathing (font grows and shrinks). It looked great when I was using windowWidth+windowHeight to define my canvas. However, I want to embed the sketch on my website within a div so I changed the canvas size to a fixed width+height.

Now for some reason the animation is ghosted. Every frame that gets drawn stays visible, so after one 'breath' cycle, the text just looks fatter and no longer looks like it's changing.

any idea why this is the case?

code below:

var LOW = 180.;
var HIGH = LOW+20.;
var count = LOW;
var increase = true;
var nav_size = 26;
var padding_top;

var holder_width = 500;
var holder_height = 250;

var a = 'a';
var dot = '.';
var t = 't';
var b = 'b';
var d = 'd';

var a_wid;
var dot_wid;
var t_wid;
var b_wid;
var d_wid;


function setup() {
  canvas = createCanvas(holder_width, holder_height);
  setUpWindow();

  console.log(LOW);
  console.log(HIGH);
  frameRate(5);

  textFont("Averia Sans Libre");
  textSize(HIGH);
  a_wid = textWidth(a);
  dot_wid = textWidth(dot);
  t_wid = textWidth(t);
  b_wid = textWidth(b);
  d_wid = textWidth(d);

  canvas.parent('sketch-holder');
}

function draw() {
  // responsive canvas environment
  var win_inner_width = HIGH*1.6;
  var padding_left = (holder_width - win_inner_width) / 2;

  // set text color and alignment
  fill(255);
  textAlign(CENTER);

  // easing function for text size
  var ease_val;
  var t_size;
  var ease = map(count,LOW,HIGH,0,1);

  if (ease < .5) {
    ease_val = 2*ease*ease;
  } else {
    ease_val = -1+(4-2*ease)*ease;
  }

  // set text size
  if (increase == true) {
    t_size = map(ease_val,0,1,LOW,HIGH);
  } else {
    t_size = map(ease_val,1,0,HIGH,LOW);
  }
  textSize(t_size);

  // write a.tbd to page
  text(a, padding_left, padding_top);
  text(dot, padding_left+HIGH*.4, padding_top);
  text("t", padding_left+HIGH*.65, padding_top);
  text("b", padding_left+HIGH*1.1, padding_top);
  text("d", padding_left+HIGH*1.6, padding_top);

  // increase text size counter
  if (increase == true) {
    count += 1;
  } else {
    count -= 1;
  }

  // reset counter if over high or under low
  if (count > HIGH) {
    increase = false;
  } else if (count < LOW) {
      increase = true;
  }

}

function setUpWindow() {
  if (windowWidth < 600) {
    LOW = 80.;
    HIGH = 100.;
    count = HIGH;
    nav_size = 18;
    padding_top = holder_height-10; 
  } else {
    LOW = 180.;
    HIGH = 200.;
    count = LOW;
    nav_size = 26;
    padding_top = holder_height-10; 
  }
}
// responsive canvas environment media queries
function windowResized() {
  resizeCanvas(holder_width, holder_height);
  setUpWindow();
}

I would guess you would have to do something like this:

rect(0, 0, width * 0.5, height * 0.5);

Now the square is half of your screenwidht and half of your screenheight, but when somebody has a non-square screen your rectangle wont be square, so something like this might work better:

rect(0, 0, width * 0.5, width * 0.5);

this way your square will always be a square altough if someone had a weird screen size of 800 * 200 the square will be larger then your screen is, since the width is 800 the height and the width of the square will become 400, (I dont think you would find screens like this often though)

and then of course if you want the rects to be below each other you could just add the height of the square + the height of the screen * 0.1 to also make that responsive.

I hope this messy answer somehow helps you

No, I would like to improve that but the problem is another one when I resize my screen the canvas dont resize, it only picks a size when the page is loaded and never again making it not responsive.

How can i make my scratch responsive for all devices, Big and small devices.

search is your friend... It often leads to an answer ;)