Hello,basic question, x is not a function

p5.js Beginners
1 
let img;
let cnv;
let points =[]
let mult = 0.008
var vScale = 1;

function preload(){
  img = loadImage("assets/22.jpg");
}

function setup() {
  cnv = createCanvas(img.width, img.height);
  //print img
  let newCanvasX = (windowWidth-img.width/20)/2;
  let newCanvasY = (windowHeight-img.height/20)/5;
  cnv.position(newCanvasX,newCanvasY);
  angleMode(DEGREES)
  noiseDetail(1);
  //access the pixel information of the image
  var density = 10;
  var space = img.width / density;
 
  for(let col = 0 ; col < img.width ; col+=space){
    for(let row = 0; row < img.height;row +=space){
      var p = createVector(col, row);
      points.push(p);   
    }
  }
}

function draw() {  
   for (var i = 0; i < points.length; i++) {
        points[i].update();
        points[i].show();   
  }
}



function Points(x,y){
  this.points.x = x;
  this.points.y = y;

  this.update = function(){
  this.points.x += random(-10,10);
  this.points.y += random(-10,10);
    
  this.x = constrain(this.x,0,width);
  this.y = constrain(this.y,0,height);
  
  
      
  }
  
  this.show = function(){
    //noStroke();
    var px = floor(this.x / vScale);
    var py = floor(this.y / vScale);
    
    var col = img.get(px,py);
    fill(col[0],col[1],col[2]);
    ellipse(this.x,this.y,1,1); 
  }  
}

This is my code, I got an error that said points[i].update is not a function… I don’t understand cos it works well in my other sketch, maybe there is a shared function name, I changed this.x into this. points. x, doesn’t work. I don’t know how to deal with it, please help me!

1 Like
2

you’re pushing a vector into the points array

  for(let col = 0 ; col < img.width ; col+=space){
    for(let row = 0; row < img.height;row +=space){
      var p = createVector(col, row);
      points.push(p);   
    }
  }

shouldn’t it be

  for(let col = 0 ; col < img.width ; col+=space){
    for(let row = 0; row < img.height;row +=space){
      points.push(new Points(col, row)); //prob change the name of this function Points to Point
    }
  }
3

Hello,

Thanks for sharing your thoughts. I followed your suggestion, but the sketch still not working and got nothing in the console.

4

sorry i was dead tired last night and didn’t run your code. t̶h̶i̶s̶ ̶s̶h̶o̶u̶l̶d̶ ̶g̶e̶t̶ ̶y̶o̶u̶ ̶o̶n̶ ̶y̶o̶u̶r̶ ̶w̶a̶y̶ best of luck i tried to change as little as possible just to get it working hopefully it’s enough. looks your sampling and rendering need to be worked on further

edit: this is probably as close as i can get to what i think you intended. i didn’t have the image so i just used a random one and i changed a couple of things but it seems more accurate to me. it’s messy as but it’s a good jump off point i think.

https://editor.p5js.org/hotfooted/sketches/yQobs40XS

2 Likes
5

Hi, this is absolutely what I want. Thanks for sharing your sketch, I will walk through your code and see what magic you have done. Big big thanks hotfooted, love this community!