Convert Processing to p5.js

p5.js Coding Questions
1

Can’t figure out why some code doesn’t work… I highlighted what exactly doesn’t work in the code below…

Please please help me to make the code working*

/* @pjs preload="emma.jpg", "obama.jpg", "clint.jpg"; */

var maxTime = 400;
var strokesPerFrame = 25;

// Add your image here and on line 1 to preload it properly.
// Works best with images that don't exceed 700px.
**String[] imgNames = {"emma.jpg","obama.jpg", "clint.jpg"};**

**PImage img;**
var imgIndex = -1;
let brightnessShift;

function setup() {
  size(950, 700);
  colorMode(HSB, 255);
  nextImage();
}

function draw() {
  translate(width/2, height/2);
  
for (int i = 0; i < strokesPerFrame; i++) {
// Pick a random pixel.
var index = int(random(img.width*img.height));
		
// Get pixel's color and coordinates.
color = img.pixels[index];
pixelColor = color(red(pixelColor), green(pixelColor), blue(pixelColor), 255);

var x = index%img.width;
var y = index/img.width;
		
// Move image to center canvas.
pushMatrix();
translate(x-img.width/2, y-img.height/2);
		
if (frameCount % 5 == 0) {
// Paint big dots once in a while.

//this part doesn’t work

paintDot(pixelColor, (int)random(2, 20)*map(frameCount, 0, maxTime, 1, 0.5));
}
else {
	// Paint a stroke.
paintStroke(map(frameCount, 0, maxTime, 40, 5), pixelColor, (int)random(2, 8)*map(frameCount, 0, maxTime, 1, 0.1));   }

//Until here

popMatrix();
}
	
// Stop drawing once it exceeds the time.
 if (frameCount > maxTime) {
 noLoop();
 }
}


function mousePressed() {
  nextImage();
}


function nextImage() {
	// Reset values.
  background(255);
  loop();
  frameCount = 0;
	
// Make shift random so hues aren't always the same.
brightnessShift = random(255);
	
	// Load the next image.
  imgIndex++;
  if (imgIndex >= imgNames.length) {
    imgIndex = 0;
  }
	
  img = loadImage(imgNames[imgIndex]);
  img.loadPixels();
}


function paintStroke(float strokeLength, color strokeColor, int strokeThickness) {
let b = brightness(strokeColor);
	
let bShift = b+brightnessShift;
if (bShift > 255) {
bShift -= 255;
}
	
pushMatrix();
// Map pixel's brightness to determine the stroke's direction.
rotate(radians(map(b, 0, 255, -180, 180)));
	
// Draw a dark stroke.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 0, 100), 50);
line(-strokeLength, 1, strokeLength, 1);
	
// Draw a normal stroke.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 0, 255));
 strokeWeight(strokeThickness);
line(-strokeLength, 0, strokeLength, 0);
	
// Draw a lighter stroke.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 150, 255), 20);
line(-strokeLength, 2, strokeLength, 2);
	
popMatrix();
}


function paintDot(color strokeColor, int strokeThickness) {
let b = brightness(strokeColor);
	
let bShift = b+brightnessShift;
if (bShift > 255) {
bShift -= 255;
}
	
pushMatrix();
// Map pixel's brightness to determine the stroke's direction.
rotate(radians(random(-180, 180)));
	
// Draw a stroke with short length.
stroke(map(bShift, 0, 255, 0, 255), 150, map(b, 0, 255, 0, 255));
strokeWeight(strokeThickness);
line(0, 0, 5, 0);
	
popMatrix();
}
1 Like
2

p5.js comes with its own
https://p5js.org/reference/
pls find about array
https://p5js.org/reference/#/p5/append
and image loading
https://p5js.org/reference/#/p5/loadImage

2 Likes
3

Please format your code. To do this, edit your post, click on edit, select the text that is actually code and then click in the preformatted text button which looks like this </>. This will format your code for you. Then you need to save the changes in your post.

In the code above, you should not use var but let instead. Now, into your actual issue:

For this line: String[] imgNames = {“emma.jpg”,“obama.jpg”, “clint.jpg”}; needs to be replaced for the p5.js version (aka. the js version) which it would be like this: const imgNames = [“emma.jpg”,“obama.jpg”, “clint.jpg”]; as described here and here.

I just checked the beginning of your code. Please format it to review it deeper.

Kf

2 Likes
4

I did formate my code… could you help me with the part that doesnt work please?

5

Lotsa sketches available for both Java Mode & p5js versions: :coffee:

2 Likes
6 
**PImage img;**

Replace with

let  img;

for (int i = 0; i < strokesPerFrame; i++)

Replace with:

for (let i = 0; i < strokesPerFrame; i++)

This is not recommended: color = img.pixels[index]; Color is a reserved word in Processing. This will work but will make your code hard to read. I suggest to use some other name. For instance, pixColor.

pushMatrix and pop matrix needs to be replaced by push and pop resp.

function paintDot(color strokeColor, int strokeThickness)

replace with

function paintDot(let strokeColor, let strokeThickness)

Similarly you need to fix paintStroke.

Implement the changes and try it out to see if it works. If you get any error, check the proper reference. If something is not clear, just ask.

Kf

2 Likes