//Version 2.
//blendmode exploration
function setup() {
createCanvas(800, 800);
colorMode(RGB, 200, 100, 150);
angleMode(DEGREES);
//Draw Flower
//First Flower
// Stroke Color
stroke(randomColor());
strokeWeight(5);
//Background Color
let randomAlpha = random(80,200);
background(10, 20, 10, randomAlpha);
translate(width / 2, height / 2);
beginShape(POINTS);
//for (theta = 0; theta < 60; theta += 1) {
for (let phi = 0; phi < 360; phi++) {
let r = 300 * sin(phi * 6) + 100;
//divide by 2 to fit in the canvas
let x = (r * cos(phi)) / 2;
let y = (r * sin(phi)) / 2;
vertex(x, y, 0);
endShape();
}
}
function draw() {}
//click to randomnize flower
function mouseClicked() {
translate(width / 2, height / 2);
for (let i = 0; i < 5; i++) {
//Draw Flower
//More Flowers
// Stroke
//background(0, 10, 10);
stroke(randomColor());
let randomWeight = random(1, 8);
strokeWeight(randomWeight);
// Randomized pedal num
let pedalNum = random(4, 16);
let randomWidth = random(20, 250);
beginShape(POINTS);
//for (theta = 0; theta < 60; theta += 1) {
for (let phi = 0; phi < 360; phi++) {
let r = randomWidth * sin(phi * pedalNum) -70 + randomWidth;
//divide by 2 to fit in the canvas
let x = (r * cos(phi)) / 2;
let y = (r * sin(phi)) / 2;
//stroke(randomColor());
vertex(x, y, 0);
endShape();
}
}
}
function randomColor() {
return color(random(255), random(255), random(255), 0.85);
}
Project Flora
Flower as [Keywords]
[ ] beautiful delight
[ ] badge symbol
[ ] abstract identity
Project [Flora]'s goal is to send flowers to users and urge them to pursue healthier purchasing behavior.
Technical-wise, the function draws unlimited flower forms; later, it will be connect to user behavior APIs to visualize the data
(I am recently conducting a UX research project on fast fashion user behavior and the [potential of sustainable shopping habits.)
Flowers are symbols of beauty, liveliness, and hope; they can function as a junction point that inspires people to think of nature and love, which drives them to a sustainability awareness that elevates human' living quality.
I started to use the color and form of endangered species and expand my vision to a more creative and even magical approach to graphic effects.
Flower Planting
Inspirations:
Endangered Species explorations & Knowing their names
Customer API translate to badges reference(?) Spotify
Techniques Explorations:
Exploring how to draw flowers
Translating the curves into p5 language
Skeches & Improvements:
Version 0.
random exploring
Version 1.
ever-changing flower, monochrome, click to change color
https://editor.p5js.org/hy1698/sketches/g1rVab7tg
Version2. （Now）
start with 1 flower with random color and background, click for more flower with random stroke and color, modified for improved beauty
https://editor.p5js.org/hy1698/sketches/8-yJkq3bX
Next Steps:
- color fill? (been flashed back by
- Connect to API (need a step to API translation to fit a certain beauty)
- 3D with render & motion?
Week 1
Code 1
let video;
function setup() {
createCanvas(400, 400);
video = createCapture(VIDEO);
video.size(400,400);
video.hide();
}
function draw() {
background(200);
//image(video,0,0,width,height);
let frame = video.get();
//image(frame,0,0,width,height);
frame.loadPixels();
//print(frame.pixels.length);
//print(400*400*4);
// individual pixel = (w*y+x)*4
for (let x = 0; x < width; x+=5) {
for (let y = 0; y < height; y+=5) {
let r = frame.pixels[((width*y+x)*4)];
let g = frame.pixels[((width*y+x)*4)+1];
let b = frame.pixels[((width*y+x)*4)+2];
let bright = (r+g+b)/3
let size = bright/(mouseX/3)
fill(r,g,b);
triangle(x,y,x-size, y+size, x+size,y+size);
}
}
}
Week 2
This week we played around
let video;
function setup() {
createCanvas(400, 400);
video = createCapture(VIDEO);
video.size(400,400);
video.hide();
}
function draw() {
background(200);
//image(video,0,0,width,height);
let frame = video.get();
//image(frame,0,0,width,height);
frame.loadPixels();
//print(frame.pixels.length);
//print(400*400*4);
// individual pixel = (w*y+x)*4
for (let x = 0; x < width; x+=5) {
for (let y = 0; y < height; y+=5) {
let r = frame.pixels[((width*y+x)*4)];
let g = frame.pixels[((width*y+x)*4)+1];
let b = frame.pixels[((width*y+x)*4)+2];
let bright = (r+g+b)/3
let size = bright/(mouseX/3)
fill(r,g,b);
triangle(x,y,x-size, y+size, x+size,y+size);
}
}
}