Date

September 10, 2025

Number

‣

About “Parametric”

パラメトリック＝パラメーターによって変化するかたち

1. Architecture, furniture

建築業界では一般的?

Grasshopper

Grasshopper™ is a graphical algorithm editor tightly integrated with Rhino’s 3-D modeling tools.

www.grasshopper3d.com

YCAM GRP, 3D object maker

Reza Ali

Generative, Computational Design, UI, GUI, Minimal, Modern, Art, Photography, Beauty, Visual, Spatial, Architecture, New Media, Interactive, Installations, Computer Graphics, Graphic Design, openFrameworks, Processing, Cinder, Creative Coding

www.syedrezaali.com

2. Variable, Parametric fonts

Fit Hebrew

Fit makes text fit

djr.com

一定の幅にあわせてフォントのかたちが変化する

FF Beowolf

Erik van Blokland, Just van Rossum. FF Beowolf. 1990 | MoMA

www.moma.org

Erik van Blokland, Just van Rossum. FF Beowolf. 1990 | MoMA

MoMAコレクションに入ったデジタルフォント：文字の輪郭性にランダム性をもたせ、活字のような不完全さと粗さを蘇らせた

LTR Beowolf & BeoSans at LettError.com

These are the Original Randomfonts

letterror.com

metaflop

hello world | metaflop

Metaflop is an easy to use web application for modulating your own fonts. Metaflop uses Metafont, which allows you to easily customize a font within the given parameters and generate a large range of font families with very little effort.

www.metaflop.com

Web application: パラメーターを調整して簡単にフォントのかたちを調節できる

参考：https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/

3. Parametric typography

GBA prototype

gba-logo.netlify.app

ランダムにアルファベットのかたちが変化する多様なロゴ

Guilty By Association

An inclusive space for culture, commerce, and an ever-expanding community of artists, designers, and buyers.

gba.family

Poster Generator | SVA MASTERS IN BRANDING

The Master of Professional Studies is a one-year graduate degree program that examines the relationship between design and strategy, and the power of design thinking as a way to combine creative skills with the problem-solving and decision-making processes of design and business.

web.archive.org

Posterデザインの値を調整

DIA — DIA

DIA is a branding and graphic design studio specializing in kinetic identities and typographic systems. Headquartered in NYC and Chamonix, France, we’ve developed a new approach to designing identity systems where motion is foundational and creative tools always accompany brand guidelines. Our generative tools and autonomous design systems empower internal teams and simplify oversight.

tools.dia.tv

Parametric design strategies | courseware

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

edu.derfunke.net

今回のPracticeで使用するtextToPointsを使用した例

‣

Practice

0. Goal

数値やパラメータを制御しかたちを変化させよう

1. Setting up

Selecting the fonts

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

Import the font

let font;

function preload(){
  font = loadFont("data/Inter_28pt-Medium.ttf");
}

2. Point detection

点を抽出

textToPoints

p5js-ja.pages.dev

点を描画

beginShape(POINTS);
  for(let i = 0;i < points.length; i++){
    let p = points[i];
    vertex(p.x,p.y);
  }
  endShape();

3. Add Sliders, Texts input

Sliderを追加

createSlider

p5js.org

Textで説明を追加

text

p5js.org

文字入力欄を追加

createInput

p5js.org

4. Valuable Size (Points)

点を円に変化、ランダム性を追加

    ellipse(p.x,p.y,random(randomValueMin,randomValueMax) + circleSize);

5.Export SVG

Embed GitHub

‣

Making parametric ID card

名刺をつくろう

判型：4号（55*91）, 欧米サイズなどが基本（https://www.graphic.jp/feature/business_card_size）

変形もアリ

用紙：斤量（四六版180kg以上）
両面印刷

三種類以上

例：ウェイトが違う、かたちがちがう…

テキスト情報：教室内で見せれる情報のみに
実物を提出
締め切り：10/1 授業開始まで