portfolio // manga style

ガーン

ドキドキ

ズキュン

バコッ

創作活動記録

PORTFOLIO週刊ポートフォリオ

Vol.1 | First Issue | 創刊号

NEW RELEASE 連載開始

ガッ

表紙イラスト: クリエイター P.1

— 1 —

CHARACTER PROFILE

登場人物紹介

主人公

ROBERTロバート

ROLE / 役割Developer & Designer

LEVEL / レベルExpert (Lv.99)

STR / 力

INT / 知力

CRE / 創造

Genius, billionaire, playboy, philanthropist and just a good boy. He creates whatever he wants and does whatever he likes.

天才、億万長者、プレイボーイ、慈善家、そしてただの良い青年。彼は思いのままに何でも作り出し、好きなことを何でもする。

Adobe Master

Photoshop
Audition
Premiere
Illustrator
After Effects

カッ

Game Master

Minecraft
LoL/Dota2
Valorant
Blasphemous
Frostpunk

シュン

Dialogue Master

Good jokes
Pleasant talks
Open-hearted

ゴゴゴ

❝

創作とは、自分の世界を
他人に見せる行為である

"Creation is the act of showing your world to others"

❞

次回、スキル詳細

↓

— 2 —

WORKS

作品集

01IMAGES 画像

カシャ

Esat gatavs paramainam?

Campaign poster for RTU New Media Arts & Design.

CampaignPoster

パシャ

Kāds tu vēlies būt?

Campaign poster for RTU New Media Arts & Design.

InteractiveConcept

キラ

Mainīt vai tikt mainītam?

Campaign poster for RTU New Media Arts & Design.

MotionDesign

カシャ

Michael Jackson

Vector illustration of the King of Pop.

VectorIllustration

パシャ

Never Fall

Illustration exploring resilience and artistic identity.

ConceptTypography

キラ

Digital Wellness

Health awareness poster about phone addiction and balance.

PosterSocial

カシャ

Forest Floor Collage I

Photo glitch in real life.

CollagePaper

パシャ

Forest Floor Collage II

Photo glitches in software.

CollagePhotography

02ANIMATED GIFS アニメーション

Drink

Nice vacation

Umbrella

Is it going to rain?

Walk

Reflections on the Past

続く

↓

— 3 —

P5JS SKETCHES

クリエイティブコーディング

01 POLYGON GAME 多角形ゲーム

ABOUT THIS SKETCH

A game in which you can use a dice and game pieces to create amazing abstract objects. The possibilities are endless!

p5.jsSATGenerativeGeometry

02 SHAPES & CROSSES 形状と十字

ABOUT THIS SKETCH

A composition of various shapes scattered randomly across the field, gradually receding into the background. Will you be able to spot something interesting?

p5.jsMotionParticlesGenerative

次回、新スケッチ

↓

— 4 —

3D SPACE

三次元空間

ENTER THE VOID

An interactive VR experience built with A-Frame. Explore a low-poly world with planets, animals, and a rocket launch sequence. Navigate with WASD + mouse look.

VR READY A-FRAME

🚀 LAUNCH 3D SPACE

Opens in new tab // 新しいタブで開く

ゴゴ

PREVIEW

🌍 Earth Scene · 🚀 Rocket Launch · 🌌 Space Travel

🌳

Nature

🐄

Animals

🪐

Planets

TECH STACK

Built using the A-Frame framework. It includes GLTF model loading, spatial audio, and interactive elements. The scene transitions from Earth to space as the rocket launches. See just how far environmental pollution can go.

A-FrameWebXRGLTF3D Audio

続く

↓

— 5 —

// Polygon Game Sketch
let figures = [];
let figureRadius = 45;
let colors = [];
let maxAttempts = 300;

function setup() {
  createCanvas(windowWidth * 0.9, 500);
  noLoop();
  colors = [color(255, 100, 100, 200), color(100, 255, 100, 200), color(100, 100, 255, 200)];
  generateDrawing();
}

