| vec3 point3D = mix(pointA.xyz, pointB.xyz, position.z); | |
| vec4 eyePos = modelViewMatrix * vec4(point3D, 1.0); | |
| float spriteWidth = uniformRadius * vertexRadius * (2.0 / 3.0); | |
| vec4 projCorner = projectionMatrix * vec4( | |
| 0.5 * spriteWidth, 0.5 * spriteWidth, eyePos.z, eyePos.w | |
| ); | |
| float computedRadius = projCorner.x / projCorner.w * screenWidth; |
| Since 2000, the Pantone Color Institute has declared a particular color "Color of the Year". Twice a year the company hosts, in a European capital, a secret meeting of representatives from various nations' color standards groups. After two days of presentations and debate, they choose a color for the following year; for example, the color for summer 2013 was chosen in London in the spring of 2012. | |
| Below is a list of all the winning "Colors of the Year" and their corresponding hex codes, from the year 2000 to 2050. | |
| 2000 | |
| Cerulean | |
| #9BB7D4 | |
| 2001 | |
| Fuchsia Rose |
| import { Types, Component, System, World, TagComponent } from 'ecsy'; | |
| // An entity that, when clicked, | |
| // will randomly change its color | |
| // and play a sound | |
| class Element extends Component {} | |
| Element.schema = { | |
| value: { type: Types.Ref } | |
| }; |
| <body> | |
| <p>Lorem ipsum</p> | |
| <main data-scroll-container> | |
| <p data-scroll data-scroll-speed="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus nisi, maximus non nisl sed, tincidunt pellentesque est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque faucibus posuere ligula dignissim ultrices. Quisque at tellus non massa scelerisque vulputate. Nam dictum eget sapien porta pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis ac nibh ut ultricies. Aliquam aliquam tempus sollicitudin. Donec sed pulvinar ex. Praesent at quam fringilla, pharetra lectus eget, fermentum nisl. Nulla aliquet velit in urna tristique dignissim. Fusce venenatis massa arcu, non accumsan magna egestas et. Vestibulum faucibus eget dolor nec hendrerit.</p> | |
| <iframe | |
| data-scroll | |
| data-scroll-speed="2" | |
| src="webgl/index.html" | |
| width="100%" |
| [ | |
| "#ffffff", | |
| "#f2f2f2", | |
| "#000000", | |
| "#0d0d0d", | |
| "#400101", | |
| "#333333", | |
| "#ff0000", | |
| "#260101", | |
| "#262626", |
For this workshop, you'll need a GitHub account. It's free, and you'll probably use it again if you plan to continue coding.
Next, open CodeSandbox and Sign In for the first time by authenticating your GitHub account.
| ALICE'S ADVENTURES IN WONDERLAND | |
| Lewis Carroll | |
| THE MILLENNIUM FULCRUM EDITION 3.0 | |
| CHAPTER I. Down the Rabbit-Hole |
| // Unscaled values for kOpsinAbsorbanceBias | |
| const kB0 = 0.96723368009523958; | |
| const kB1 = kB0; | |
| const kB2 = kB0; | |
| const kScale = 255.0; | |
| const kScaleR = 1.0; | |
| const kScaleG = 1.0; | |
| const kInvScaleR = 1.0; | |
| const kInvScaleG = 1.0; |
| global.THREE = require("three"); | |
| const canvasSketch = require('canvas-sketch'); | |
| const Random = require('canvas-sketch-util/random'); | |
| const gradientHeight = 512; | |
| const settings = { | |
| dimensions: [ 2048, gradientHeight * 2 ] | |
| }; |
| [ | |
| { | |
| "name": "Hermosa Pink", | |
| "combinations": [ | |
| 176, | |
| 227, | |
| 273 | |
| ], | |
| "swatch": 0, | |
| "cmyk": [ |
