Ellipse Scaling Problem

pafgg

Hello Guys! Sorry to bother you all, but I really need your help! I am trying to adjust this code to obtain a specific effect, but I really don't know ho to do it!

The code is this:

float tileCount = 30;
color circleColor = color(255);
int circleAlpha = 150;
int actRandomSeed = 0;

void setup(){
  size(360, 640);
  smooth();

}

void draw() {

  translate(width/tileCount/5, height/tileCount/5);
  background(40,23,201);
  smooth();
  noFill();

  randomSeed(actRandomSeed);

  stroke(circleColor, circleAlpha);
  strokeWeight(mouseY/100);

  for (int gridY=0; gridY<tileCount; gridY++) {
    for (int gridX=0; gridX<tileCount; gridX++) {

      float posX = width/tileCount * gridX;
      float posY = height/tileCount * gridY;

      float shiftX = random(-mouseX, mouseX)/80*0;
      float shiftY = random(-mouseX, mouseX)/80*0;

    ellipse(posX+shiftX/2, posY+shiftY/2, mouseY/15, mouseY/15);
    }
  }

}

What I am trying to achieve is this:

I would like to start with ellipse already in the canvas, and end at a certain point!

Thank you in advance for your help!

pafgg

@Chrisir

@_vk

@TfGuy44

Hey guys, do you know how to help me please?

KevinWorkman

I'm really not sure what you're asking. What exactly do those pictures show? What exactly are you confused about?

Chrisir

background blue

ellipse white, noFill

strokeWeight increases?

I don 't understand...

pafgg

@KevinWorkman @Chrisir Hey, thanks for answering!

The pictures shows what I would like to achieve, so to start with ellipse already drawn and to end at a certain point of scaling.

The code allows you to modify the ellipses (scaling and position) as you move the mouse over the canvas; but at the moment the parameters don't allow me to achieve what I have shown with the pictures above, it starts with the canvas empty!

KevinWorkman

The problem is that it's not clear what is happening in those pictures. What does your code do? What do you want it to do instead?

pafgg

@KevinWorkman I would like to maintain what the code does (scaling and modifying the ellipses while you move the mouse over the canvas) but instead of launching the code and having no ellipses drawn, I would like to launch the code and start with the ellipses already drawn and to stop at a certain point (at a certain scale and position).

KevinWorkman

And which part of that are you stuck on? What exactly are you confused about?

Start smaller: can you draw a single ellipse that changes depending on your mouse position?

pafgg

@KevinWorkman I am stuck because I don't know how to adjust the code to start with the ellipses already drawn.

This is what it is now:

This is what I would like to achieve:

I think the problem is with this:

ellipse(posX+shiftX/2, posY+shiftY/2, mouseY/15, mouseY/15);

that start to draw the ellipse at a certain point, but I don't know how to adjust it!

_vk

The size of ellipses are given by mouseY/15 so your range is from 0/15 to height (640) / 15 . You got to adjust this range for what you want. Look at map(), constrain(), max() and min(). They can help you to do this...

pafgg

@_vk Thank you so much! As I am only an amateur could you please give me just a bit more of help in adjusting it? I would really appreciate it!

_vk

Later, I can't right now. But this is pretty easy stuff, and I see no point in making a code that you can't understand. So give it a try.

• make a var to hold size , and use map() to set the range. That easy. Look at map at reference, the example should get you started very well :)

KevinWorkman

Start smaller: can you draw a single ellipse that changes depending on your mouse position? Use the functions that _vk has pointed out, and try something out. Post your updated code if you get stuck again.

pafgg

:)>- Thanks ! I'll try now and then maybe we could exchange our ideas!!!

pafgg

Thanks @KevinWorkman ! I'll try and be back to you guys! thank you so much for the help!

_vk

Hello. Did you get it?

An example of mapping:

void setup() {
  size(140, 600);
  background(255);
  fill(70);
  smooth();
}

void draw() {
  background(255);
  stroke(70);
  //lines to mark my boundaries
  line(0, 100, width, 100);
  line(0, 200, width, 200);
  line(0, 400, width, 400); 
  line(0, 500, width, 500); 
  noStroke();

  //mapping mouseY to boudaries
  float y = map(mouseY, 0, height, 200, 400);

  //draw
  ellipse(width/2, y, 20, 20);

  //mapping mouseY to other boudaries
  float nY = map(mouseY, 0, height, 100, 500);

  //draw
  ellipse(width/2, nY, 20, 20);
}

pafgg

Hello @_vk ! Thanks for getting back! Honestly I did try and I went to look at the reference for mapping, but I didn't manage to use it for what I wanted to achieve, because I had problem with the variables! Did you know how to help me please? Thank you so much in advance! I really appreciate your support!

_vk

See if this helps you out

//those are global variables
float tileCount = 30;
color circleColor = color(255);
int circleAlpha = 150;
int actRandomSeed = 0;

void setup() {
  size(360, 640);
  smooth();

  // this makes the pseudo random result to be repeated every time
  // the program runs
  randomSeed(actRandomSeed);

  // this sets style 
  // not changing so moved to setup
  stroke(circleColor, circleAlpha);
  noFill();
}

void draw() {
  // this is a weird line...
  // it is translating everything 2.4 px in x and 4.8 in y...?
  translate(width/tileCount/5, height/tileCount/5);

  //clears the bg
  background(40, 23, 201);  


  // this is using mouse positin to set strokeWeight
  // they go all the way from 0 to 6.40 (height/100)
  // you can map this value to any desired range.
  // You don't need a var, but will make things cleaner

  // float sw = map( desired value, min input value, max input value, min output value, max output value);
  // then  strokeWeight(sw);
  // that would be map(mouseY, 0, height, desiredMin, desiredMax);

  strokeWeight(mouseY/100);



  //drawing the grid of ellipses
  for (int gridY=0; gridY<tileCount; gridY++) {
    for (int gridX=0; gridX<tileCount; gridX++) {

      float posX = width/tileCount * gridX;
      float posY = height/tileCount * gridY;


      float shiftX = random(-mouseX, mouseX)/80*0;
      float shiftY = random(-mouseX, mouseX)/80*0;

      // same thinkin can be aplied here for the size
      //float size = map(mousey, inMIn, inMax, outMin, outMax);
      // and ellipse(x,y,size,size)
      ellipse(posX+shiftX/2, posY+shiftY/2, mouseY/15, mouseY/15);
    }
  }
}

pafgg

@_vk Thank you so much! I really appreciate your support and help!

_vk

Glad to help :)