Daily Creative Coding

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

3D

【GLSL】レイマーチングで複数の光源が作る影

See the Pen shadow by multiple lights by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolut…

【GLSL】レイマーチングでソフトシャドウ

See the Pen object with soft shadow by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolutio…

【GLSL】レイマーチングでハードシャドウ

See the Pen object with hard shadow by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolutio…

【GLSL】色付きのオブジェクト

See the Pen objects with color by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; st…

レイマーチングでPhongの反射モデル

See the Pen raymarching with Phong reflection model by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform …

【GLSL】透視投影カメラと平行投影カメラ

See the Pen perspective camera and orthographic camera by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; unifo…

【GLSL】立方体とトーラスと球

See the Pen box + round box + sphere + torus by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_…

平行投影カメラと繰り返し

See the Pen repetition with orthographic camera by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2…

【GLSL】透視投影カメラと繰り返し

See the Pen repetition with perspective camera by aadebdeb (@aadebdeb) on CodePen. #define PI 3.14159265359 #define TWO_PI PI * 2.0 #define HALF_PI PI / 2.0 precision mediump float; uniform float u_time; uniform vec2 u_mouse; uniform vec2 …

【Three.js】点で構成された球

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

【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>…