› ›

simple p3 sketch to p5.js

JanoschJanosch
edited April 2017 in p5.js Programming Questions

**Hey there, I'm quite new to coding, i started with processing half a year ago, here i'm trying to get a p3 sketch working in p5.js,

I replaced ints and floats by "var", PVector by "Vector" and "createVector". The editor didn't return any error but still it's not working.

It didn't seem that hard to me and it probably isn't, heres the working sketch in p3: Any suggestions?**

int numPoints = 10;
PVector[] points = new PVector[numPoints];
PVector[] targetPoints = new PVector[numPoints]; 
float ease = 0.07;

void setup()
{
  size(displayWidth, displayHeight);

  for(int i = 0; i < numPoints; i++) 
  {
    points[i] = new PVector(random(width), random(height));
    targetPoints[i] = new PVector(random(width), random(height));

  }
}

void draw()  {
  smooth();
  background(243,239,232,1);
  fill(255, 0, 0, 100);
  noStroke();
  strokeWeight(0.5);

  for(int i = 0; i < numPoints; i++) {
    float xdist = targetPoints[i].x - points[i].x;
    float ydist = targetPoints[i].y - points[i].y;



    points[i].x += xdist/2 * ease;
    points[i].y += ydist/2 * ease;

    float distance = xdist/2*xdist/2 + ydist/2*ydist/2;
    if(distance <= 20)
    {
      points[i].x = targetPoints[i].x;
      points[i].y = targetPoints[i].y;

      targetPoints[i].x = (mouseX + random(-150, 150));
      targetPoints[i].y = (mouseY + random(-150, 150));
    }


    fill(205,106,104, 200 - distance*ease);     
    ellipse(points[i].x, points[i].y, 10, 10);

  }

  for(int i = 0; i < numPoints - 1; i++)
  {
    for(int j = i + 1; j < numPoints; j++)
    {
      float dst = dist( points[i].x, points[i].y, points[j].x, points[j].y );
                if ( dst < 255 ) {
                    stroke( 205,106,104, 255 - dst );
      line(points[i].x, points[i].y, points[j].x, points[j].y);
      }
    }
  }
}
Tagged:

Best Answers

Answers

  • GoToLoopGoToLoop
    Answer ✓

    https://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text
    https://GitHub.com/processing/p5.js/wiki/Processing-transition

  • BarbaraAlmeidaBarbaraAlmeida
    Answer ✓

    It's easier if you also post the one you've tried to convert so we can see if you forgot something.

    I've tried to convert to p5.js and it seems to work fine. What do you mean by it's not working, it's not drawing anything or the result is different from the Processing one?

    If the result is different it's probably because of the background alpha.

    On processing, background replaces all of the pixels with the chosen color, so it will always cover everything that was on the screen. And it isn't possible to apply transparency to the main drawing surface so the 1 is not doing anything.

    On p5.js, background covers all of the pixels with the chosen color, so if you apply transparency it won't completely cover what was on the screen.

    By the way, smooth() is active by default on p5.js so you don't need it. And it should be right after size on Processing 3.

  • JanoschJanosch

    Hey, thanks for the detailed answer, i'm suretheres a lot of mistakes in what i tried:

    var numPoints = 10;
var points = numPoints;
var targetPoints = numPoints; 
var ease = 0.07;

function setup()
{
  createCanvas(800, 600);

  for(var i = 0; i < numPoints; i++) 
  {
    points[i] = createVector(random(width), random(height));
    targetPoints[i] = createVector(random(width), random(height));

  }
}

