let start = false; let pg; let drawing = false; let closed = false; let vectors = []; let objects = []; let n = 0; function setup() { createCanvas(windowWidth, windowHeight); pg = createGraphics(width, height, WEBGL); } function draw() { background(0); pg.clear(); pg.background(250); for (let i = 0; i < n; i++) { if (!objects[i].exist) continue; pg.push(); pg.ambientLight(200); pg.directionalLight(255, 255, 255, 0.5, 0.5, -1); pg.fill(objects[i].color); pg.noStroke(); pg.translate(objects[i].position); pg.rotateY(objects[i].rotation); shape3D(i); pg.pop(); objects[i].position.y -= 2; objects[i].rotation += 0.02; //if (objects[i].position.y < -height * 2) objects[i].exist = false; if (objects[i].position.y < -height * 2) objects[i].position.set(random(-width / 2, width / 2), height * 2, objects[i].position.z -= 500); if (objects[i].position.z < -1000) objects[i].exist = false; } image(pg, 0, 0); if (drawing) { if (!closed) { const v = new p5.Vector(mouseX - width / 2, mouseY - height / 2, 0); if (vectors.length > 10 && v.dist(vectors[0]) < 20) { //vectors.push(vectors[0].copy()); closed = true; } else if (vectors.length > 0 && v.dist(vectors[vectors.length - 1]) > 10) { vectors.push(v); } } push(); translate(width / 2, height / 2); fill(60); stroke(closed ? color(200, 50, 50) : 60); strokeWeight(4); circle(vectors[0].x, vectors[0].y, 10); noFill(); beginShape(); for (let i = 0; i < vectors.length; i++) { vertex(vectors[i].x, vectors[i].y); } if(closed) { endShape(CLOSE); } else { endShape(); fill(60); circle(vectors[vectors.length - 1].x, vectors[vectors.length - 1].y, 10); } pop(); } if (!start) { textSize(30); textAlign(CENTER); text("Draw a shape with your mouse", width / 2, height / 2); } } function mousePressed() { drawing = true; closed = false; vectors = [new p5.Vector(mouseX - width / 2, mouseY - height / 2, 0)]; } function mouseReleased() { drawing = false; start = true; if (closed) { const pos = findCenter(); const col = color(`hsb(${int(random(36000) % 360)}, 100%, 80%)`); objects.push({position : pos, rotation : 0, color : col, exist : true}); pg.push(); pg.fill(objects[n].color); pg.noStroke(); pg.translate(objects[n].position); pg.rotateY(objects[n].rotation); shape3D(n); pg.pop(); n++; } } function findCenter() { let center = new p5.Vector(); for (let i = 0; i < vectors.length; i++) { center.add(vectors[i]); } center.div(vectors.length); for (let i = 0; i < vectors.length; i++) { vectors[i].sub(center); } return center; } function shape3D(n) { const gId = `shape3D${n}`; if (!pg._renderer.geometryInHash(gId)) { const shapeGeom = new p5.Geometry(); const z1 = new p5.Vector(0, 0, 20); const z2 = new p5.Vector(0, 0, -20); let id = 0; // 表面・裏面 let tesselateVertices = pg._renderer._triangulate(verticesToArray(vectors)); tesselateVertices = arrayToVertices(tesselateVertices); tesselateVertices = verticesFilter(tesselateVertices); for (let i=0; i

3D Drawing