ガチャムクSVGを生成する

[cancancanda]

まずこのガチャピンのデザインを目指す

[cancancanda]

とりあえずellipseとarcの要素で現状

// 月をSVGで描きたい import processing.svg.PGraphicsSVG;

// PApplet beginRecord(SVG, "PApplet.svg"); size(600, 600); //noStroke(); background(255);

//Big circle fill(154,205,50); ellipseMode( CENTER );
ellipse( 300, 300, 400, 400 ); fill(181, 255, 20,0);

//circle fill(255,255,255); ellipse( 220, 240, 80, 80 ); ellipse( 380, 240, 80, 80 );

//mini circle fill(0,0,0); ellipse( 380, 240, 50, 50 ); ellipse( 220, 240, 50, 50 );

//minimun circle fill(255); ellipse( 369, 250, 12, 12 ); ellipse( 230, 250, 12, 12 );

//whirte box fill(255); rect(250, 320, 100, 40, 18);

//mabuta fill(102, 170, 17); arc(200,200,80,80,radians(-90),radians(90));

[cancancanda]

まぶたと歯は円弧の角度調整であと少しだが難しい....

一番下のおなかの柄はarcで書けると思うが調整にてこずる。

// ガチャピンSVG import processing.svg.PGraphicsSVG;

// PApplet beginRecord(SVG, "PApplet.svg"); size(600, 600); //noStroke(); background(255);

//Big circle stroke(154,205,50); fill(154,205,50); ellipseMode( CENTER ); ellipse( 300, 300, 370, 370 ); fill(181, 255, 20,0);

//eyes fill(255,255,255); ellipse( 230, 240, 80, 80 ); ellipse( 370, 240, 80, 80 );

//mini eyes fill(0,0,0); ellipse( 370, 245, 50, 50 ); ellipse( 230, 245, 50, 50 );

//minimun eyes fill(255); ellipse( 360, 250, 12, 12 ); ellipse( 240, 250, 12, 12 );

//mouth fill(255,255,255); rect(267, 310, 70, 30, 18); //(x,y,yokosize,tatesize,?) arc(303,343,70,80,radians(190),radians(350)); //(x,y,tateyugami,yokoyugami)

//hara stroke(154,205,50); fill(255,241,0); rect(235, 380, 130, 30, 18); //(x,y,yokosize,tatesize,?) fill(255,170,255); rect(235, 400, 130, 40); fill(255,241,0); rect(235, 420, 130, 40); fill(255,170,255); rect(235, 440, 130, 25);

//mabuta fill(102, 170, 17); arc(230,238,80,73,radians(168),radians(356)); arc(370,238,80,73,radians(184),radians(369));

//hara no yoko no maru fill(102, 170, 17); stroke(154,205,50); ellipse( 400, 390, 18, 18 ); ellipse( 200, 390, 18, 18); ellipse( 400, 440, 18, 18 ); ellipse( 200, 440, 18, 18); ellipse( 400, 415, 18, 18 ); ellipse( 200, 415, 18, 18);

[cancancanda]

カーソルを中心に回転するアニメーション

float angle = 0;

void setup() { size(1000, 1000); background(255); }

