読者です 読者をやめる 読者になる 読者になる

Daily Creative Coding

元「30 min. Processing」。毎日、Creative Codingします。

【Three.js】スペーストラベル

See the Pen space travel by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/27] space travel</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"><…</meta></head></html>

【Three.js】RGBのSpotLightが作る影

See the Pen RGB SpotLight by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/26] RGB SpotLight</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】ポイントクラウド

See the Pen point cloud by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/04/25] point cloud</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></meta></head></html>

MeshPhongMaterialのテスト

See the Pen MeshPhongMaterial test by aadebdeb (@aadebdeb) on CodePen. <html lang="ja"> <head> <meta charset="utf-8"> <title>[2017/03/24] MeshPhongMaterial test</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

球にいろいろなマテリアルを適用する

See the Pen materials for sphere by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/23]materials for sphere</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】マウスでブロックの高さを制御する

See the Pen [Three.js]blocks controlled height by mouse by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/22]blocks controlled height by mouse</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】球で構成されたボール

See the Pen [2017/03/21][Three.js]sphere ball by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/21] sphere ball</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】立方体を立方体状に配置する

See the Pen [2017/03/20][Three.js]big cube by cubes by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/20] big cube by cubes</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

【Three.js】SpotLightで影をつくる

See the Pen [2017/03/19][Three.js]shadow by cubes by aadebdeb (@aadebdeb) on CodePen. <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/19] shadow by cubes</title> <style> body { margin: 0; overflow: hidden; } </style> </meta></head></html>

p5.jsの3D基本図形

