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.
70 lines
1.5 KiB
JavaScript
70 lines
1.5 KiB
JavaScript
|
|
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'
|
|
|
|
|
|
if(mouseIsPressed){
|
|
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
|
|
|
|
text(point.inpu ,point.x, point.y)
|
|
textSize(point.size);
|
|
|
|
rect(point.x, point.y, 3,3);
|
|
|
|
ellipse(point.x, point.y, 3);
|
|
|
|
vertex(point.x, point.y);
|
|
});
|
|
|
|
endShape();
|
|
});
|
|
}
|
|
|
|
function mousePressed() {
|
|
currentPath = [];
|
|
paths.push(currentPath);
|
|
}
|
|
|
|
function inn(){
|
|
message += key;
|
|
}
|
|
|