Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
The Something Awful Forums > Discussion > Serious Hardware/Software Crap > YOSPOS > processing / p5.js art thread
 
  • Post
  • Reply
A Wheezy Steampunk
Jul 16, 2006

High School Grads Eligible!
i've been wanting to learn processing for a while and i finally figured out something simple i can start with: making phone backgrounds. i made two versions of my idea in p5.js, one for grayscale and one for color. feel free to take it and make it better, or start from scratch and post your own

grayscale, 13 columns
code:
function setup() {
  createCanvas(1170, 2532);
  background(255);
  noStroke();
  let x = 0;
  while (x < 1170) {
    let y = 0;

    //random
    //let temp_x = x + random(90, 234);

    //5 columns
    //let temp_x = x + 234;

    //6 columns
    //let temp_x = x + 195;

    //9 columns
    //let temp_x = x + 130;

    //10 columns
    //let temp_x = x + 117;

    //13 columns
    let temp_x = x + 90;

    //15 columns
    //let temp_x = x + 78;

    let prev_fill_value = random(0, 160);
    let fill_value = random(0, 160);

    while (y < 2532) {
      //pick a color somewhat different from the previous color
      while (Math.abs(prev_fill_value - fill_value) < 30) {
        fill_value = random(0, 160);
      }

      fill(fill_value);

      let temp_y = y + random(211, 633);

      beginShape();
      vertex(x, y);
      vertex(x, temp_y);
      vertex(temp_x, temp_y);
      vertex(temp_x, y);
      endShape();

      y = temp_y;
      prev_fill_value = fill_value;
    }
    x = temp_x;
  }
}


color, i used coolors but you could also do pride flag colors
code:
function setup() {
  createCanvas(1170, 2532);
  background(255);
  noStroke();
  let x = 0;
  while (x < 1170) {
    let y = 0;

    //random
    //let temp_x = x + random(90, 234);

    //5 columns
    //let temp_x = x + 234;

    //6 columns
    //let temp_x = x + 195;

    //9 columns
    //let temp_x = x + 130;

    //10 columns
    //let temp_x = x + 117;

    //13 columns
    let temp_x = x + 90;

    //15 columns
    //let temp_x = x + 78;
    
    const fill_array = ["#133c55", "#386fa4", "#59a5d8", "#84d2f6", "#91e5f6"];

    let prev_fill_value = random(fill_array);
    let fill_value = random(fill_array);

    while (y < 2532) {
      //pick a color different from the previous color
      while (prev_fill_value == fill_value) {
        fill_value = random(fill_array);
      }

      fill(fill_value);

      let temp_y = y + random(211, 633);

      beginShape();
      vertex(x, y);
      vertex(x, temp_y);
      vertex(temp_x, temp_y);
      vertex(temp_x, y);
      endShape();

      y = temp_y;
      prev_fill_value = fill_value;
    }
    x = temp_x;
  }
}
* # ? Apr 20, 2024 17:10
  • Quote
Adbot
ADBOT LOVES YOU

# ? May 10, 2024 17:20
  • Quote
toiletbrush
May 17, 2010
 hell yeah, processing is awesome. I haven't done much with it in ages, but did this a few years ago. I'll try and dig some other stuff out
* # ? Apr 20, 2024 20:26
  • Quote
Grum
May 7, 2007
 :pseudo: deterministic

code:
function setup() {
  createCanvas(1170, 2532);
  background(255);
  noStroke();
  let x = 0;
  let xx = 0;
  let yy = 0;
  let g = (sqrt(5) + 1) / 2 - 1;
  let fi = 0;
  while (x < 1170) {
    let y = 0;
    
    xx = (xx + 3*g*g) % 3;
    temp_x = x + xx;

    const fill_array = ["#133c55", "#386fa4", "#59a5d8", "#84d2f6", "#91e5f6"];
    let fill_value = "#000";
    while (y < 2532) {
      fill_value = fill_array[fi % fill_array.length];
      fi++;
      
      fill(fill_value);

      yy = (yy + g*100) % 100; 
      let temp_y = y + yy + 10;

      beginShape();
      vertex(x, y);
      vertex(x, temp_y);
      vertex(temp_x, temp_y);
      vertex(temp_x, y);
      endShape();

      y = temp_y;
    }
    x = temp_x;
  }
}

* # ? Apr 21, 2024 01:51
  • Quote
NoneMoreNegative
Jul 20, 2000
GOTH FASCISTIC
PAIN MASTER



shit wizard dad

 Are you a bad enough dude to explore pixel color cycling..?

https://blog.prototypr.io/color-cycling-in-pixel-art-c8f20e61b4c4
* # ? Apr 21, 2024 05:18
  • Quote
A Wheezy Steampunk
Jul 16, 2006

High School Grads Eligible!

Grum posted:

:pseudo: deterministic