/* * 3D primitives * * @author aadebdeb * @date 2017/02/03 */ var X_SPACE = 200; var Y_SPACE = 250; var X_NUM = 4; var Y_NUM = 2; function setup() { createCanvas(800, 600, WEBGL); } function draw() { background(255); push(); translateTo(0,…

半透明なブロック

3D

/** * translucent blocks * * @author aa_debdeb * @date 2017/01/06 */ float W = 800; float H = 800; float BOX_WIDTH = 20; void setup(){ size(500, 500, P3D); fill(255, 50); stroke(255, 150); strokeWeight(2); } void draw(){ background(0); tra…

動く階段

3D

/* * moving steps * * @author aa_debdeb * @date 2016/12/21 */ float DISPLAY_WIDTH = 450; float BLOCK_WIDTH = 20; PVector loc; void setup(){ size(500, 500, P3D); noStroke(); fill(255, 255, 0); loc = new PVector(random(10000), random(10000))…

変形を繰り返すボックス #2

3D

/** * transforming boxes #2 * * @author aa_debdeb * @date 2016/12/16 */ int LOOP = 300; float MAX_BLOCK_WIDTH = 50; ArrayList<Block> blocks; void setup(){ size(500, 500, P3D); blocks = new ArrayList<Block>(); float gap = 50; int num = 30; for(int x = 0;</block></block>…

変形を繰り返すボックス

3D

/** * transforming boxes * * @author aa_debdeb * @date 2016/12/15 */ int LOOP = 120; float MAX_BLOCK_WIDTH = 35; ArrayList<Block> blocks; void setup(){ size(500, 500, P3D); blocks = new ArrayList<Block>(); float gap = 60; int num = 30; for(int x = 0; x </block></block>…

爆発の流れ

3D

¥ /** * bursting flow * * @author aa_debdeb * @date 2016/12/06 */ ArrayList<Particle> particles; float gravity = 0.01; void setup(){ size(640, 640, P3D); colorMode(HSB, 360, 100, 100); particles = new ArrayList<Particle>(); for(int i = 0; i < 300; i++){ parti</particle></particle>…

スペースデブリ

3D

/** * space debris * * @author aa_debdeb * @date 2016/12/01 */ ArrayList<Particle> particles; void setup(){ size(640, 480, P3D); particles = new ArrayList<Particle>(); for(int i = 0; i < 500; i++){ particles.add(new Particle()); } } void draw(){ background(0)</particle></particle>…

柔らかいタワー

/** * soft towers * * @author aa_debdeb * @date 2016/11/19 */ ArrayList<Tower> towers; float towerWidth = 25; float minHeight = 0; float maxHeight = 400; float maxAcc = 50; void setup(){ size(500, 500, P3D); towers = new ArrayList<Tower>(); for(float w </tower></tower>…

3D空間を飛んで移動する

flying in 3D world - OpenProcessing /** * flying in 3D world * * @author aa_debdeb * @date 2016/11/12 */ Camera cam; ArrayList<Block> blocks; void setup(){ size(640, 640, P3D); noStroke(); blocks = new ArrayList<Block>(); for(int i = 0; i < 150; i++){ b</block></block>…

3D空間を飛ぶ鳥

3D

3D birds - OpenProcessing /** * 3D birds * * @author aa_debdeb * @date 2016/10/28 */ PVector bodySize = new PVector(10, 10, 40); PVector wingSize = new PVector(40, 1, bodySize.z); ArrayList<Bird> birds; color c1, c2; void setup(){ size(640, 640,</bird>…

都市の上を飛ぶ

3D

fly above city - OpenProcessing /** * fly above city * * @author aa_debdeb * @date 2016/10/26 */ float speed = 20; ArrayList<Block> blocks; color c1, c2, c3; void setup(){ // fullScreen(P3D); size(640, 640, P3D); rectMode(CENTER); noStroke(); mou</block>…

3Dのトンネル #3

3D

3D tunnel #3 - OpenProcessing /** * 3D tunnel #3 * * @author aa_debdeb * @date 2016/10/25 */ float distance = 0.0; float speed = 5; float objStep = 30; color c1, c2; boolean useRect; float noiseX = random(10000); float noiseY = random(1000…

3Dのトンネル #2

3D

3D tunnel #2 - OpenProcessing /** * 3D tunnel #2 * * @author aa_debdeb * @date 2016/10/24 */ float distance = 0.0; float speed = 5; float objStep = 40; color c1, c2; boolean useRect; void setup(){ //fullScreen(P3D); size(640, 640, P3D); re…

3Dのトンネル #1

3D

3D tunnel #1 - OpenProcessing /** * 3D tunnel #1 * * @author aa_debdeb * @date 2016/10/23 */ float distance = 0.0; float speed = 3; float objStep = 35; color c1, c2; boolean useRect; void setup(){ //fullScreen(P3D); size(640, 640, P3D); re…

無重力空間で回転移動するオブジェクト

3D

objects with zero gravity - OpenProcessing /** * objects with zero gravity * * @author aa_debdeb * @date 2016/10/22 */ ArrayList<Block> blocks; void setup(){ size(640, 640, P3D); blocks = new ArrayList<Block>(); for(int i = 0; i < 60; i++){ blocks.add(n</block></block>…

波面 3D

3D

/** * surface of wave * * @author aa_debdeb * @date 2016/10/15 */ PVector center; PVector nOffset; void setup(){ size(500, 500, P3D); center = new PVector(width / 2, height / 2); nOffset = new PVector(random(10000), random(10000)); } void …

ポップアップ円弧

3D

/** * arc 3D * * @author aa_debdeb * @date 2016/10/14 */ void setup(){ size(640, 640, P3D); noStroke(); mousePressed(); } void mousePressed(){ background(255); translate(width / 2, height / 2); for(int i = 0; i < 20; i++){ int arcNum = int…

三次元の花びら

3D

/** * 3D petals * * @author aa_debdeb * @date 2016/10/11 */ float maxRadious = 300; PVector offset1, offset2; float scale1 = 0.02; float scale2 = 0.01; color c1 = color(255); color c2 = color(255, 77, 172); void setup(){ size(640, 640, P3D…

拡大するキューブ群2

3D

/** * enlarging crowd of cubes 2 * * @author aa_debdeb * @date 2016/09/14 */ int BOX_NUM = 25; float BOX_SIZE = 20; int[][][] states; int[][][] neighbors; int[][] moves = {{1, 0, 0}, {0, 1, 0}, {0, 0, 1}, {-1, 0, 0}, {0, -1, 0}, {0, 0, -1}…

拡大するキューブ群

3D

/** * enlarging crowd of cubes * * @author aa_debdeb * @date 2016/09/13 */ int BOX_NUM = 50; float BOX_SIZE = 10; int[][][] states; int[][][] neighbors; int[][] moves = {{1, 0, 0}, {0, 1, 0}, {0, 0, 1}, {-1, 0, 0}, {0, -1, 0}, {0, 0, -1}};…

スピンする立方体

3D

/** * spinning cubes * * @author aa_debdeb * @date 2016/09/12 */ ArrayList<Box> boxes = new ArrayList<Box>(); void setup(){ size(640, 640, P3D); noStroke(); boxes = new ArrayList<Box>(); while(boxes.size() < 50){ PVector loc = new PVector(random(width), </box></box></box>…

球状の雲

3D

/** * sphere of cloud * * @author aa_debdeb * @date 2016/09/09 */ float scale = 100; float phi = (1 + sqrt(5)) / 2.0; float radious = sqrt(sq(1) + sq(phi)); ArrayList<Triangle> triangles; float nScale = 0.5; float tScale = 0.03; PVector nOffset; voi</triangle>…

二重螺旋

3D

/** * double helix * * @author aa_debdeb * @date 2016/09/07 */ void setup(){ size(480, 640, P3D); } void draw(){ background(255); translate(width / 2, 0, 0); rotateY(frameCount * 0.05); fill(152, 251, 152); stroke(152, 251, 152); float h =…

グラデーションの球

3D

/** * gradational sphere * * @author aa_debdeb * @date 2016/09/06 */ float scale = 100; float phi = (1 + sqrt(5)) / 2.0; float radious = sqrt(sq(1) + sq(phi)); ArrayList<Triangle> triangles; color[][] cols; void mousePressed(){ cols = new color[3][2</triangle>…

表面が流れる球

3D

/** * unstable sphere * * @author aa_debdeb * @date 2016/09/05 */ float scale = 100; float phi = (1 + sqrt(5)) / 2.0; float radious = sqrt(sq(1) + sq(phi)); ArrayList<Triangle> triangles; float nScale = 0.2; float tScale = 0.005; PVector nOffset; vo</triangle>…

桜ふぶき

3D

/** * shower of cherry blossom * * @author aa_debdeb * @date 2016/09/01 */ ArrayList<Triangle> triangles; void setup(){ size(640, 480, P3D); noStroke(); fill(255, 230, 234); triangles = new ArrayList<Triangle>(); } void draw(){ background(255); ArrayList<Triangle> next</triangle></triangle></triangle>…

多環の球

/** * multi-ringed sphere * * @author aa_debdeb * @date 2016/08/22 */ float step = 5; color c1 = color(0, 206, 209); color c2 = color(255, 215, 0); void setup(){ size(500, 500, P3D); noFill(); } void draw(){ background(0); translate(width …

パーティクルでいろいろな形をつくる

/** * morph by particles * * @author aa_debdeb * @date 2016/08/19 */ int state = 0; ArrayList<Particle> particles; void setup(){ size(500, 500, P3D); particles = new ArrayList<Particle>(); for(int i = 0; i < 5000; i++){ particles.add(new Particle()); } } void</particle></particle>…

パーティクルで構成された球

/** * sphere composed of particles * * @author aa_debdeb * @date 2016/08/18 */ float scale = 100; float phi = (1 + sqrt(5)) / 2.0; ArrayList<Particle> particles; void setup(){ size(500, 500, P3D); PVector[] vertices = {new PVector(0, 1, phi), new PV</particle>…

ジオデシック・ドーム

3D

/** * Geodesic Dome * * @author aa_debdeb * @date 2016/08/17 */ int state = 0; float scale = 100; float phi = (1 + sqrt(5)) / 2.0; float radious = sqrt(sq(1) + sq(phi)); ArrayList<Triangle> triangles; void setup(){ size(500, 500, P3D); PVector[] ver</triangle>…

茂み

/** * grove * * @author aa_debdeb * @date 2016/08/12 */ void setup(){ size(640, 480, P3D); mousePressed(); } void mousePressed(){ background(60, 179, 113); translate(width / 2, height * (4.0 / 5), -300); stroke(255); for(int i = 0; i < 6; …

三次元の再帰木

3D

/** * 3D recursive tree * * @author aa_debdeb * @date 2016/08/12 */ Tree tree; void setup(){ size(640, 480, P3D); tree = new Tree(); } void draw(){ background(60); translate(width / 2, height * (4.0 / 5)); rotateX(map(mouseY, 0, width, -PI…

なびく面

3D

/* * surface in the wind * * @author aa_debdeb * @date 2016/08/06 */ int num = 50; int step = 20; float scale = 0.1; PVector[] offsets; void setup(){ size(500, 500, P3D); fill(220, 20, 60); stroke(0); strokeWeight(1); offsets = new PVector…

キューブの崩壊

3D

/** * destruction of cube * * @author aa_debdeb * @date 2016/07/31 */ int blockNum = 10; float blockSize = 30; ArrayList<Block> blocks; void setup(){ size(500, 500, P3D); noStroke(); initialize(); } void initialize(){ blocks = new ArrayList<Block>(); fl</block></block>…

波の干渉3D

3D

/** * wave interference in 3D * * @author aa_debdeb * @date 2016/07/21 */ float step = 20; float maxAmp = 50; float maxDistance = 300; color c1 = color(22, 199, 175); color c2 = color(199, 21, 133); ArrayList<Oscillator> oscillators; void setup(){ siz</oscillator>…

金の板

3D

/** * golden plate * * @author aa_debdeb * @date 2016/07/20 */ color gold1, gold2; PVector[] noiseOffsets; void setup(){ size(500, 500, P3D); noStroke(); colorMode(HSB, 360, 100, 100); gold1 = color(43, 100, 85); gold2 = color(43, 20, 85);…

たくさんの円を傾けながら重ねて円錐をつくる

3D

/** * penguins * * @author aa_debdeb * @date 2016/07/18 */ float maxR = 100; float maxZ = 300; float vStep = 0.01; ArrayList<Tree> trees; void setup(){ size(640, 480, P3D); colorMode(HSB, 360, 100, 100); initialize(); } void initialize(){ trees </tree>…

水面を漂うオブジェクト

3D

/** * floating objects on water * * @author aa_debdeb * @date 2016/07/17 */ PVector stepSize = new PVector(30, 40); PVector rectSize = new PVector(20, 30); float maxZ = 200; PVector noiseOffset; float noiseScale = 0.003; float timeScale = …

海底探査

/** * seabed exploration * * @author aa_debdeb * @date 2016/07/15 */ float maxLocRadious = 800; float minSize = 10; float maxSize = 100; float noiseX = random(10000); float noiseY = random(10000); float noiseScale = 0.02; float camSpeed = …

都市を見下ろす

/** * birds-eye view of city * * @author aa_debdeb * @date 2016/07/14 */ void setup(){ size(500, 500, P3D); mousePressed(); } void draw(){ } void mousePressed(){ float maxLocRadious = 500; float minSize = 5; float maxSize = 30; float noise…

3D空間を高速移動する

3D

/** * endless rollar coaster * * @author aa_debdeb * @date 2016/07/13 */ float xScale = 750; float yScale = 750; float zScale = 0.001; float speed = 0.005; float eyeZ = 10; float ellipseWidth = 100; float noiseX, noiseY; void setup(){ size…