#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Ellipse Scaling Problem

edited June 2015

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!

Tagged:

• @Chrisir

@_vk

@TfGuy44

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

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

• background blue

ellipse white, noFill

strokeWeight increases?

I don 't understand...

• @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!

• 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?

• @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).

• 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?

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!

• 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...

• @_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!

• 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 :)
• edited June 2015

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.

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

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

• 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);
}
``````
• 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!

• edited June 2015

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);
}
}
}
``````
• @_vk Thank you so much! I really appreciate your support and help!