Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

How to create this in p5.js mode

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.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

• Have you read through the P5.js reference?

• 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;}
}

}

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