xxxxxxxxxx754
//notes://save with background instead of alpha channal//bg is in htmllet i = 20// let a1, a2, b1, b2let x, y// let a, blet a1, a2, b1, b2let cmoGridList = [];let showGrid = true;let darkBG = truelet rvalue, gvalue, bvaluelet greenbutton, graybutton, magentabutton, yellowbutton, bluebutton, blkButtonlet buttonsave;let bubblesizelet bubblesizeSliderlet colorModelet brushsizeSliderlet cmoRolloverDistancelet canvasfunction preload() { textFont("JetBrains Mono")}function setup() { canvas = createCanvas(windowWidth, windowHeight);textFont("JetBrains Mono") print('windowWidth=' + windowWidth) print('windowHeight=' + windowHeight) // background(50); frameRate(5) fill(255); noStroke() // if (windowWidth < windowHeight) { a1 = windowWidth / 20 a2 = windowWidth * 0.95 + 10 b1 = windowHeight / 8 b2 = windowHeight - windowHeight / 6 phone() // } else { // a1=b1 = 150 // a2=b2 = 650 // laptop() // } // fill(255); // noStroke() // TitleResponsive() dotGrid() // drawLineGrid() //Number of Dot Grid print('Grid X=' + int((a2 - a1) / i + 1)) print('Grid Y=' + int((b2 - b1) / i + 1)) base()}function draw() { // image(bgLayer, width, height) // image(drawingLayer, width, height) // stroke(255) // strokeWeight(0.5) // print(cmoRolloverDistance) // print(bubblesize) if (darkBG == true) { canvas.elt.style['background-color'] = '#323232' // base() fill(255) noStroke() textFont("JetBrains Mono") TitleResponsive() } else { canvas.elt.style['background-color'] = 'white' // base() fill(0); noStroke() textFont("JetBrains Mono") TitleResponsive() } // let rowCount = 21 // for (let row = 0; row <= rowCount - 1; row++) { // for (let col = 0; col < rowCount - 1; col++) { // } // } // for (let i = 0; i < cmoGridList.length - 1; i++) { // let grid1 = cmoGridList[i] // let grid2 = cmoGridList[i + 1] // line(grid1.x, grid1.y, grid2.x, grid2.y); // } // cnv.mousePressed(changeGray)}function laptop() { //brush size slider brushsizeSlider = createSlider(10, 60, 25); brushsizeSlider.position(150, 60); brushsizeSlider.style('width', '200px'); // textAlign(RIGHT); // text('Stroke Area', brushsizeSlider.x + brushsizeSlider.width, brushsizeSlider.y); cmoRolloverDistance = brushsizeSlider.value(); // print(cmoRolloverDistance) bubblesizeSlider = createSlider(1, 40, 25); bubblesizeSlider.position(150, 90); // bubblesizeSlider.parent(label); bubblesizeSlider.style('width', '200px'); // bubblesizeSlider.style('background-color',red); // textAlign(RIGHT); // text('Bubble Size', bubblesizeSlider.x + bubblesizeSlider.width, bubblesizeSlider.y); bubblesize = bubblesizeSlider.value(); greenbutton = createButton("Green").id("greenButton"); greenbutton.mouseClicked(GreenButton); greenbutton.size(100, 30); greenbutton.position(700, 300); // greenbutton.style("font-family", "Bodoni"); greenbutton.style("font-size", "12px"); yellowbutton = createButton("Yellow").id("yllowButton"); yellowbutton.mouseClicked(YllowButton); yellowbutton.size(100, 30); yellowbutton.position(700, 340); // yellowbutton.style("font-family", "Bodoni"); yellowbutton.style("font-size", "12px"); magentabutton = createButton("Magenta").id("mgtButton"); magentabutton.mouseClicked(MgtButton); magentabutton.size(100, 30); magentabutton.position(700, 380); // magentabutton.style("font-family", "Bodoni"); magentabutton.style("font-size", "12px"); graybutton = createButton("White").id("whiteButton"); graybutton.mouseClicked(WhtButton); graybutton.size(100, 30); graybutton.position(700, 420); // graybutton.style("font-family", "Bodoni"); graybutton.style("font-size", "12px"); blkButton = createButton("Black").id("blkButton"); blkButton.mouseClicked(BlkButton); blkButton.size(100, 30); blkButton.position(700, 460); // graybutton.style("font-family", "Bodoni"); blkButton.style("font-size", "12px"); buttonsave = createButton("Save").id("saveButton"); buttonsave.mouseClicked(SaveButton); buttonsave.size(100, 110); buttonsave.position(700, 540); // buttonsave.style("font-family", "Bodoni"); buttonsave.style("font-size", "12px"); buttonbgchange = createButton("LIGHT / DARK ").id("bgButton"); buttonbgchange.mouseClicked(BGButton); buttonbgchange.size(100, 110); buttonbgchange.position(700, 150); // buttonbgchange.style("font-family", "Bodoni"); buttonbgchange.style("font-size", "12px");}function phone() {///////////////Slider/////////////// brushsizeSlider = createSlider(10, 60, 25); brushsizeSlider.position(a1, windowHeight / 15); // brushsizeSlider.style('width', '1'); // textAlign(RIGHT); // text('Stroke Area', brushsizeSlider.x + brushsizeSlider.width, brushsizeSlider.y); cmoRolloverDistance = brushsizeSlider.value(); bubblesizeSlider = createSlider(1, 40, 25); bubblesizeSlider.position(a2 - windowWidth * 0.35, windowHeight / 15); // bubblesizeSlider.style('width', '160px'); // textAlign(RIGHT); // text('Bubble Size', bubblesizeSlider.x + bubblesizeSlider.width, bubblesizeSlider.y); bubblesize = bubblesizeSlider.value(); ///////////////Button/////////////// greenbutton = createButton("Green").id("greenButton"); greenbutton.mouseClicked(GreenButton); greenbutton.size(windowWidth / 10, windowHeight / 15); greenbutton.position(a1 + windowWidth * 0.2, b2 + windowHeight / 40); // greenbutton.style("font-family", "Bodoni"); greenbutton.style("font-size", "12px"); yellowbutton = createButton("Yellow").id("yllowButton"); yellowbutton.mouseClicked(YllowButton); yellowbutton.size(windowWidth / 10, windowHeight / 15); yellowbutton.position(a1 + windowWidth * 0.2 + windowWidth / 10, b2 + windowHeight / 40); // yellowbutton.style("font-family", "Bodoni"); yellowbutton.style("font-size", "12px"); magentabutton = createButton("Magenta").id("mgtButton"); magentabutton.mouseClicked(MgtButton); magentabutton.size(windowWidth / 10, windowHeight / 15); magentabutton.position(a1 + windowWidth * 0.2 + windowWidth / 10 * 2, b2 + windowHeight / 40); // magentabutton.style("font-family", "Bodoni"); magentabutton.style("font-size", "12px"); graybutton = createButton("White").id("whiteButton"); graybutton.mouseClicked(WhtButton); graybutton.size(windowWidth / 10, windowHeight / 15); graybutton.position(a1 + windowWidth * 0.2 + windowWidth / 10 * 3, b2 + windowHeight / 40); // graybutton.style("font-family", "Bodoni"); graybutton.style("font-size", "12px"); blkButton = createButton("Black").id("blkButton"); blkButton.mouseClicked(BlkButton); blkButton.size(windowWidth / 10, windowHeight / 15); blkButton.position(a1 + windowWidth * 0.2 + windowWidth / 10 * 4, b2 + windowHeight / 40); // graybutton.style("font-family", "Bodoni"); blkButton.style("font-size", "12px"); buttonsave = createButton("Save").id("saveButton"); buttonsave.mouseClicked(SaveButton); buttonsave.size(windowWidth * 0.15, windowHeight / 15); buttonsave.position(a2 - windowWidth * 0.15, b2 + windowHeight / 40); // buttonsave.style("font-family", "Bodoni"); buttonsave.style("font-size", "12px"); buttonbgchange = createButton("LIGHT / DARK ").id("bgButton"); buttonbgchange.mouseClicked(BGButton); buttonbgchange.size(windowWidth * 0.15, windowHeight / 15); buttonbgchange.position(a1, b2 + windowHeight / 40); // buttonbgchange.style("font-family", "Bodoni"); buttonbgchange.style("font-size", "12px");}////////////////////////////////////////////////////////////function BGButton() { darkBG = !darkBG;}function keyPressed() { if (key == '`') { recording = !recording; } // if (key == 'h') { // showGrid = !showGrid; // print("hidegrid") // fill(50) // base() // } if (key == ' ') { fill(50); noStroke(); rect(0, 0, width, height); base() fill(255); TitleResponsive() }}function mouseDragged() { for (let xxTemp of cmoGridList) { xxTemp.cmoCheckCloseby(); }}function dotGrid() { //create a grid array let i1 = 0; for (var x = a1; x <= a2; x += i) { for (var y = b1; y <= b2; y += i) { let newdot = new cmoGrid(i1, x, y) cmoGridList.push(newdot); i1++; } }}////////////////////////////////////////////////////////////function GreenButton() { colorMode = "GREEN"}function YllowButton() { colorMode = "YELLOW"}function MgtButton() { colorMode = "MAGENTA"}function WhtButton() { colorMode = "WHITE"}function BlkButton() { colorMode = "BLACK"}// function RedButton() {// colorMode = "RED"// }function SaveButton() { let saveCount = 1; save("screenshot" + saveCount + ".jpg"); saveCount++}class cmoGrid { constructor(tempMyNumber, tempX, tempY) { this.myNumber = tempMyNumber; this.x = tempX; this.y = tempY; // this.circleSize = 5; this.closeby = false; } cmoCheckCloseby() { cmoRolloverDistance = brushsizeSlider.value(); if (dist(this.x, this.y, mouseX, mouseY) < cmoRolloverDistance // && mouseX-pmouseX <= 0 && mouseY-pmouseY <= 0 ) { bubblesize = bubblesizeSlider.value(); this.circleSize = random(bubblesize); if (colorMode === "GREEN") { //green fill(random(255), 255, 200) } else if (colorMode === "MAGENTA") { fill(255, random(255), 200) } else if (colorMode === "YELLOW") { fill(255, 255, random(255)) } else if (colorMode === "WHITE") { fill(255, random(180, 180)) } else if (colorMode === "BLACK") { fill(40, random(100, 100)) } else { //gray // fill(250, random(255, 200)) fill(255, 255, random(200)) } //magenta // fill(255, random(255), 200) //yellow // fill(255, 255, random(200)) //blue green // fill(200, 255, random(255)) // fill(rvalue, gvalue, bvalue) this.closeby = true; } else { this.circleSize = 0; this.closeby = false; } // if (mouseX-pmouseX > 0 && mouseY-pmouseY > 0 ){ // this.circleSize = 5; // } noStroke() // fill(255); ellipse(this.x, this.y, this.circleSize, this.circleSize); }}////////////////////////////////////////////////////////////function base() { noStroke() fill(200) for (var x = a1; x <= a2; x += i) { for (var y = b1; y <= b2; y += i) { ellipse(x, y, 2, 2) } }}// function drawLineGrid() {// strokeWeight(0.5)// for (x = a; x <= b; x += i) {// line(a, x, b, x)// }// for (y = a; y <= b; y += i) {// line(y, a, y, b);// }// }function TitleResponsive() { // if (windowWidth < windowHeight) { textFont("JetBrains Mono") sketchTitle2() // }else{ // textFont("JetBrains Mono") // sketchTitle1() // }}function sketchTitle1() { textFont("JetBrains Mono") textAlign(LEFT); textSize(21); text('"Dot Grid Brush"', 150, 700); //text textAlign(RIGHT); textSize(10); text('Clear canvas with space bar', 750, 700); text('Stroke Area', brushsizeSlider.x + brushsizeSlider.width, brushsizeSlider.y); text('Bubble Size', bubblesizeSlider.x + bubblesizeSlider.width, bubblesizeSlider.y);}function sketchTitle2() { textFont("JetBrains Mono") textAlign(CENTER, CENTER); textSize(windowWidth / 50); text('"Dot Grid Brush"', windowWidth / 2, windowHeight / 20); //text textAlign(CENTER, CENTER); textSize(windowWidth / 80); text('Clear canvas with space bar', windowWidth / 2, windowHeight - windowHeight / 20 + windowHeight / 50); textSize(windowWidth/80); textAlign(LEFT); text('Stroke Area', brushsizeSlider.x , brushsizeSlider.y+15); textAlign(RIGHT); text('Bubble Size', bubblesizeSlider.x + bubblesizeSlider.width, bubblesizeSlider.y+15);}