function draw() {
  background(20);
  stroke(255, 255, 255, 40);
  strokeWeight(1);
  for (let i = 1; i < figures.length; i++) {
    let parent = figures[figures[i].parentIndex];
    line(parent.x, parent.y, figures[i].x, figures[i].y);
  }
  for (let fig of figures) { drawFigure(fig); }
  noStroke();
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(12);
  for (let fig of figures) { text(fig.sides + "-gon", fig.x, fig.y + 5); }
  textSize(16);
  text("Abstract Polygon Drawing — Click to regenerate", width / 2, 25);
  textSize(12);
  fill(200);
  text("Triangle=1,6 | Square=3,4 | N-sided=2,5 (max 8 sides)", width / 2, 45);
}

function mousePressed() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    generateDrawing();
    redraw();
  }
}

function rollDice() { return floor(random(1, 7)); }
function getFigureType(dv) { if (dv === 1 || dv === 6) return 0; if (dv === 2 || dv === 5) return 1; return 2; }
function getSides(ft) { if (ft === 0) return 3; if (ft === 2) return 4; let total = 0, roll = rollDice(); total += roll; while (roll === 1 || roll === 2) { roll = rollDice(); total += roll; } if (total > 8) total = 8; return total; }
function shuffleArray(arr) { for (let j = arr.length - 1; j > 0; j--) { let k = floor(random(j + 1));[arr[j], arr[k]] = [arr[k], arr[j]]; } }
function getAvailableSides(pi) { let parent = figures[pi], occupied = []; for (let i = 0; i < figures.length; i++) { if (figures[i].parentIndex === pi) occupied.push(figures[i].attachedSide); } let available = []; for (let s = 0; s < parent.sides; s++) { if (!occupied.includes(s)) available.push(s); } return available; }
function getPolygonVertices(cx, cy, sides, radius, rotation) { let vertices = [], angleStep = TWO_PI / sides; for (let i = 0; i < sides; i++) { let angle = rotation + i * angleStep - PI / 2; vertices.push(createVector(cx + cos(angle) * radius, cy + sin(angle) * radius)); } return vertices; }
function getEdgeMidpoint(vertices, edgeIndex) { let v1 = vertices[edgeIndex], v2 = vertices[(edgeIndex + 1) % vertices.length]; return createVector((v1.x + v2.x) / 2, (v1.y + v2.y) / 2); }
function getEdgeAngle(vertices, edgeIndex) { let v1 = vertices[edgeIndex], v2 = vertices[(edgeIndex + 1) % vertices.length]; return atan2(v2.y - v1.y, v2.x - v1.x); }