function draw()
{
  background(243,239,232);
  fill(255, 0, 0, 100);
  //rect(200 +dim, 0, width, height);
  noStroke();
  strokeWeight(0.5);

  for(var i = 0; i < numPoints; i++)
  {
    var xdist = targetPoints[i].x - points[i].x;
    var ydist = targetPoints[i].y - points[i].y;



    points[i].x += xdist/2 * ease;
    points[i].y += ydist/2 * ease;

    var distance = xdist/2*xdist/2 + ydist/2*ydist/2;
    if(distance <= 20)
    {
      points[i].x = targetPoints[i].x;
      points[i].y = targetPoints[i].y;

      targetPoints[i].x = (mouseX + random(-150, 150));
      targetPoints[i].y = (mouseY + random(-150, 150));
    }


    fill(205,106,104, 200 - distance*ease);     
    ellipse(points[i].x, points[i].y, 10, 10);

  }

  for(var i = 0; i < numPoints - 1; i++)
  {
    for(var j = i + 1; j < numPoints; j++)
    {
      var dst = dist( points[i].x, points[i].y, points[j].x, points[j].y );
                if ( dst < 255 ) {
                    stroke( 205,106,104, 255 - dst );
      line(points[i].x, points[i].y, points[j].x, points[j].y);
      }
    }
  }
}
  • JanoschJanosch

    i actually wasn't sure how to fix the first 4 lines

  • JanoschJanosch

    could you show me the version you did?

  • BarbaraAlmeidaBarbaraAlmeida
    Answer ✓

    Just change lines 2 and 3 to:

    var points = [];
var targetPoints = [];

    It will create the variables as empty arrays.

  • GoToLoopGoToLoop
    edited April 2016

    Well, I've made some tweaks at the original Java Mode sketch. You can watch it online below: =P~
    http://studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk

    /**
 * Conglomerate of Points (v2.01)
 * Janosch & GoToLoop (2016-Feb-01)
 *
 * forum.Processing.org/two/discussion/14709/simple-p3-sketch-to-p5-js
 * studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk
 *
 * p5js.ProcessingTogether.com/sp/pad/export/ro.CYuAGs4xyhzhKu
 * CodePen.io/anon/pen/ZQjQmK?editors=0010#0
 */

static final float EASE = .07;
static final int QTY = 10, DIAM = 10, FAR = 0xFF, NEAR = 20, AWAY = 150;
final PVector[] points = new PVector[QTY], tPoints = new PVector[QTY];

void setup() {
  size(1000, 650, 1/2 != 1/2.? FX2D : JAVA2D);
  smooth(4);
  frameRate(60);

  strokeWeight(.5);
  colorMode(RGB, FAR);
  ellipseMode(CENTER);

  for (int i = 0; i < QTY; ++i) {
    points[i]  = new PVector(random(width), random(height));
    tPoints[i] = new PVector(random(width), random(height));
  }
}

void draw() {
  background(243, 239, 232);

  for (int i = 0; i < QTY; ++i) {
    final float xdist = tPoints[i].x - points[i].x;
    final float ydist = tPoints[i].y - points[i].y;

    final float x = points[i].x += EASE * .5 * xdist;
    final float y = points[i].y += EASE * .5 * ydist;

    for (int j = i + 1; j < QTY; ++j) {
      final float dst = dist(x, y, points[j].x, points[j].y);

      if (dst < FAR) {
        stroke(205, 106, 104, FAR - dst);
        line(x, y, points[j].x, points[j].y);
      }
    }

    final float distance = .5 * (xdist*xdist + ydist*ydist);

    noStroke();
    fill(205, 106, 104, 200 - distance*EASE);     
    ellipse(x, y, DIAM, DIAM);

    if (distance <= NEAR) {
      points[i].set(tPoints[i]);

      tPoints[i].x = mouseX + random(-AWAY, AWAY);
      tPoints[i].y = mouseY + random(-AWAY, AWAY);
    }
  }
}
  • GoToLoopGoToLoop
    edited April 2016

    Just finished transpiling my tweaked version to p5.js. You can watch it at both these links: :-bd

    1. http://p5js.SketchPad.cc/sp/pad/view/ro.$V3VWYDTmRb/latest
    2. http://CodePen.io/anon/pen/ZQjQmK?editors=0010#0
    <script src=http://p5js.org/js/p5.min.js async></script>

<script>

/**
 * Conglomerate of Points (v2.01)
 * Janosch & GoToLoop (2016-Feb-01)
 *
 * forum.Processing.org/two/discussion/14709/simple-p3-sketch-to-p5-js
 * studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk
 *
 * p5js.ProcessingTogether.com/sp/pad/export/ro.CYuAGs4xyhzhKu
 * CodePen.io/anon/pen/ZQjQmK?editors=0010#0
 */

