let widthSlider, heightSlider, colorPicker, shapeSelector, saveButton,arcSlider,resetButton; let currentShape = 'rectangle'; function setup() { createCanvas(windowWidth, windowHeight); textFont('sans-serif'); // UI Controls createDiv("width").position(20, 80); widthSlider = createSlider(100, 600, 400); widthSlider.position(20, 100); createDiv("height").position(20, 120); heightSlider = createSlider(250, 1000, 520); heightSlider.position(20, 140); createDiv("color").position(20, 240); colorPicker = createColorPicker('#000000'); colorPicker.position(20, 260); createDiv("arc").position(20, 160); arcSlider = createSlider(0, 900, 120); arcSlider.position(20, 180); createDiv("shape").position(20, 200); shapeSelector = createSelect(); shapeSelector.position(20, 220); shapeSelector.option('rectangle'); shapeSelector.option('ellipse'); shapeSelector.option('triangle'); shapeSelector.option('curved shape'); shapeSelector.changed(() => currentShape = shapeSelector.value()); saveButton = createButton('💾 save'); saveButton.position(20, 300); saveButton.mousePressed(() => saveCanvas('logo', 'png')); resetButton = createButton('🔄 reset'); resetButton.position(20, 330); resetButton.mousePressed(resetAllSettings); createDiv("データを変えて、あなたの多摩美ロゴを作ってみよう！！").position(width/2-190, 210); } function draw() { background(255); let shapeW = widthSlider.value(); let shapeH = heightSlider.value(); let c = colorPicker.color(); let arcPeak = arcSlider.value(); let centerX = width / 2; let centerY = height / 2; // Draw main shape noStroke(); fill(c); if (currentShape === 'rectangle') { rectMode(CENTER); rect(centerX, centerY, shapeW, shapeH); } else if (currentShape === 'ellipse') { ellipse(centerX, centerY, shapeW, shapeH); } else if (currentShape === 'triangle') { triangle(centerX - shapeW / 2, centerY + shapeH / 2, centerX, centerY - shapeH / 2, centerX + shapeW / 2, centerY + shapeH / 2); } else if(currentShape==='curved shape'){ CurvedTrapezoid(centerX,centerY,shapeW, shapeW,shapeH, shapeW*0.3) } stroke(255); strokeWeight(13); line(0, height/2 - 50, width, height/2 - 50); line(0, height/2, width, height/2); line(0, height/2 + 50, width, height/2 + 50); strokeWeight(8); line(0, height/2 - 100, width, height/2 - 100); line(0, height/2 + 100, width, height/2 + 100); line(width/2, height/2 - 100, width/2, height/2 + 50); //upper acr1 noStroke(); fill(255); beginShape(); vertex(0,height/2-380); vertex(0,0); vertex(width,0); vertex(width,height/2-380); bezierVertex(width/2+120-arcPeak, height/2 - 60, width/2-120+arcPeak, height/2 - 60, 0,height/2-380); endShape(); // below arc1 beginShape(); vertex(0,height/2+380); vertex(0,height); vertex(width,height); vertex(width,height/2+380); bezierVertex(width/2+120-arcPeak, height/2 + 60, width/2-120+arcPeak, height/2 +60, 0,height/2+380); endShape(); //upper arc2 beginShape(); vertex(0,height/2-340); vertex(0, height/2 - 100); vertex(width, height/2 - 100); vertex(width,height/2-340) bezierVertex(width/2+150, height/2 - 25, width/2-150, height/2 - 25, 0,height/2-340 ); endShape(); //below arc2 beginShape(); vertex(0,height/2+340); vertex(0, height/2+100); vertex(width, height/2+100); vertex(width,height/2+340) bezierVertex(width/2+150, height/2 + 25, width/2 -150, height/2 + 25, 0,height/2+340 ); endShape(); } function CurvedTrapezoid(x, y, topW, bottomW, h, curve) { let halfH = h / 2; beginShape(); vertex(x - topW / 2, y - halfH); bezierVertex( x - topW / 2 + curve, y, x - bottomW / 2 + curve, y, x - bottomW / 2, y + halfH ); vertex(x + bottomW / 2, y + halfH); bezierVertex( x + bottomW / 2 - curve, y, x + topW / 2 - curve, y, x + topW / 2, y - halfH ); endShape(); } function resetAllSettings() { widthSlider.value(400); heightSlider.value(520); colorPicker.value('#000000'); shapeSelector.value('rectangle'); currentShape = 'rectangle'; arcSlider.value(120); }

Logo Editor