function createAttachedFigure(parent, parentSide, sides, figureType, parentIndex) {
  let parentVertices = getPolygonVertices(parent.x, parent.y, parent.sides, figureRadius, parent.rotation);
  let parentEdgeStart = parentVertices[parentSide], parentEdgeEnd = parentVertices[(parentSide + 1) % parent.sides];
  let parentEdgeVec = createVector(parentEdgeEnd.x - parentEdgeStart.x, parentEdgeEnd.y - parentEdgeStart.y);
  let parentEdgeAngle = parentEdgeVec.heading();
  let newApothem = figureRadius * cos(PI / sides);
  let parentMid = getEdgeMidpoint(parentVertices, parentSide);
  let dx = parentMid.x - parent.x, dy = parentMid.y - parent.y;
  let distToEdge = sqrt(dx * dx + dy * dy);
  if (distToEdge < 0.001) return null;
  let nx = dx / distToEdge, ny = dy / distToEdge;
  let newX = parentMid.x + nx * newApothem, newY = parentMid.y + ny * newApothem;
  let angleStep = TWO_PI / sides, targetMidAngle = atan2(-ny, -nx);
  let bestRotation = 0, bestEdge = 0, bestError = 999999;
  for (let tryEdge = 0; tryEdge < sides; tryEdge++) {
    let tryRotation = targetMidAngle - tryEdge * angleStep + PI / 2 - angleStep / 2;
    let tryVertices = getPolygonVertices(newX, newY, sides, figureRadius, tryRotation);
    let tryEdgeVec = createVector(tryVertices[(tryEdge + 1) % sides].x - tryVertices[tryEdge].x, tryVertices[(tryEdge + 1) % sides].y - tryVertices[tryEdge].y);
    let tryEdgeAngle = tryEdgeVec.heading();
    let angleDiff = abs(tryEdgeAngle - parentEdgeAngle);
    if (angleDiff > PI) angleDiff = TWO_PI - angleDiff;
    let isParallel = (angleDiff < 0.01 || abs(angleDiff - PI) < 0.01);
    let tryEdgeMid = getEdgeMidpoint(tryVertices, tryEdge);
    let midError = dist(tryEdgeMid.x, tryEdgeMid.y, parentMid.x, parentMid.y);
    let totalError = midError; if (!isParallel) totalError += 1000;
    if (totalError < bestError) { bestError = totalError; bestRotation = tryRotation; bestEdge = tryEdge; }
  }
  let newVertices = getPolygonVertices(newX, newY, sides, figureRadius, bestRotation);
  let bestEdgeMid = getEdgeMidpoint(newVertices, bestEdge);
  let adjustX = parentMid.x - bestEdgeMid.x, adjustY = parentMid.y - bestEdgeMid.y;
  newX += adjustX; newY += adjustY;
  if (newX < 60 || newX > width - 60 || newY < 60 || newY > height - 60) return null;
  return { type: figureType, sides: sides, x: newX, y: newY, rotation: bestRotation, parentIndex: parentIndex, attachedSide: parentSide, attachedToEdge: bestEdge, colorIndex: figureType };
}

function polygonsOverlap(newFig) {
  let newVertices = getPolygonVertices(newFig.x, newFig.y, newFig.sides, figureRadius, newFig.rotation);
  for (let existing of figures) {
    if (existing === figures[newFig.parentIndex]) continue;
    let existingVertices = getPolygonVertices(existing.x, existing.y, existing.sides, figureRadius, existing.rotation);
    if (satCollision(newVertices, existingVertices)) return true;
  }
  return false;
}

function satCollision(poly1, poly2) {
  let edges = [];
  for (let i = 0; i < poly1.length; i++) { let v1 = poly1[i], v2 = poly1[(i + 1) % poly1.length]; edges.push(createVector(v2.x - v1.x, v2.y - v1.y)); }
  for (let i = 0; i < poly2.length; i++) { let v1 = poly2[i], v2 = poly2[(i + 1) % poly2.length]; edges.push(createVector(v2.x - v1.x, v2.y - v1.y)); }
  for (let edge of edges) { let axis = createVector(-edge.y, edge.x); axis.normalize(); let proj1 = projectPolygon(poly1, axis), proj2 = projectPolygon(poly2, axis); if (!projectionsOverlap(proj1, proj2)) return false; }
  return true;
}

function projectPolygon(poly, axis) { let min = Infinity, max = -Infinity; for (let v of poly) { let projection = v.x * axis.x + v.y * axis.y; if (projection < min) min = projection; if (projection > max) max = projection; } return { min: min, max: max }; }
function projectionsOverlap(proj1, proj2) { return !(proj1.max < proj2.min || proj2.max < proj1.min); }

function drawFigure(fig) {
  push();
  let vertices = getPolygonVertices(fig.x, fig.y, fig.sides, figureRadius, fig.rotation);
  fill(colors[fig.colorIndex]); stroke(255, 220); strokeWeight(2);
  beginShape(); for (let v of vertices) vertex(v.x, v.y); endShape(CLOSE);
  if (fig.parentIndex >= 0) { stroke(255, 255, 0, 180); strokeWeight(5); let v1 = vertices[fig.attachedToEdge], v2 = vertices[(fig.attachedToEdge + 1) % vertices.length]; line(v1.x, v1.y, v2.x, v2.y); }
  fill(255, 200); noStroke(); ellipse(fig.x, fig.y, 6, 6); pop();
}

