please format code with </> button * homework policy * asking questions
Hi all, I have a Processing sketch that I need to be converted to p5.js. I’ve never used p5 or javascript before so it has become a bit more involved than I hoped for. Could someone help me debug? Thank you in advance!
Original Processing code:
import nice.palettes.*; //I'm not sure if this library is
// available in p5 but not too important
ColorPalette palette;
int amount = 100;
tweetBot[] human = new tweetBot[amount];
void setup()
{
size(1000, 1000);
b2 = color(150);
b1 = color(0);
c1 = color(204, 102, 0);
c2 = color(0, 102, 153);
background(255);
palette = new ColorPalette(this);
printArray(palette.getPalette());
for (int i = 0; i < amount; i++){
human[i] = new tweetBot(random(10, 40),random(10, 40));
}
}
void draw()
{
background(255);
// frame background
//fill(15);
//rect(120, 100, 750, 20);
//rect(120, 750, 750, 20);
//rect(100, 742, 20, -616);
//rect(870, 742, 20, -616);
for (int i = 0; i < amount; i++){
human[i].step();
human[i].display();
}
}
}
class tweetBot {
// perlin movement var
float xS,yS;
float pTx, pTy;
int randoColor;
// blob var
float circlePoints = 260;
float rad = 30;
float time = 0;
float timePassed = .02;
float fuzzValue;
//the sweeter/meaner the tweet, the calmer/crazier the blob
// float fuzzInten = 15; // 0.1 to 30
// float fuzzAmp = 0.1; // 0.0 to 1.0
// MEAN
float fuzzInten = 30; // 0.1 to 30
float fuzzAmp = 0.0025; // 0.0 to 1.0
// kinda mean
// float fuzzInten = 20; // 0.1 to 30
// float fuzzAmp = .2; // 0.0 to 1.0
// eh
// float fuzzInten = 4; // 0.1 to 30
// float fuzzAmp = .1; // 0.0 to 1.0
// normal
// float fuzzInten = 30; // 0.1 to 30
// float fuzzAmp = .75; // 0.0 to 1.0
// nice
// float fuzzInten = .54; // 0.1 to 30
// float fuzzAmp = .46; // 0.0 to 1.0
// AMAZING
// float fuzzInten = .25; // 0.1 to 30
// float fuzzAmp = .42; // 0.0 to 1.0
tweetBot(){
pTx = 0;
pTy = 1000;
}
tweetBot(float x, float y){
pTx = x;
pTy = y;
randoColor = (int)random(4);
}
void step(){
xS = map(noise(pTx), 0, 1, 0, width);
yS = map(noise(pTy), 0, 1, 0, height);
pTx += 0.005;
pTy += 0.005;
}
void polygon(float x, float y, float rad, float circlePoints) {
float angle = TWO_PI / circlePoints;
// noiseDetail(3);
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
fuzzValue = map(noise(cos(a)*fuzzInten+1, sin(a)*fuzzInten+1, time),
0.0, 1.0, fuzzAmp, 1.0);
float sx = x + cos(a) * rad * fuzzValue;
float sy = y + sin(a) * rad * fuzzValue;
vertex(sx, sy);
}
endShape(CLOSE);
time += timePassed;
}
void display(){
fill(palette.colors[randoColor]);
noStroke();
// stroke(0);
polygon(xS, yS, rad, circlePoints);
}
}
p5 code that needs debugging:
// tweetWorld.js
var amount = 100;
let human = [];
function setup()
{
createCanvas(1000, 1000);
purple = color(101, 81, 147)
bluish = color(109, 128, 172)
reddish = color(252, 71, 51)
greenish = color(131, 153, 97)
brown = color(181, 98, 69)
colors = [purple, bluish, greenish, reddish, brown];
background(255);
for (var i = 0; i < amount; i++){
human.push(new tweetBot(random(10, 40),random(10, 40)));
}
}
function draw()
{
background(255);
// frame background
//fill(15);
//rect(120, 100, 750, 20);
//rect(120, 750, 750, 20);
//rect(100, 742, 20, -616);
//rect(870, 742, 20, -616);
for (var i = 0; i < amount; i++){
human[i].step();
human[i].display();
}
}
// tweetBot.js
class tweetBot {
// MEAN
// var fuzzInten = 30; // 0.1 to 30
// var fuzzAmp = 0.0025; // 0.0 to 1.0
// kinda mean
// float fuzzInten = 20; // 0.1 to 30
// float fuzzAmp = .2; // 0.0 to 1.0
// eh
// float fuzzInten = 4; // 0.1 to 30
// float fuzzAmp = .1; // 0.0 to 1.0
// normal
// float fuzzInten = 30; // 0.1 to 30
// float fuzzAmp = .75; // 0.0 to 1.0
// nice
// float fuzzInten = .54; // 0.1 to 30
// float fuzzAmp = .46; // 0.0 to 1.0
// AMAZING
// float fuzzInten = .25; // 0.1 to 30
// float fuzzAmp = .42; // 0.0 to 1.0
tweetBot(){
pTx = 0;
pTy = 1000;
}
tweetBot(x, y){
pTx = x;
pTy = y;
randoColor = random(4);
}
step(){
// perlin movement var
var xS;
var yS;
var pTx, pTy;
var randoColor;
xS = map(noise(pTx), 0, 1, 0, width);
yS = map(noise(pTy), 0, 1, 0, height);
pTx += 0.005;
pTy += 0.005;
}
polygon(x, y, rad, circlePoints) {
// blob var
var circlePoints = 260;
var rad = 30;
var time = 0;
var timePassed = .02;
var fuzzValue;
//the sweeter/meaner the tweet, the calmer/crazier the blob
var fuzzInten = 15; // 0.1 to 30
var fuzzAmp = 0.1; // 0.0 to 1.0
var angle = TWO_PI / circlePoints;
// noiseDetail(3);
beginShape();
for (var a = 0; a < TWO_PI; a += angle) {
fuzzValue = map(noise(cos(a)*fuzzInten+1,sin(a)*fuzzInten+1, time),
0.0, 1.0, fuzzAmp, 1.0);
var sx = x + cos(a) * rad * fuzzValue;
var sy = y + sin(a) * rad * fuzzValue;
vertex(sx, sy);
}
endShape(CLOSE);
time += timePassed;
}
display(){
fill(colors[randoColor]);
noStroke();
// stroke(0);
polygon(xS, yS, rad, circlePoints);
}
}
for those wondering, I’m working on a project that uses the twitter api and gives sediment values to each tweet I receive, stores the corresponding data in a db, and then eventually pulled to p5 and represented as one of these objects.
