Anders Nissen anissen

Example cube

Added a simple cube while taking advantage of Cubic's built-in three.js bootstrapping

	kup = require 'coffeekup'
	# Client-side web page with canvas and processing
	webpage = kup.render ->
	doctype 5
	html ->
	head ->
	meta charset: 'utf-8'
	title 'CoffeeKup Processing'
	style '''body { background-image:url('http://icanhasnoise.com/1d0b07-4a2219/40x1500/4'); text-align: center; } header { font-family: 'Lobster Two', cursive; font-size: 28px; color: white; text-shadow: 3px 3px 3px brown; }'''
	link rel: 'stylesheet', href: 'http://fonts.googleapis.com/css?family=Lobster+Two&v2'

	require('zappa') ->
	@get '/': -> @render 'index', layout: no
	@view index: ->
	doctype 5
	html ->
	head ->
	title 'Zappa + CoffeeKup + Processing'
	style '''body { background-image:url('http://icanhasnoise.com/1d0b07-4a2219/40x1500/4'); text-align: center; } header { font-family: 'Lobster Two', cursive; font-size: 28px; color: white; text-shadow: 3px 3px 3px brown; }'''
	link rel: 'stylesheet', href: 'http://fonts.googleapis.com/css?family=Lobster+Two&v2'
	script src: 'http://processingjs.org/content/download/processing-js-1.3.6/processing-1.3.6-api.min.js'

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js webgl - draggable cubes</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	font-family: Monospace;
	background-color: #f0f0f0;

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>cube</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	font-family: Monospace;
	background-color: #f0f0f0;

	<html>

	<head>
	<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes"
	/>
	<script src="https://raw.github.com/CreateJS/EaselJS/master/lib/easeljs-0.6.0.min.js"></script>
	</head>

	<body>
	<canvas id="testCanvas" width="640" height="480" style="background: black;"></canvas>

	// "Fractal Cartoon" - former "DE edge detection" by Kali

	// Cartoon-like effect using eiffies's edge detection found here:
	// https://www.shadertoy.com/view/4ss3WB
	// I used my own method previously but was too complicated and not compiling everywhere.
	// Thanks to the suggestion by WouterVanNifterick.

	// There are no lights and no AO, only color by normals and dark edges.

	{
	"requireCurlyBraces": ["else", "for", "while", "do", "try", "catch"],
	"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
	"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
	"disallowRightStickedOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
	"requireRightStickedOperators": ["!"],
	"requireLeftStickedOperators": [","],
	"disallowImplicitTypeConversion": ["string"],
	"disallowKeywords": ["with"],
	"disallowMultipleLineBreaks": true,