Skip to content

Instantly share code, notes, and snippets.

@GoSubRoutine GoSubRoutine/.block
Last active Mar 24, 2019

Embed
What would you like to do?
Place Canvas Between 2 Images
height: 650
scrolling: yes
<!DOCTYPE html>
<title>A bunch of failures</title>
<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>
<link rel=stylesheet href=style.css>
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>-->
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>-->
<script defer src=sketch.js></script>
<h1><ol>
<li>Creativity means not being afraid <s>to fail</s>
<li>The ideas here now are not as good as the ideas I'm going to put here later
<li>Be excellent to each other
</ol></h1>
<img width=400 src=http://www.ABunchOfFailures.com/gifs/CatchIt.gif>
<p id=between></p>
<img width=400 src=http://www.ABunchOfFailures.com/gifs/beexcellenttoeachother.jpg>
/**
* Place Canvas Between 2 Images (v1.0.1)
* by AkaTheWb (Aaron Smith)
* mod GoToLoop (2019-Jan-22)
*
* https://Discourse.Processing.org/t/
* getting-a-sketch-to-load-between-two-images-on-a-web-page/7734/2
*
* http://Bl.ocks.org/GoSubRoutine/56bc62553a754febacfe61e6f9239c69
*/
"use strict";
function setup() {
createCanvas(400, 400).parent(between);
fill('red').noStroke();
}
function draw() {
background(220);
ellipse(noise(frameCount * .01) * width, height>>1, width>>2, height>>2);
}
@import url('https://Fonts.GoogleAPIs.com/css?family=Permanent+Marker');
h1 {
font-family: 'Permanent Marker', cursive;
}
canvas {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.