Converted Processing to P5.js but its still not working

Processing Coding Questions
1

Hi there,

I have tried to convert these two sketches to P5.js but it still doesn’t seem to work.

I’m new to it all so can figure out what else needs to be changed.

Can someone please help. :slight_smile:

Sketch 1.

var location;  // Location of shape
var velocity;  // Velocity of shape
var gravity;   // Gravity acts at the shape's acceleration

function setup() {
  createCanvas(640,360);
  location = createVector(100,100);
  velocity = (1.5,2.1);
  gravity = (0,0.2);

}

function draw() {
  background(0);
  
  // Add velocity to the location.
  location.add(velocity);
  // Add gravity to velocity
  velocity.add(gravity);
  
  // Bounce off edges
  if ((location.x > width) || (location.x < 0)) {
    velocity.x = velocity.x * -1;
  }
  if (location.y > height) {
    // We're reducing velocity ever so slightly 
    // when it hits the bottom of the window
    velocity.y = velocity.y * -0.95; 
    location.y = height;
  }

  // Display circle at location vector
  stroke(255);
  strokeWeight(2);
  fill(127);
  ellipse(location.x,location.y,48,48);
}

Sketch 2.

var message = "dddddddddddddddddddddddddddddddddddddddddddd";
char[] messageAsvars = message.tovarArray();
var charCount = messageAsvars.length;
var charCountToStep = 1.0 / var(charCount);

var ap0x, ap0y, 
  cp0x, cp0y, 
  cp1x, cp1y, 
  ap1x, ap1y;

function setup() {
  createCanvas(1024, 512);
  smooth(8);
  randomizePovars();
  textSize(10);
  textAlign(CENTER, CENTER);
  textMode(MODEL);
}

