Creating a HSV-Color Cylinder with WEBGL and p5js

p5.js Beginners
1

Hi,

I found following site on internet: https://programmingdesignsystems.com/color/color-models-and-color-spaces/index.html

If you scroll down a little you can see a cylinder where you have 3 sliders and can select the HSV value on the cylinder…

Is it going to take a long time to code something like that? I need the 3d view of cylinder and paint it with HSV… is that easy task?

Thanks

2

This is going to be pretty hard for us to answer. Whether this is difficult depends more on your experience and your context than it does anything else.

The best advice I can give you is to break your problem down into smaller steps and take those steps on one at a time. For example, can you create a simple sketch that shows a basic cylinder without worrying about colors? Work your way forward from there.

If you get stuck, you can post a MCVE along with a more specific technical question. Good luck!

4

Should be easy enough. If you try really hard you could learn everything you need to know and get it working today.

I’d start not with a cylinder, but with a 36-sided flat regular polygon. How do you know where the vertexes for such a shape should be?

Then draw two of them in 3D, some distance apart. Suddenly you have all the points you need for a crude cylinder.

Then it is just a matter of ramping up the number of sides, and mapping the right textures to the right faces.

5

@Kevin Hi, thanks for fast reply, I changed the title according to my problem :slight_smile:

@TfGuy44 I think I will start basically with a Plane and try getting the color space onto it first… maybe just the hue from 0-360 and for saturation and value fixed values 100% at first.

Unfortunately I am not very familiar with JS and 3D stuff, but I am familiar with programming in general (C# and such).

My intention with p5 is to get fast and easy started with doing such a task.
I think it would require more work and slower when doing same thing in Unity 3D … :smiley:

Maybe you guys can hint me some key functions I would require to achieve this

6

Yes I got that already working:

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

function draw() {
  background(50, 50, 50);

  angleMode(DEGREES);
  rotateX(mouseY * 10);
  cylinder(50, 50);
}
7 
function setup() {
  createCanvas(710, 400, WEBGL);
  noStroke();
  colorMode(HSB, 36);
}

function draw() {
  background(0);
  rotateX(radians(mouseY));
  for ( var i=0; i < 36; i++) {
    fill((i+mouseX)%36, 36, 36);
    beginShape();
    vertex(200*cos(i*TWO_PI/36.0), 200*sin(i*TWO_PI/36.0), -10 );
    vertex(200*cos((i+1)*TWO_PI/36.0), 200*sin((i+1)*TWO_PI/36.0), -10 );
    vertex(0, 0, -10);
    endShape(CLOSE);
    beginShape();
    vertex(200*cos(i*TWO_PI/36.0), 200*sin(i*TWO_PI/36.0), 10 );
    vertex(200*cos((i+1)*TWO_PI/36.0), 200*sin((i+1)*TWO_PI/36.0), 10 );
    vertex(0, 0, 10);
    endShape(CLOSE);
    
  }

  //cylinder(50, 50);
}

This is a step towards what I am suggesting. I have no idea why it runs so slow for me!

8

Thanks for that snippet tho, I tried a little bit around, but that is lagging a lot… (ofc, there is so much things being drawn xD)

but it looks already good…

iY56OfA.png1920×1040 110 KB

Nice to get started and known to p5, but I am supposed another method, probably creating a mesh and uv mapping a texture of those colors… idk yet.
what do you think? right now i am drawing only 36 different tones, but i need all of the 360 degrees… which bluescreened me some minutes ago. xD