"use strict";

const EASE = .07, QTY = 10, DIAM = 10, FAR = 0xFF, NEAR = 20, AWAY = 150;
const points = Array(QTY), tPoints = Array(QTY);

function setup() {
  createCanvas(1000, 650);
  strokeWeight(.5).colorMode(RGB, FAR).ellipseMode(CENTER);

  for (let i = 0; i < QTY; ++i) {
    points[i]  = createVector(random(width), random(height));
    tPoints[i] = createVector(random(width), random(height));
  }
}

function draw() {
  background(243, 239, 232);

  for (let i = 0; i < QTY; ++i) {
    const xdist = tPoints[i].x - points[i].x;
    const ydist = tPoints[i].y - points[i].y;

    const x = points[i].x += EASE * .5 * xdist;
    const y = points[i].y += EASE * .5 * ydist;

    for (let j = i + 1; j < QTY; ++j) {
      const dst = dist(x, y, points[j].x, points[j].y);

      if (dst < FAR) {
        stroke(205, 106, 104, FAR - dst);
        line(x, y, points[j].x, points[j].y);
      }
    }

    const distance = .5 * (xdist*xdist + ydist*ydist);

    noStroke();
    fill(205, 106, 104, 200 - distance*EASE);     
    ellipse(x, y, DIAM, DIAM);

    if (distance <= NEAR) {
      points[i].set(tPoints[i]);

      tPoints[i].x = mouseX + random(-AWAY, AWAY);
      tPoints[i].y = mouseY + random(-AWAY, AWAY);
    }
  }
}

</script>
  • GoToLoopGoToLoop
    edited April 2016

    And lastly, for completeness' sake, the same sketch now in Python Mode: >-)

    ###
 # Conglomerate of Points (v2.01)
 # Janosch & GoToLoop (2016-Feb-01)
 #
 # forum.Processing.org/two/discussion/14709/simple-p3-sketch-to-p5-js
 # studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk
 #
 # p5js.ProcessingTogether.com/sp/pad/export/ro.CYuAGs4xyhzhKu
 # CodePen.io/anon/pen/ZQjQmK?editors=0010#0
###

QTY = 10; DIAM = 10; FAR = 0xFF; NEAR = 20; AWAY = 150; EASE = .07
QTY_RANGE = tuple(xrange(QTY))

def setup():
    size(1000, 650, FX2D if 1/2 != 1/2. else JAVA2D)
    smooth(4)
    frameRate(60)

    strokeWeight(.5)
    colorMode(RGB, FAR)
    ellipseMode(CENTER)

    global points, tPoints
    points  = tuple(PVector(random(width), random(height)) for v in QTY_RANGE)
    tPoints = tuple(PVector(random(width), random(height)) for v in QTY_RANGE)


def draw():
    background(243, 239, 232)

    for i in QTY_RANGE:
        xdist = tPoints[i].x - points[i].x
        ydist = tPoints[i].y - points[i].y

        points[i].x += EASE * .5 * xdist
        points[i].y += EASE * .5 * ydist

        x, y = points[i].x, points[i].y

        for j in QTY_RANGE[i+1:]:
            dst = dist(x, y, points[j].x, points[j].y)

            if dst < FAR:
                stroke(205, 106, 104, FAR - dst)
                line(x, y, points[j].x, points[j].y)

        distance = .5 * (xdist*xdist + ydist*ydist)

        noStroke()
        fill(205, 106, 104, 200 - distance*EASE)
        ellipse(x, y, DIAM, DIAM)

        if distance <= NEAR:
            points[i].set(tPoints[i])

            tPoints[i].x = mouseX + random(-AWAY, AWAY)
            tPoints[i].y = mouseY + random(-AWAY, AWAY)
  • JanoschJanosch
    edited February 2016

    Dude, this is really cool, thanks! Still a bit embarrassing considering the fact that it took me two weeks to make this (my first) working p3 sketch.

  • JanoschJanosch

    Hey Barbara, thanks for the detailed suggestions, it's really constructive, i'll try it out now.

Sign In or Register to comment.