function draw() {
  background(#2E3B97);
  noFill();
  stroke(#2E3B97);
  bezier(ap0x, ap0y, 
    cp0x, cp0y, 
    cp1x, cp1y, 
    ap1x, ap1y);

  noStroke();
  fill(#FBE44D);
  
  var step0 = frameCount * 0.0;
  
  for (var i = 0; i < charCount; ++i) {
    var step1 = i * charCountToStep;
    var step2 = (step0 + step1) % 2.0;
    
    var x = bezierPovar(ap0x, cp0x, cp1x, ap1x, step2);
    var y = bezierPovar(ap0y, cp0y, cp1y, ap1y, step2);
    
    var tanx = bezierTangent(ap0x, cp0x, cp1x, ap1x, step2);
    var tany = bezierTangent(ap0y, cp0y, cp1y, ap1y, step2);
    
    var angle = atan2(tany, tanx);

    push();
    translate(x, y);
    rotate(angle);
    text(messageAsvars[i], 0.0, 0.0);
    pop();
  }
}

function mouseMoved() {
  randomizePovars();
}

function randomizePovars() {
  var halfw = width * 0.5;
  var halfh = height * 0.5;
  ap0x = random(0.0, halfw);
  cp0x = random(0.0, width);
  cp1x = random(0.0, width);
  ap1x = random(halfw, width);

  ap0y = random(0.0, halfh);
  cp0y = random(0.0, height);
  cp1y = random(0.0, height);
  ap1y = random(halfh, height);
}
2

Where are those Java Mode sketches? Do you have them? Do they actually work? :roll_eyes:

3

Hey mate,

Yeah they work…?

These are the original Processing Sketches…

Thanks for the help!

Sketch 1.

PVector location;  
PVector velocity;  
PVector gravity;   

void setup() {
  size(640,360);
  location = new PVector(100,100);
  velocity = new PVector(1.5,2.1);
  gravity = new PVector(0,0.2);

}

void draw() {
  background(0);
  
 
  location.add(velocity);
 
  velocity.add(gravity);
  
 
  if ((location.x > width) || (location.x < 0)) {
    velocity.x = velocity.x * -1;
  }
  if (location.y > height) {
   
    velocity.y = velocity.y * -0.95; 
    location.y = height;
  }

  
  stroke(255);
  strokeWeight(2);
  fill(127);
  ellipse(location.x,location.y,48,48);
}

Sketch 2.

String message = "Lorem ipsum dolor sit amet,"
  + "consectetur adipiscing elit.";
char[] messageAsChars = message.toCharArray();
int charCount = messageAsChars.length;
float charCountToStep = 1/ float(charCount);

float ap0x, ap0y, 
  cp0x, cp0y, 
  cp1x, cp1y, 
  ap1x, ap1y;

void setup() {
  size(1024, 512);
  smooth(8);
  randomizePoints();
  textSize(10);
  textAlign(CENTER, CENTER);
  textMode(MODEL);
}

void draw() {
  background(255);
  noFill();
  stroke(0xff007fff);
  bezier(ap0x, ap0y, 
    cp0x, cp0y, 
    cp1x, cp1y, 
    ap1x, ap1y);

  noStroke();
  fill(0xff000000);
  
  float step0 = frameCount-1 * 0.0;
  
  for (int i = 0; i < charCount; ++i) {
    float step1 = i * charCountToStep;
    float step2 = (step0 + step1) % 1.0;
    
    float x = bezierPoint(ap0x, cp0x, cp1x, ap1x, step2);
    float y = bezierPoint(ap0y, cp0y, cp1y, ap1y, step2);
    
    float tanx = bezierTangent(ap0x, cp0x, cp1x, ap1x, step2);
    float tany = bezierTangent(ap0y, cp0y, cp1y, ap1y, step2);
    
    float angle = atan2(tany, tanx);

    pushMatrix();
    translate(x, y);
    rotate(angle);
    text(messageAsChars[i], 0.0, 0.0);
    popMatrix();
  }
}

void mouseMoved() {
  randomizePoints();
}

void randomizePoints() {
  float halfw = width * 0.5;
  float halfh = height * 0.5;
  ap0x = random(0.0, halfw);
  cp0x = random(0.0, width);
  cp1x = random(0.0, width);
  ap1x = random(halfw, width);

  ap0y = random(0.0, halfh);
  cp0y = random(0.0, height);
  cp1y = random(0.0, height);
  ap1y = random(halfh, height);
}
4

Found 2 problems on the 1st sketch:

  1. You forgot to use createVector for velocity & gravity: :face_with_raised_eyebrow: 
location = createVector(100,100);
velocity = (1.5,2.1);
gravity = (0,0.2);

Should be:

location = createVector(100,100);
velocity = createVector(1.5,2.1);
gravity = createVector(0,0.2);
  1. Browsers already got property location. So we can’t use it: :open_mouth:
    Developer.Mozilla.org/en-US/docs/Web/API/Window/location

So I simply renamed it to loc. Here’s your fixed converted 1st sketch: :cowboy_hat_face:

"use strict";

let loc; // Location of shape
let vel; // Velocity of shape
let grav; // Gravity acts at the shape's acceleration

function setup() {
  createCanvas(640, 360);

  loc = createVector(100, 100);
  vel = createVector(1.5, 2.1);
  grav = createVector(0, 0.2);

  stroke(255);
  strokeWeight(2);
  fill(127);
}

function draw() {
  background(0);

  // Add velocity to the location.
  loc.add(vel);
  // Add gravity to velocity
  vel.add(grav);

  // Bounce off edges
  if ((loc.x > width) || (loc.x < 0)) {
    vel.x = vel.x * -1;
  }

  if (loc.y > height) {
    // We're reducing velocity ever so slightly
    // when it hits the bottom of the window
    vel.y = vel.y * -0.95;
    loc.y = height;
  }

  // Display circle at location vector
  ellipse(loc.x, loc.y, 48, 48);
}
2 Likes
5

No need to convert a String to an array in JS, b/c we can access strings using the [] operator there! :star_struck:

6 
type or paste code here

Hey, thanks for the help!

Sorry to be a pain, but can you explain a bit more what you mean by this ?