You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
let checkbox = document.querySelector('input[type="checkbox"]:checked');
|
|
const colorInput = document.getElementById('color');
|
|
const colorFill = document.getElementById('colorFill');
|
|
const weight = document.getElementById('weight');
|
|
const clear = document.getElementById('clear');
|
|
var inn = document.getElementById('inn');
|
|
const fontSize= document.getElementById('fontSize');
|
|
|
|
const paths = [];
|
|
let currentPath = [];
|
|
|
|
var line = false;
|
|
|
|
function setup() {
|
|
var cnv = createCanvas(window.innerWidth, window.innerHeight);
|
|
cnv.position(0,0)
|
|
cnv.background(0,0,0,0);
|
|
cnv.style('z-index','-10');
|
|
|
|
}
|
|
|
|
function draw() {
|
|
|
|
|
|
fill(0,255,255)
|
|
noFill(); //active to create only lines e co, deActive to create 'islands'
|
|
|
|
//|stroke, text, ellipse, vertex == false
|
|
|
|
if(mouseIsPressed||document.querySelector('.black').checked){
|
|
var point = {
|
|
x: mouseX,
|
|
y: mouseY,
|
|
color: colorInput.value,
|
|
weight: weight.value,
|
|
inpu: inn.value,
|
|
size: fontSize.value
|
|
};
|
|
currentPath.push(point);
|
|
}
|
|
|
|
paths.forEach(path => {
|
|
beginShape();
|
|
|
|
path.forEach(point => {
|
|
stroke(point.color); //always active
|
|
strokeWeight(point.weight); //always active
|
|
});
|
|
|
|
endShape();
|
|
});
|
|
}
|
|
|
|
function mousePressed() {
|
|
currentPath = [];
|
|
paths.push(currentPath);
|
|
}
|
|
|
|
function inn(){
|
|
message += key;
|
|
}
|
|
//code to implement:
|
|
//https://stackoverflow.com/questions/40382194/if-statement-when-checkbox-is-checked
|
|
//https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox
|
|
|
|
if document.querySelector('.black').checked{
|
|
|
|
stroke(color);
|
|
} |