Ellipse Scaling Problem

edited June 2015 in Questions about Code

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:

Schermata 2015-06-01 alle 16.26.59

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

Thank you in advance for your help!

Answers

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

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

    Schermata 2015-06-01 alle 16.57.33

    This is what I would like to achieve:

    Schermata 2015-06-01 alle 16.57.25

    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!

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

  • Glad to help :)

Sign In or Register to comment.