xxxxxxxxxx
93
let colorbox = 80;
let colorboxSlider;
let nameInput;
function setup() {
// createCanvas(600, 390);
let canvas = createCanvas(600, 390);
var parent = canvas.parent();
var patternButton = createButton('Generate New Pattern');
patternButton.mousePressed (pattern);
patternButton.style('color', 'pink')
patternButton.parent(parent);
var saveButton = createButton('save Image');
saveButton.mousePressed(savePatternImage);
saveButton.style('color', 'yellow');
saveButton.parent(parent);
saveButton.style('right', '0');
colorboxSlider = createSlider(10, 200, 80);
colorboxSlider.input(updatecolorboxSlider);
nameInput = createInput("Name the pattern");
console.log(parent);
pattern();
}
function updatecolorboxSlider (){
colorbox = colorboxSlider.value()
pattern();
}
function savePatternImage() {
save(nameInput.value() + "-pattern.png");
}
//function mouseClicked() {
// save ("Assigment 8.png");
//}
function pattern() {
background(220);
for (let x = 0; x <= width; x += colorbox){
soyyo(x);
}
function soyyo(x){
let r = random(500);
let g = random(100);
let b = random (500);
noStroke()
fill(r, g, b);
let y = 200;
rect(x, 330, 55, 55, 20);
rect(x, 270, 55, 55, 20);
rect(x, 210, 55, 55, 20);
rect(x, 150, 55, 55, 20);
rect(x, 90, 55, 55, 20);
rect(x, 30, 55, 55, 20);
rect(x, -30, 55, 55, 20);
let round = 30;
let d = dist(mouseX, mouseY, x, y);
if (mouseIsPressed && d < 50) {
round = 70;
}
fill(b, r, g);
rect(x + 12, 330, 30, round, 20);
rect(x + 12, 270, 30, round, 20);
rect(x + 12, 210, 30, round, 20);
rect(x + 12, 150, 30, round, 20);
rect(x + 12, 90, 30, round, 20);
rect(x + 12, 30, 30, round, 20);
rect(x + 12, -30, 30, round, 20);
}
text(nameInput.value(), width / 2, height / 2);
}