function generateDrawing() {
  figures = [];
  let dice1 = rollDice(), firstFigureType = getFigureType(dice1), firstSides = getSides(firstFigureType);
  figures.push({ type: firstFigureType, sides: firstSides, x: width / 2, y: height / 2, rotation: 0, parentIndex: -1, attachedSide: -1, attachedToEdge: -1, colorIndex: firstFigureType });
  for (let i = 0; i < 5; i++) {
    let placed = false, attempts = 0;
    while (!placed && attempts < maxAttempts) {
      attempts++;
      let dice = rollDice(), figureType = getFigureType(dice), sides = getSides(figureType);
      let parentOrder = []; for (let pp = 0; pp < figures.length; pp++) parentOrder.push(pp);
      shuffleArray(parentOrder);
      for (let parentIdx of parentOrder) {
        if (placed) break;
        let parent = figures[parentIdx], availableSides = getAvailableSides(parentIdx);
        if (availableSides.length === 0) continue;
        shuffleArray(availableSides);
        for (let parentSide of availableSides) {
          let newFig = createAttachedFigure(parent, parentSide, sides, figureType, parentIdx);
          if (newFig && !polygonsOverlap(newFig)) { figures.push(newFig); placed = true; break; }
        }
      }
    }
  }
}

// Shapes & Crosses Sketch
let shapes = [], crosses = [], MAX_CROSSES = 500;

function setup() {
  createCanvas(windowWidth * 0.9, 500);
  background(245);
}

function draw() {
  noStroke(); fill(245, 245, 245, 10); rect(0, 0, width, height);
  spawnShapes(); drawShapes(); spawnCrosses(); drawAllCrosses();
}

function spawnShapes() {
  if (random(1) < 0.25) { shapes.push({ type: floor(random(3)), x: random(40, width - 40), y: random(40, height - 40), s: random(20, 140), life: 255, angle: random(TWO_PI) }); }
  shapes = shapes.filter(sh => sh.life > 0);
}

function drawShapes() {
  for (let sh of shapes) { stroke(0, 85); strokeWeight(2.4); noFill(); if (sh.type === 0) circle(sh.x, sh.y, sh.s); if (sh.type === 1) drawTriangle(sh.x, sh.y, sh.s * 0.6, sh.angle); if (sh.type === 2) drawStar(sh.x, sh.y, sh.s * 0.4, sh.angle); sh.life -= 0.25; }
}

function spawnCrosses() { if (frameCount % 4 !== 0) return; let count = floor(random(3, 8)); for (let i = 0; i < count; i++) { crosses.push({ x: random(width), y: random(height), size: random(8, 16), angle: random(TWO_PI) }); } while (crosses.length > MAX_CROSSES) crosses.shift(); }
function drawAllCrosses() { stroke(0, 22); strokeWeight(1.5); for (let c of crosses) drawCross(c.x, c.y, c.size, c.angle); }
function drawCross(x, y, size, angle) { let dx = cos(angle) * size, dy = sin(angle) * size; line(x - dx, y - dy, x + dx, y + dy); let dx2 = cos(angle + HALF_PI) * size, dy2 = sin(angle + HALF_PI) * size; line(x - dx2, y - dy2, x + dx2, y + dy2); }
function drawTriangle(x, y, s, angle) { push(); translate(x, y); rotate(angle); beginShape(); vertex(0, -s); vertex(-s, s); vertex(s, s); endShape(CLOSE); pop(); }
function drawStar(x, y, r, angle) { push(); translate(x, y); rotate(angle); beginShape(); for (let i = 0; i < 8; i++) { let rr = (i % 2 === 0) ? r : r * 0.45; let a = i * TWO_PI / 8; vertex(cos(a) * rr, sin(a) * rr); } endShape(CLOSE); pop(); }