Kind of loop, processing to P5js

DFRgth456 · January 2017

Hello there, sorry for that poor inventive title, I kind a french newbee. I coded something on processing, and I would like to do the same on P5js to be embed in a website. there is slidervalue, I took the pacman sketch from Martin Schneider. It's a thing to create bezier curve several times in a raw, with GUI, but the loop seems not work. A piece of the processing sketch :

void draw() { background(255);
pushMatrix();
 translate(50,300);
for (int y=0; y<50; y+=3){
  
line_(y); }  //THE LOOP of the function 
popMatrix();
void line_(float y_){ pushMatrix(); noFill(); stroke(0); strokeWeight(GRAISSE); bezier(4, 20, sliderValue, 50, 100, 40, 60, y_);

popMatrix();

and what I did on P5 js (there is no error but does not work) :

// gui params var sliderValue = 100; var myColor = 'blue';

var gui;

function setup() {

createCanvas(windowWidth, windowHeight);

// Create the GUI sliderRange(0, 90, 1); gui = createGui('p5.gui'); gui.addGlobals('myColor', 'sliderValue');
// Only call draw when then gui is changed noLoop();
}

function draw() {
background(255);
pushMatrix(); translate(50,300); for(var y =0; i < 50; y++){ //I CHANGE INT by VAR, because of a error
line_(y); } popMatrix();
}

function line_(y_){ pushMatrix(); noFill(); stroke(0); bezier(4, 20, sliderValue, 50, 100, 40, 60, y_); popMatrix(); }

I think it's pretty messy and blurry for you, but if you have an idea... Thanks a lot !

doxanthropos · January 2017

There are some things that obviously come from the Processing version, that won't work in p5js like that:

popMatrix() is just pop()

pushMatrix() is push()

There is no "createGui" in p5js, but for your purposes, you might use "createSlider()" from the additional "p5dom" library.

Than there is a typo in your for-loop: the condition reads "i<50" but i is not defined anywhere. You probably want to change that to y.

GoToLoop · January 2017

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Howdy, Stranger!

Categories

In this Discussion

Kind of loop, processing to P5js

Answers