code:
function setup() {
  createCanvas(1170, 2532);
  background(255);
  noStroke();
  let x = 0;
  let xx = 0;
  let yy = 0;
  let g = (sqrt(5) + 1) / 2 - 1;
  let fi = 0;
  while (x < 1170) {
    let y = 0;
    
    xx = (xx + 3*g*g) % 3;
    temp_x = x + xx;

    const fill_array = ["#133c55", "#386fa4", "#59a5d8", "#84d2f6", "#91e5f6"];
    let fill_value = "#000";
    while (y < 2532) {
      fill_value = fill_array[fi % fill_array.length];
      fi++;
      
      fill(fill_value);

      yy = (yy + g*100) % 100; 
      let temp_y = y + yy + 10;

      beginShape();
      vertex(x, y);
      vertex(x, temp_y);
      vertex(temp_x, temp_y);
      vertex(temp_x, y);
      endShape();

      y = temp_y;
    }
    x = temp_x;
  }
}


this is very cool

NoneMoreNegative posted:

Are you a bad enough dude to explore pixel color cycling..?

https://blog.prototypr.io/color-cycling-in-pixel-art-c8f20e61b4c4



eventually, i personally want to stick to static images until i have a really good handle on things

* # ? Apr 22, 2024 17:46
  • Quote
A Wheezy Steampunk
Jul 16, 2006

High School Grads Eligible!
i wanted to draw a maze pattern so i looked into maze solving/generating algorithms. it all seemed very complicated, so i did the next easiest thing which was to draw a random set of edges and call it good enough. i copied the "how to randomly choose a function" from stack overflow and that could probably be cleaned up but it works well enough. i also draw over the same vertices more than once, i'll probably work on fixing that next.

code:
function setup() {
  createCanvas(1170, 2532);
  background(255);

  let x = 0;
  while (x < 1170) {
    let y = 0;

    let temp_x = x + 10;

    while (y < 2532) {
      let temp_y = y + 12;

      //noStroke();
      strokeWeight(4);
      const fill_array = ["#133c55", "#386fa4", "#59a5d8", "#84d2f6", "#91e5f6"];
      stroke(random(fill_array));

      var edgeArray = [
        function () {
          beginShape(LINES);
          //vertex(x, y);
          //vertex(x, temp_y);
          vertex(temp_x, temp_y);
          vertex(temp_x, y);
          endShape();
        },
        function () {
          beginShape(LINES);
          vertex(x, y);
          vertex(x, temp_y);
          //vertex(temp_x, temp_y);
          //vertex(temp_x, y);
          endShape();
        },
        function () {
          beginShape(LINES);
          vertex(x, y);
          //vertex(x, temp_y);
          //vertex(temp_x, temp_y);
          vertex(temp_x, y);
          endShape();
        },
      ];
      random(edgeArray).call();

      y = temp_y;
    }
    x = temp_x;
  }
}
* # ? Apr 22, 2024 17:50
  • Quote
Adbot
ADBOT LOVES YOU

# ? May 10, 2024 17:20
  • Quote
fart simpson
Jul 2, 2005

DEATH TO AMERICA
:xickos:

A Wheezy Steampunk posted:

i wanted to draw a maze pattern so i looked into maze solving/generating algorithms. it all seemed very complicated, so i did the next easiest thing which was to draw a random set of edges and call it good enough. i copied the "how to randomly choose a function" from stack overflow and that could probably be cleaned up but it works well enough. i also draw over the same vertices more than once, i'll probably work on fixing that next.

code:
function setup() {
  createCanvas(1170, 2532);
  background(255);

  let x = 0;
  while (x < 1170) {
    let y = 0;

    let temp_x = x + 10;

    while (y < 2532) {
      let temp_y = y + 12;

      //noStroke();
      strokeWeight(4);
      const fill_array = ["#133c55", "#386fa4", "#59a5d8", "#84d2f6", "#91e5f6"];
      stroke(random(fill_array));

      var edgeArray = [
        function () {
          beginShape(LINES);
          //vertex(x, y);
          //vertex(x, temp_y);
          vertex(temp_x, temp_y);
          vertex(temp_x, y);
          endShape();
        },
        function () {
          beginShape(LINES);
          vertex(x, y);
          vertex(x, temp_y);
          //vertex(temp_x, temp_y);
          //vertex(temp_x, y);
          endShape();
        },
        function () {
          beginShape(LINES);
          vertex(x, y);
          //vertex(x, temp_y);
          //vertex(temp_x, temp_y);
          vertex(temp_x, y);
          endShape();
        },
      ];
      random(edgeArray).call();

      y = temp_y;
    }
    x = temp_x;
  }
}


krustrals algorithm wasnt that hard. i could even do it in nodes for nodevember:

fart simpson posted:

workin on a maze generator that generates real mazes w/ a random seed



fart simpson posted:

heres how the algorithm works

https://i.imgur.com/g2fvaEF.mp4

fart simpson fucked around with this message at 04:09 on Apr 23, 2024

* # ? Apr 23, 2024 04:04
  • Quote
  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply
The Something Awful Forums > Discussion > Serious Hardware/Software Crap > YOSPOS > processing / p5.js art thread