void draw() { translate(mouseX, mouseY); rotate(angle);

// ガチャピンSVG import processing.svg.PGraphicsSVG;

// PApplet beginRecord(SVG, "PApplet.svg");

//noStroke(); background(255);

//輪郭の円 stroke(154,205,50); fill(154,205,50); ellipseMode( CENTER ); ellipse( 300, 300, 370, 370 ); fill(181, 255, 20,0);

//目 fill(255,255,255); ellipse( 230, 240, 80, 80 ); ellipse( 370, 240, 80, 80 );

//二番目に小さい目 fill(0,0,0); ellipse( 370, 245, 50, 50 ); ellipse( 230, 245, 50, 50 );

//一番小さい目 fill(255); ellipse( 360, 250, 12, 12 ); ellipse( 240, 250, 12, 12 );

//口 fill(255,255,255); rect(267, 310, 70, 30, 18); //(x,y,yokosize,tatesize,?) arc(303,343,70,80,radians(190),radians(350)); //(x,y,tateyugami,yokoyugami)

//おなか stroke(154,205,50); fill(255,241,0); rect(235, 380, 130, 30, 18); //(x,y,yokosize,tatesize,?) fill(255,170,255); rect(235, 400, 130, 40); fill(255,241,0); rect(235, 420, 130, 40); fill(255,170,255); rect(235, 440, 130, 25);

//mabuta fill(102, 170, 17); arc(230,238,80,73,radians(168),radians(356)); arc(370,238,80,73,radians(184),radians(369));

//おなかの横の円 fill(102, 170, 17); stroke(154,205,50); ellipse( 400, 390, 18, 18 ); ellipse( 200, 390, 18, 18); ellipse( 400, 440, 18, 18 ); ellipse( 200, 440, 18, 18); ellipse( 400, 415, 18, 18 ); ellipse( 200, 415, 18, 18);

//回転の速さ angle += 0.1; }

[cancancanda]

ゆらゆら揺れるアニメーション

// Press 'w' to start wiggling, space to restore // original positions.

PShape cube; float cubeSize = 320; float circleRad = 100; int circleRes = 40; float noiseMag = 1;

boolean wiggling = false;

void setup() { size(1024, 768, P3D);

createCube(); }

void draw() { background(0);

translate(width/2, height/2); rotateX(frameCount 0.01f); rotateY(frameCount 0.01f);

// ガチャピンSVG import processing.svg.PGraphicsSVG;

// PApplet beginRecord(SVG, "PApplet.svg");

//noStroke(); background(255);

//輪郭の円 stroke(154,205,50); fill(154,205,50); ellipseMode( CENTER ); ellipse( 300, 300, 370, 370 ); fill(181, 255, 20,0);

//目 fill(255,255,255); ellipse( 230, 240, 80, 80 ); ellipse( 370, 240, 80, 80 );

//二番目に小さい目 fill(0,0,0); ellipse( 370, 245, 50, 50 ); ellipse( 230, 245, 50, 50 );

//一番小さい目 fill(255); ellipse( 360, 250, 12, 12 ); ellipse( 240, 250, 12, 12 );

//口 fill(255,255,255); rect(267, 310, 70, 30, 18); //(x,y,yokosize,tatesize,?) arc(303,343,70,80,radians(190),radians(350)); //(x,y,tateyugami,yokoyugami)

//おなか stroke(154,205,50); fill(255,241,0); rect(235, 380, 130, 30, 18); //(x,y,yokosize,tatesize,?) fill(255,170,255); rect(235, 400, 130, 40); fill(255,241,0); rect(235, 420, 130, 40); fill(255,170,255); rect(235, 440, 130, 25);

//mabuta fill(102, 170, 17); arc(230,238,80,73,radians(168),radians(356)); arc(370,238,80,73,radians(184),radians(369));

//おなかの横の円 fill(102, 170, 17); stroke(154,205,50); ellipse( 400, 390, 18, 18 ); ellipse( 200, 390, 18, 18); ellipse( 400, 440, 18, 18 ); ellipse( 200, 440, 18, 18); ellipse( 400, 415, 18, 18 ); ellipse( 200, 415, 18, 18);

if (wiggling) { PVector pos = null; for (int i = 0; i < cube.getChildCount(); i++) { PShape face = cube.getChild(i); for (int j = 0; j < face.getVertexCount(); j++) { pos = face.getVertex(j, pos); pos.x += random(-noiseMag/2, +noiseMag/2); pos.y += random(-noiseMag/2, +noiseMag/2); pos.z += random(-noiseMag/2, +noiseMag/2); face.setVertex(j, pos.x, pos.y, pos.z); } } }

if (frameCount % 60 == 0) println(frameRate); }

public void keyPressed() { if (key == 'w') { wiggling = !wiggling; } else if (key == ' ') { restoreCube(); } else if (key == '1') { cube.setStrokeWeight(1); } else if (key == '2') { cube.setStrokeWeight(5); } else if (key == '3') { cube.setStrokeWeight(10); } }

void createCube() { cube = createShape(GROUP);

PShape face;

// Create all faces at front position for (int i = 0; i < 6; i++) { face = createShape(); createFaceWithHole(face); cube.addChild(face); }

// Rotate all the faces to their positions

// Front face - already correct face = cube.getChild(0);

// Back face face = cube.getChild(1); face.rotateY(radians(180));

// Right face face = cube.getChild(2); face.rotateY(radians(90));

// Left face face = cube.getChild(3); face.rotateY(radians(-90));

// Top face face = cube.getChild(4); face.rotateX(radians(90));

// Bottom face face = cube.getChild(5); face.rotateX(radians(-90)); }

void createFaceWithHole(PShape face) { face.beginShape(POLYGON); face.stroke(255, 0, 0); face.fill(255);

// Draw main shape Clockwise face.vertex(-cubeSize/2, -cubeSize/2, +cubeSize/2); face.vertex(+cubeSize/2, -cubeSize/2, +cubeSize/2); face.vertex(+cubeSize/2, +cubeSize/2, +cubeSize/2); face.vertex(-cubeSize / 2, +cubeSize / 2, +cubeSize / 2);

// Draw contour (hole) Counter-Clockwise face.beginContour(); for (int i = 0; i < circleRes; i++) { float angle = TWO_PI i / circleRes; float x = circleRad sin(angle); float y = circleRad * cos(angle); float z = +cubeSize/2; face.vertex(x, y, z); } face.endContour();

face.endShape(CLOSE); }

void restoreCube() { // Rotation of faces is preserved, so we just reset them // the same way as the "front" face and they will stay // rotated correctly for (int i = 0; i < 6; i++) { PShape face = cube.getChild(i); restoreFaceWithHole(face); } }

void restoreFaceWithHole(PShape face) { face.setVertex(0, -cubeSize/2, -cubeSize/2, +cubeSize/2); face.setVertex(1, +cubeSize/2, -cubeSize/2, +cubeSize/2); face.setVertex(2, +cubeSize/2, +cubeSize/2, +cubeSize/2); face.setVertex(3, -cubeSize/2, +cubeSize/2, +cubeSize/2); for (int i = 0; i < circleRes; i++) { float angle = TWO_PI i / circleRes; float x = circleRad sin(angle); float y = circleRad * cos(angle); float z = +cubeSize/2; face.setVertex(4 + i, x, y, z); } }