Line problem with rotatingY axis

the line becomes distorted when rotating in the Y axis, but if I make the same thing in processing it works fine! any ideas?

let btn, btn2;
let y = 0;
let x = 0;


function setup() {
  createCanvas(600, 400, WEBGL);
  
}

function draw() {
  background(0);
  noFill();
  stroke(255);
  //rotateX(x);
  rotateY(y);
  //rotateZ(x);
  point(-100, 0);
  point(100, 0);
  //draw a line
  beginShape(POINTS);
  strokeWeight(4);
  vertex(-100, 0);
  vertex(100, 0);
  endShape();
  
  strokeWeight(1);
  line(-100, 0, 0, 100, 0, 0);
  circle(0, 0, 200);
  y+=0.01;
  x+=0.01;
}
2 Likes

Hi,

Welcome to the forum! :slight_smile:
First of all you can format your code with the </> button in the message editor.

I found that if you use anti-aliasing (https://en.wikipedia.org/wiki/Spatial_anti-aliasing) :

setAttributes('antialias', true);

(https://p5js.org/reference/#/p5/setAttributes)

It works with very thin thickness for your lines.

2 Likes

Hey thank you so much for your quick response and newbie user help. :+1:

2 Likes