6.6: Nested Loops – Processing Tutorial

[ad_1]
This video looks at nested loops, i.e. a loop inside a loop.

Support this channel on Patreon:

Contact:

Send me your questions and coding challenges!:

Link to code on Github:

Processing:
Processing Foundation:
Learning Processing Book:

For More Processing Tutorials:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

34 responses to “6.6: Nested Loops – Processing Tutorial”

  1. Hidayet çerçi Avatar

    I dont know why but if I add "void setup()" and "void draw", it wont work. There are some errors

  2. Adam The Brorito Avatar

    this works but i Dont know why…..
    float x ;
    float y ;
    float d;
    void setup(){
    size(400,400);
    background(0);
    strokeWeight(2);
    stroke(255);
    fill(100);
    }
    void draw(){
    for(int y = 0; y < height; y = y + 20){
    for(int x = 0; x < width; x = x + 20){
    d = dist(mouseX,mouseY,x,y);
    fill(d);
    rect(x,y,20,20);
    }
    }
    println(d);
    }

  3. Tralla Tralla Avatar

    hi i need your help , hope u can ! im a beginner and have a problem with for loop , specially the line under the for loop and cant understand why it is there, the code is :

    public int countAvailable()
    {
    int free= 0;

    for (int index = 0 ; index < streetboxes.length; index ++){
    campingbox oneBox = streetBoxes index [ index];
    if (oneBox.isBusy() == false){
    free ++:
    }
    }
    return free;
    }

    please if u can expalin for me why campingbox oneBox = streetBoxes index [ index];
    is there? i have another method with a loop but this time there is no extra line right after the loop,as you can see this time there is in the if statement .get(i) here is the code

    public void numerofbookauthors(string author)
    {
    int numberofbooks=0;

    for(int i =0; i< shelveswithbooks.size(); i ++)
    {
    if (shelveswithbooks.get(i).getauthorname().equals(author))
    }
    numberofbooks++;

    rest of code bla bla

    hope you understan my question , thank you

  4. Moses Valentin Avatar

    Ehm what programming language is this?

  5. erlin Avatar

    //The dist() function used to control the dimensions of the rectangles close to the mouse
    // Such fun! 🙂

    void setup() {
    size(1000, 600);
    }

    void draw() {
    background(255, 125, 0);
    stroke(255);
    strokeWeight(2);

    for (int x = 0; x < width; x = x + 40) {
    for (int y = 0; y < height; y = y + 40) {
    float distance = dist(x, y, mouseX, mouseY) / 8;
    rect(x, y, distance, distance);
    fill(255, 220, 190);
    }
    }

    }

  6. Inaugurated Avatar

    Little bit off topic, but I did use stuff from former tutorials. For anybody that knows/likes a bit of math; drawing a sine function with amplitude and frequency modulated by the mouse position:

    float circleX;
    float circleY;
    int circleRad = 4;
    float sine = 0;
    float period;
    float amplitude;
    void setup() {
    size(500, 500);
    }
    void draw() {
    background(50);

    // Set variables

    // The width of one full wave in pixels, modulated by mouseX.
    // When mouseX is at full width, there should be one full wave visible.

    period = (width) * mouseX/width;
    println("period (pixels): " + period + " period (rads): " + (period/width) *2 *PI + " frequency: " + 500/period);

    // The amplitude of the wave, modulated by mouseY.
    // height-mouseY so amplitude goes up when the mouse pointer goes up.
    amplitude = ((height)/2) * (height- mouseY)/height;

    // The starting position of the circle. Starting point is the radius of the circle,
    // so it starts with a full circle.
    circleX = circleRad;

    while(circleX < width) {

    // drawing a sine wave with the correct amplitude and period.
    sine = amplitude * sin(((circleX)/period)*2*PI);
    circleY = height/2 + sine;

    fill(255);
    ellipse(circleX, circleY, 2 * circleRad, 2 * circleRad);
    circleX = circleX + 2 * circleRad;
    }
    }

  7. Keshav Sapra Avatar

    Looks like an attractor:

    void setup() {
    size(1200, 768);
    background(0);
    stroke(255);
    strokeWeight(5);
    }

    void draw() {

    for (float x=0; x < width; x= x+10) {
    for (float y=0; y < height; y= y+10) {

    float logic = dist(x, y, mouseX, mouseY);
    rect(x, y, 100, 100);
    fill(logic);
    }
    }
    }

  8. skuul88 Avatar

    here's mine:

    int scl = 20;
    void setup() {

    size(1920,1080);
    background(0);
    }
    void draw() {
    for (int i = 0; i < width; i+=scl) {

    for (int j=0; j < height; j+=scl) {
    float r = dist(mouseX, mouseY, i, j)/4;
    float g = dist(mouseX, mouseY, i, j)/5;
    float b = dist(mouseX, mouseY, i, j)/2;
    strokeWeight(2);
    stroke(71);
    fill(r, g, b);
    rect(i, j, scl, scl);
    }
    }
    }

  9. Calz20Videos Avatar

    at 4:22, replace rect() with line.

  10. Ashton Christopher Avatar

    Super still don't get it

  11. creepercrack Avatar

    int size = 8;

    void setup() {
    fullScreen();
    noCursor();
    noStroke();
    }

    void draw() {
    for (int i = 0; i < width; i = i + size) {
    for (int j = 0; j < height; j = j + size) {
    fill(dist(i, j, mouseX, mouseY));
    rect(i, j, size, size);
    }
    }
    }

  12. Saikat Mondal Avatar

    it is a bad video……anyone van not infer stand….you have shown your style in this vedio..

  13. deevioo Avatar

    Very nice videos!

    float d = 20;

    background(0);
    size(500, 500);

    for (float y = 0; y < height; y = y + d) {

    for (float x = 0; x < width; x = x + d) {

    float di = dist(width / 2, height / 2, x, y);

    fill(di / 2);
    strokeWeight(0);
    rect(x, y, d, d);
    }
    }

  14. ThePandaSenpai Avatar

    So I made this code and I hope you guys enjoy the little animation. 🙂

    float cellSize = 20;
    float darkness = 1.5;
    float randomness = 1;
    int red = 150;
    int green = 255;
    int blue = 255;

    void setup() {
    size(640, 480);
    stroke(0);
    }

    void draw() {
    background(random(255),random(255),random(255));
    randomness += 1/randomness;
    for (int x = 0; x < width; x += cellSize) {
    for (int y = 0; y < height; y += cellSize) {
    fill(
    red – darkness * dist(x, y, mouseX, mouseY),
    green – darkness * dist(x, y, mouseX, mouseY),
    blue – darkness * dist(x, y, mouseX, mouseY)
    );
    rect(x+random(randomness/10), y+random(randomness/10), cellSize, cellSize);
    }
    }
    }

  15. THE KERNEL Avatar

    hello, plz how to fill up the empty spaces with random numbers with no duplication, very urgent

  16. brown bear Avatar

    here's one the combines the bouncing ball and shaded distance

    float pointX;
    float pointY;
    float speedX;
    float speedY;

    void setup(){

    size(500, 500);
    background(0);
    strokeWeight(1);
    stroke(0);
    pointX=random(width);
    pointY=random(height);
    speedX=random(0.0005,0.002);
    speedY=random(0.0005,0.002);
    }

    void draw(){

    for (int x = 0; x < width; x = x + 10) {
    for (int y= 0; y < height; y = y + 10) {

    fill(dist(x,y,pointX,pointY));
    rect(x, y, 10, 10);
    pointX=pointX+speedX;
    pointY=pointY+speedY;
    if((pointX<0)||(pointX>width)){
    speedX=-speedX;
    }
    if((pointY<0)||(pointY>height)){
    speedY=-speedY;
    }

    }
    }
    }

  17. David James ASMR Avatar

    Personal project!

    //CUTE color grid (using alpha channels and for loops);

    void setup() {
    size(500, 400);
    }

    void draw() {

    //draw
    background(255);
    noStroke();

    //logic

    float x = 0;
    float y = 0;

    for (x = 0; x < width; x+= 20) {
    fill(x, y, mouseY/2, 10);
    rect(x-width, 0, x, height);
    }
    for (y = 0; y < height; y+= 20) {
    fill(mouseX/2, x, y, 10);
    rect(0, y-height, width, y);
    }
    }

  18. flopown Avatar

    Hi there, I was playing around with the fill() function using the dist() from mouseX, mouseY to the x and y pos. of my rectangle.
    To do this I used the translate function.
    But I noticed that the mouseX and mouseY were still being mapped according to the topleft of the screen, instead of the middle of the screen.
    Might this be a bug in processing? Or is it designed to work this way and did I just miss it?

  19. Loke PVP Avatar

    wow, just look at it
    void setup(){
    size(500,500);
    }
    void draw(){
    background(255);
    for(float x=0;x<=width;x=x+5){
    for(float y=0;y<=height;y=y+5){
    float C1=random(255);
    float C2=random(255);
    float C3=random(255);
    fill(C1,C2,C3);
    stroke(C1,C2,C3);
    line(x,y,250,250);
    }
    }
    }

  20. The Tech Space Avatar

    Code for the grid without color:
    float x,y;
    void setup(){
    size(600,400);
    }
    void draw(){
    background(#ffffff);
    stroke(#ff0000);
    fill(#000000);
    x = 0;

    while(x<width){
    line(x,0,x,600);
    x = x +25;
    }
    y=0;
    while(y<height){
    line(0,y,600,y);
    y=y+25;
    }

    }

  21. Qwerty Avatar

    Well, here is my solution to make the squares change shade gradually from the centre, maybe someone will find it helpful. It is not a radial gradient though.

    size(420, 420);

    background(0);
    stroke(255);
    fill(127);

    int shade = 0;
    int offset = 0;
    int shadeDiff = 12;
    int sizeOfSquare = 20;

    for (int x = 0; x <= width; x+= sizeOfSquare) {
    //starting color
    shade = 0 + offset;

    if ( dist(0, 0, x, 0) < width/2-sizeOfSquare ) {
    offset += shadeDiff;
    } else {
    offset -= shadeDiff;
    }

    for (int y = 0; y <= height; y += sizeOfSquare) {

    if (dist(x, 0, x, y) < height/2) {
    shade = shade + shadeDiff;
    } else {
    shade = shade – shadeDiff;
    }

    // if shade is above 255 then it will render black
    if (shade > 255) {
    fill(255);
    } else {
    fill(shade);
    }

    //if shade is less than 0 it will render yellow
    if (shade < 0) {
    fill(abs(shade));
    }

    rect(x, y, sizeOfSquare, sizeOfSquare);
    }
    }

  22. Neha M Avatar

    hi i was working how you woud do this with nested loops?

    Use 1 loop to produce a row of 5 stars

    * * * * *

  23. Naomi Austin Avatar

    How would you make each square a static different colour?

  24. naomi fox Avatar

    Hi I tried this and my rects are flashing instead of all just being one random color each they keep flashing my code is the same as yours except they flash some how

  25. Jos W. Avatar

    dist() is pretty cool!

    Here's what I made, but don't run it if you suffer from PSE:

    int squareSize = 20;
    float brushSize = 1.5;

    void setup() {
    size(800, 800);
    }

    void draw() {
    for (int x = 0; x < width; x = x + squareSize) {
    for (int y = 0; y < height; y = y + squareSize) {
    float c = dist(x, y, mouseX, mouseY);
    noStroke();
    fill(c / brushSize, random(255), random(255));
    rect(x, y, squareSize, squareSize);
    }
    }
    }

  26. imconfusednow Avatar

    Hi, I wrote this for you challenge at the end (get darker depending on distance from mouse). And I don't understand why the first collumn doesn't behave right. For me it stays white unless the mouse if far away.

    void setup(){

    size(1000, 1000);
    background(0);
    strokeWeight(2);
    stroke(255);
    }

    void draw(){
    for (int y = 0; y < height; y = y + 20) {
    for (int x = 0; x < width; x = x + 20) {
    float darkness = dist(y,x,mouseY,mouseX);
    rect(x, y, 20, 20);
    fill(darkness);
    }
    }
    }

  27. Eruptiion TV. Avatar

    should make a video on how to make a quilted pattern!

  28. mathoesify Avatar

    Love your work. Thanks!

  29. Sir. Boaz Mutatay Avatar

    Hello Mr Daniel! I have watched all your videos so far and sadly you did not cover the trigonometry part. but still Thank you very much.

  30. Nigel Tiany Avatar

    //To whoever cares… A nice simple Click the box to change color with processing
    // Thanks for these awesome tutorials Mr Shiffman.

    //rectangle spacing
    int spacing = 30;
    //rectangle size : should be equal to spacing so it works well 🙂
    int rectSize = 30;
    void setup(){
    //must be a square screen, width = height for this case
    size(700,700);
    fill(255);
    stroke(25);
    strokeWeight(0.9);
    for(int x=0;x<width;x=x+spacing){
    for(int y=0;y<width;y=y+spacing){
    rect(x,y,rectSize,rectSize);
    }
    }
    }

    void draw(){
    if(mousePressed){
    fill(random(255),random(255),random(255));

    //rect(mouseX-valueSoThat it is a multiple of 30, …) 30 being rectSize
    //mouseX % 20 = remainder
    //mouseX – remainder = a mouseX multiple of 30
    /* mouseX = 331, mouseY = 334
    * 331 % 30 = 1 , 334 % 30 = 4
    * mouseX – (331 % 30) = 330. mouseY – (334 % 30) = 330
    */

    int multiX = mouseX – (mouseX % rectSize);
    int multiY = mouseY – (mouseY % rectSize);

    rect(multiX,multiY,rectSize,rectSize);
    }
    }

  31. Alessandro Donati Avatar

    You're absolutely amazing! Thanks for your lessons…very helpful!

  32. angel fuentes Avatar

    very helpful videos….I actually learn more watching your videos than by listening to my professor in my CST 112 class lol.hahaha
    your videos are great
    thanks for making them

  33. K J Avatar

    Could you cover (dist) please?

Leave a Reply

Your email address will not be published. Required fields are marked *