- 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
|
|
- Adbot
-
ADBOT LOVES YOU
|
|
#
?
May 10, 2024 08:48
|
|
- 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
|
|
- Grum
- May 7, 2007
-
|
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
|
|
- A Wheezy Steampunk
- Jul 16, 2006
-
High School Grads Eligible!
|
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
eventually, i personally want to stick to static images until i have a really good handle on things
|
#
?
Apr 22, 2024 17:46
|
|
- 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
|
|
- Adbot
-
ADBOT LOVES YOU
|
|
#
?
May 10, 2024 08:48
|
|
- fart simpson
- Jul 2, 2005
-
DEATH TO AMERICA
|
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:
workin on a maze generator that generates real mazes w/ a random seed
fart simpson fucked around with this message at 04:09 on Apr 23, 2024
|
#
?
Apr 23, 2024 04:04
|
|