Processing - Four Esigners

Introduction

Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology.

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

Our Work

Work 1

In the first work, we did one demo in Processing which can use mouse to interactive.

We have designed a pinball game, which named Rebound Ball. The player can use the mouse to click on the screen and the game will generate a small ball at the location where the player clicked and make it bounce in a random direction. When the generated ball collides with other balls on the screen, it will produce different collision states according to the kinematics principle. When the ball bounces to the border of the screen, it will also bounce back according to the kinematic principle.

1.Install the p5.js language in Processing. Firstly, We have downloaded the p5.js library file from the official website. Secondly, Open the Processing software and import the p5.js library file into the Contribution Manager. Finally, adjust Processing’s input language to p5.js to program in that language.

2.Write programs using the p5.js language. In the writing process, first define the upper limit of the number of balls in the game, then define the kinematic and mechanical environment of the game (including the properties of gravity, friction, etc.), and finally write the rules of the game.

let balls = [];
let ballsMax = 300;
let grav = 0.5,
    fric = 0.999,
    rebn = 0.05;
function setup() {
  createCanvas(windowWidth, windowHeight);
  // spawns 30 balls of random size and vectors
  for (let i = 0; i < 30; i++) {
    let x = random(0, width),
        y = random(0, height);
    balls.push({
      x: x,
      y: y,
      px: x - random(-10, 10),
      py: y - random(-10, 10),
      s: random(65, 260),
    });
  }
}
// main function for updating and displaying the balls
function updateBall() {
  for (let i = 0; i < balls.length; i++) {
    //find velocity and apply air friction 
    let b = balls[i],
        vx = (b.x - b.px) * fric,
        vy = (b.y - b.py) * fric;
    b.px = b.x;
    b.py = b.y;
    vy += grav;//apply gravity 
    b.x += vx;
    b.y += vy;
    // if ball is outside the x-bounds
    if (b.x < 0 || b.x > width) {
      b.x = b.x > width ? width : b.x < 0 ? 0 : b.x;
      b.px = b.x + vx * rebn;
    }
    // if ball is outside the y-bounds
    if (b.y < 0 || b.y > height) {
      b.y = b.y > height ? height : b.y < 0 ? 0 : b.y;
      b.py = b.y + vy * rebn;
    }
    for (let j = 0; j < balls.length; j++) {
      let b2 = balls[j],
          d = dist(b.x, b.y, b2.x, b2.y), // distance between the 2 balls
          bc = (b.s + b2.s) / 2; // normal of the 2 balls size
      //if the distance is less then the normal, and ball is not itself
      if (d <= bc && i != j) {
        let rebnp = (bc - d) / d / 2,
            ofx = (b2.x - b.x) * rebnp,
            ofy = (b2.y - b.y) * rebnp;
        b.x -= ofx;
        b.y -= ofy;
        b2.x += ofx;
        b2.y += ofy;
      }
    }
    ellipse(b.x, b.y, b.s, b.s);
  }
}
function draw() {
  background(255);
  fill(0);
  updateBall();
}
// push a new ball when mouse is clicked
function mouseReleased() {
  if (balls.length >= ballsMax) {
    return;
  }
  balls.push({
    x: mouseX,
    y: mouseY,
    px: mouseX + random(-10, 10),
    py: mouseY + random(-10, 10),
    s: random(65, 160)
  });
}

Wrok 2

In the second work, we did one demo in Processing and Arduino, which can communicate with each other.

Human body pyroelectric sensor controls the movement of small square in Processing. This case is based on the pyroelectric sensor of human body, and the square in Processing is controlled to move left and right through arduino output signal, so as to realize the interaction between software.

In arduino, the Gao Diping signal in human pyroelectric sensor is transmitted through serial port.

int value = 0;

void setup() {
  Serial.begin(9600);
}

void loop() {
  value = analogRead(A0);

  Serial.println(value);
  delay(500);
  value = analogRead(A1);
  
  if (value < 700) { //top
    Serial.write(1);
    delay(20);
  }
  else if (value > 700) { //bottom
    Serial.write(0);
    delay(20);
  }
  delay(20);
}

Import the Serial library in Processing to accept the serial signal transmitted by arduino. Set the screen size and serial port information in setup. Then set the position of the square according to the signal and draw the square. In the actual picture, there will be an animation of the square moving.

 import processing.serial.*;
Serial myPort;
int val;
int x=0;

void setup() {
  size(800, 800);
  background(200);
  myPort = new Serial (this, Serial.list()[0], 9600);
}

void draw() {
  if (myPort.available()>0) {
    val=myPort.read();
    print(val);
  }
  
  background(200);
  fill(100);
  noStroke();
  
  if (val==0) {  //down
    x++;
  } else if (val==1) {  //up
    x--;
  } 
  
  if (x<0) {
    x=width;
  } else if (x>width) {
    x=0;
  }


  rect(x, 30, 30, 30);
}