How to create this in p5.js mode

dyrra

Hi, I have this script in java mode

int num=10, frames = 150;
float theta;

void setup() {
  size(500, 500);
}


void draw() {
  background(255);
  stroke(60);
  noFill();

  for (int i=0; i<num; i++) {
    float sz = i*25;
    float sw = map(sin(theta+TWO_PI/num*i), -1, 5, 1, 20);
    strokeWeight(sw);
    //translate(width/2, height/2);
    polygon(width/2, height/2, sz, 5);
  }

  if (mousePressed == true) {
    theta += TWO_PI/frames;
  } else {
    theta = 0.45;

}
  theta += TWO_PI/frames;

 } 

void polygon(float x, float y, float radius, int npoints) {
  float angle = TWO_PI / npoints;
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius;
    float sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I need to make same thing in processing and I dont know how to map the strokeweight and if mouse is pressed function:

function Pent( stroke_val, radius, max_rotation_speed, stroke_w ) {
  this.stk = stroke_val;
  this.rad = radius;
  this.ro = 0;
  this.dro = max_rotation_speed;
  this.stkw = stroke_w
  this.draw = function() {

    stroke( this.stk );
    strokeWeight(this.stkw);
    noFill();
    var angle = TWO_PI / 5; 
    var theta;
    var frames = 150;
    var num=10
    beginShape();
    for (var a = 0; a < TWO_PI; a += angle) { 
      var sx = cos(a) * this.rad; 
      var sy = sin(a) * this.rad;       
      vertex(sx, sy);
    } 
    endShape(CLOSE);
  };
}

var pents = [];

function setup() { 
  createCanvas(windowWidth, windowHeight);
  for( var i = 0; i < 9; i++ ) pents.push( new Pent(230-25*i, 500-50*i, 10-i, 2*i ) ); 
  smooth();
}

function draw() { 
  background(255); 
  translate(windowWidth/2, windowHeight/2); 
//  this.stkw = map(sin(theta+TWO_PI/num*i), -1, 5, 1, 20);
  for( var i = 0; i < 9; i++ ) pents[i].draw();
}

Thank you for any help

KevinWorkman

Have you read through the P5.js reference?

dyrra

Yes, I have. I manage to make it somehow, but it is not as nice as it should be. I am completely new in p5.js and almost new in programming, so the references arent very helpful in more complex structure...

var w = 1;
var w = 1;
var w = 1;
var w = 1;

var mode = 1;

function setup() { 
  createCanvas(windowWidth, windowHeight);

}

function draw() { 
  background(255); 
  translate(windowWidth/2, windowHeight/2); 
  scale(2,2);

  for (var i = 0; i < 5; i++) {
  noFill();
  scale(1.5,1.5);
  translate(-19,-16);
  strokeWeight(w+i);
  beginShape();
    vertex(30, 20);
    vertex(85, 20);
    vertex(85, 75);
    vertex(30, 75);
  endShape(CLOSE);
  }

  //if (mode == 1){w = w+0.5;}
  //if (mode == 2){w = w-0.5;}
  if (w == 5){mode = 2;}
  if (w == 1) {mode = 1;}

  if (mouseIsPressed) {
    if (mode == 1){w = w+0.5;}
    if (mode == 2){w = w-0.5;}
  }

}

dyrra

But it think I can do it this simple way.. Thank you.